The following code sets the svg paths drawn by sheet maps. However, on IE <= 8, the leaflet returns to VML for drawing polylines. How can I adapt this code to install both VML and SVG?
(function ($) { // Thank you, Pythagoras :) http://abstrusegoose.com/376 function calculateDistance(s, e) { return Math.sqrt( Math.pow(Math.abs(sx-ex), 2) + Math.pow(Math.abs(sy-ey), 2) ); } // Call on a set of paths nodes that express lines $.fn.animateLines = function (duration) { if (duration == null) duration = 3000; var uid = 'animateLinesTrigger' + new Date().getTime().toString(); var common = this.eq(0).closest('svg'); var totalDistance = 0; // first pass calculates all the distances and prepares animations this.each(function () { var path = $(this); var d = path.attr('d').match(/[-0-9.]+/g); var s = { x: parseFloat(d[0]), y: parseFloat(d[1]) }, e = { x: parseFloat(d[2]), y: parseFloat(d[3]) }; var distance = calculateDistance(s, e); totalDistance += distance; path.attr('d', 'M'+s.x+' '+s.y+'L'+s.x+' '+sy); path.data(uid+'Distance', distance); path.data(uid, function (segmentDuration) { common.queue(function (nextInQueue) { path.animate({ segmentProgress: 1 }, { step: function (now, fx) { var x = sx + (ex-sx)*now; var y = sy + (ey-sy)*now; path.attr('d', 'M'+s.x+' '+s.y+'L'+x+' '+y); }, complete: function () { nextInQueue(); }, duration: segmentDuration, ease: 'linear' }); }); }); }); // second pass triggers all the animation queueing this.each(function () { var distance = $(this).data(uid + 'Distance'); ($(this).data(uid))(Math.floor(duration * distance/totalDistance)); $(this).data(uid, null); }); return this; }; })(jQuery); // $('path[stroke=#000000]').hide(); $('path[stroke=red]').animateLines();
The following is an example of a VML generated booklet:
<lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M268 296L157 212 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M157 212L220 201 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M220 201L325 177 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M325 177L540 314 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M540 314L524 209 "></lvml:path><lvml:stroke class=lvml opacity="0.2" endcap="round" weight="3px" color="#000000"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M268 296L157 212 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M157 212L220 201 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M220 201L325 177 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape><lvml:shape class="lvml leaflet-vml-shape leaflet-clickable" coordsize="1 1" filled="false"><lvml:path class=lvml v="M325 177L414 234 "></lvml:path><lvml:stroke class=lvml opacity="0.8" endcap="round" weight="3px" color="red"></lvml:stroke></lvml:shape>
Source code is on jsfiddle
codecowboy
source share