{"id":709,"date":"2015-02-03T16:02:19","date_gmt":"2015-02-03T23:02:19","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=709"},"modified":"2015-02-03T16:02:19","modified_gmt":"2015-02-03T23:02:19","slug":"use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2015\/02\/03\/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map\/","title":{"rendered":"Use the amazing D3 library to animate a path on a Leaflet map"},"content":{"rendered":"<h3>Introduction: Animate a path with D3<\/h3>\n<p>Viewing location data that varies through time on a static map is fun, but viewing it on an animated map is a lot more fun. Recently, online map lovers were excited by Chris Whong\u2019s <a href=\"http:\/\/nyctaxi.herokuapp.com\/\">Day in the Life of a NYC Taxi<\/a> map in which he used D3 to animate taxi paths on a Leaflet map. Fortunately for developers, Chris was generous with his time and code. He described the approach he used in a two-part <a href=\"http:\/\/chriswhong.com\/data-visualization\/taxitechblog1\/\">techblog<\/a>. Using code snippets from Chris, <a href=\"http:\/\/bl.ocks.org\/mbostock\/1705868\">Mike Bostock<\/a> (D3\u2032s creator), <a href=\"http:\/\/bl.ocks.org\/d3noob\/9267535\">d3noob<\/a> as well as others, we break down the process of creating an animated path in Leaflet with D3.<\/p>\n<p><em><strong>Here is what the finished product looks like:<\/strong><\/em><br \/>\n<iframe loading=\"lazy\" width=\"640\" height=\"200\" src=\"http:\/\/bl.ocks.org\/zross\/raw\/6a31f4ef9e778d94c204\/\"><\/iframe><\/p>\n<h3>1) The data: great coffee to great beer<\/h3>\n<p>We\u2019re using a GeoJSON file of waypoints in the path from Gimme!, the great (and Ithaca-born) coffee shop to the source for rare and unusual beers, Proletariat.<\/p>\n<p><a href=\"http:\/\/zevross.com\/blog\/wp-content\/uploads\/2014\/09\/gimmetoprol.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-857\" src=\"http:\/\/zevross.com\/blog\/wp-content\/uploads\/2014\/09\/gimmetoprol.jpg\" alt=\"gimmetoprol\" width=\"832\" height=\"268\" \/><\/a><\/p>\n<p>The data was created using a combination of Google Directions, Node.js and QGIS as described in our <a href=\"http:\/\/zevross.com\/blog\/2014\/09\/23\/convert-google-directions-to-geojson-points-or-polylines\/\">previous post<\/a>. But the file is a standard GeoJSON file of points so you can create your own file using simpler options (try, for example, <a href=\"http:\/\/geojson.io\/\">geojson.io<\/a>). The first bit of data looks like this (this data can be downloaded from <a href=\"https:\/\/gist.githubusercontent.com\/zross\/6a31f4ef9e778d94c204\/raw\/0fc66e1d8a6fe00e0a37790fe62e8c3c8a76fd8b\/points.geojson\">GitHub<\/a>):<\/p>\n<pre><code class=\" hljs json\">{\n\"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"FeatureCollection\"<\/span><\/span>,\n\"<span class=\"hljs-attribute\">crs<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"name\"<\/span><\/span>, \"<span class=\"hljs-attribute\">properties<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">name<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"urn:ogc:def:crs:OGC:1.3:CRS84\"<\/span> <\/span>} <\/span>}<\/span>,\n\n\"<span class=\"hljs-attribute\">features<\/span>\": <span class=\"hljs-value\">[\n{ \"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"Feature\"<\/span><\/span>, \"<span class=\"hljs-attribute\">properties<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">latitude<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-number\">40.722390<\/span><\/span>, \"<span class=\"hljs-attribute\">longitude<\/span>\": <span class=\"hljs-value\">-<span class=\"hljs-number\">73.995170<\/span><\/span>, \"<span class=\"hljs-attribute\">time<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-number\">1<\/span><\/span>, \"<span class=\"hljs-attribute\">id<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"route1\"<\/span><\/span>, \"<span class=\"hljs-attribute\">name<\/span>\":<span class=\"hljs-value\"><span class=\"hljs-string\">\"Gimme\"<\/span> <\/span>}<\/span>, \"<span class=\"hljs-attribute\">geometry<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"Point\"<\/span><\/span>, \"<span class=\"hljs-attribute\">coordinates<\/span>\": <span class=\"hljs-value\">[ -<span class=\"hljs-number\">73.99517<\/span>, <span class=\"hljs-number\">40.72239<\/span> ] <\/span>} <\/span>},\n{ \"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"Feature\"<\/span><\/span>, \"<span class=\"hljs-attribute\">properties<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">latitude<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-number\">40.721580<\/span><\/span>, \"<span class=\"hljs-attribute\">longitude<\/span>\": <span class=\"hljs-value\">-<span class=\"hljs-number\">73.995480<\/span><\/span>, \"<span class=\"hljs-attribute\">time<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-number\">2<\/span><\/span>, \"<span class=\"hljs-attribute\">id<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"route1\"<\/span><\/span>, \"<span class=\"hljs-attribute\">name<\/span>\":<span class=\"hljs-value\"><span class=\"hljs-string\">\"Along route\"<\/span>  <\/span>}<\/span>, \"<span class=\"hljs-attribute\">geometry<\/span>\": <span class=\"hljs-value\">{ \"<span class=\"hljs-attribute\">type<\/span>\": <span class=\"hljs-value\"><span class=\"hljs-string\">\"Point\"<\/span><\/span>, \"<span class=\"hljs-attribute\">coordinates<\/span>\": <span class=\"hljs-value\">[ -<span class=\"hljs-number\">73.99548<\/span>, <span class=\"hljs-number\">40.72158<\/span> ] <\/span>} <\/span>}}<\/span><\/code><\/pre>\n<h3>2) Set the stage: create the basic map<\/h3>\n<p>We\u2019re not doing anything fancy here, simply creating a Leaflet map and we\u2019re using MapBox tiles. In the header we\u2019re providing CDN links to Leaflet, D3 and MapBox. The code for creating the map looks something like this:<\/p>\n<pre><code class=\" hljs xml\"><span class=\"hljs-doctype\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">meta<\/span> <span class=\"hljs-attribute\">charset<\/span>=<span class=\"hljs-value\">\"utf-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">link<\/span> <span class=\"hljs-attribute\">rel<\/span>=<span class=\"hljs-value\">\"stylesheet\"<\/span> <span class=\"hljs-attribute\">href<\/span>=<span class=\"hljs-value\">\"http:\/\/cdn.leafletjs.com\/leaflet-0.7\/leaflet.css\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">link<\/span> <span class=\"hljs-attribute\">href<\/span>=<span class=\"hljs-value\">'https:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.6.4\/mapbox.css'<\/span> <span class=\"hljs-attribute\">rel<\/span>=<span class=\"hljs-value\">'stylesheet'<\/span> \/&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">script<\/span> <span class=\"hljs-attribute\">src<\/span>=<span class=\"hljs-value\">\"http:\/\/d3js.org\/d3.v3.min.js\"<\/span> <span class=\"hljs-attribute\">type<\/span>=<span class=\"hljs-value\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">script<\/span> <span class=\"hljs-attribute\">src<\/span>=<span class=\"hljs-value\">\"http:\/\/cdn.leafletjs.com\/leaflet-0.7\/leaflet.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">script<\/span> <span class=\"hljs-attribute\">src<\/span>=<span class=\"hljs-value\">'https:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.6.4\/mapbox.js'<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">script<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">style<\/span>&gt;<\/span><span class=\"css\">\n    <span class=\"hljs-tag\">html<\/span>,\n    <span class=\"hljs-tag\">body<\/span> <span class=\"hljs-rules\">{\n        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100<\/span>%<\/span><\/span>;\n        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100<\/span>%<\/span><\/span>;\n    <span class=\"hljs-rule\">}<\/span><\/span>\n    <span class=\"hljs-tag\">body<\/span> <span class=\"hljs-rules\">{\n        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0<\/span><\/span><\/span>;\n    <span class=\"hljs-rule\">}<\/span><\/span>\n    <span class=\"hljs-id\">#map<\/span> <span class=\"hljs-rules\">{\n        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100<\/span>%<\/span><\/span>;\n        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height<\/span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100<\/span>%<\/span><\/span>;\n    <span class=\"hljs-rule\">}<\/span><\/span>\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div<\/span> <span class=\"hljs-attribute\">id<\/span>=<span class=\"hljs-value\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">script<\/span> <span class=\"hljs-attribute\">type<\/span>=<span class=\"hljs-value\">\"text\/javascript\"<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">var<\/span> mapboxTiles = L.tileLayer(<span class=\"hljs-string\">'https:\/\/{s}.tiles.mapbox.com\/v3\/examples.map-zr0njcqy\/{z}\/{x}\/{y}.png'<\/span>, {\n        attribution: <span class=\"hljs-string\">'&lt;a href=\"http:\/\/www.mapbox.com\/about\/maps\/\" target=\"_blank\"&gt;Terms &amp;amp; Feedback&lt;\/a&gt;'<\/span>\n    });\n\n    <span class=\"hljs-keyword\">var<\/span> map = L.map(<span class=\"hljs-string\">'map'<\/span>)\n        .addLayer(mapboxTiles)\n        .setView([<span class=\"hljs-number\">40.72332345541449<\/span>, -<span class=\"hljs-number\">73.99<\/span>], <span class=\"hljs-number\">15<\/span>);\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-title\">html<\/span>&gt;<\/span><\/code><\/pre>\n<h3>3) Prepare the container SVG elements<\/h3>\n<p>Normally with D3 we would be appending an SVG container to, say, the body (i.e.,<code>d3.select(\"body\").append(\"svg\")<\/code>). In this case we need to append to the map itself (specifically the <code>overlayPane<\/code>) and Leaflet has a handy function called <code>getPanes<\/code> to help us do this. As usual, we append a \u201cgrouping\u201d or <code>g<\/code> element to the SVG. In this case we need to add the class <code>leaflet-zoom-hide<\/code> otherwise we will see a phantom SVG when we zoom.<\/p>\n<pre><code class=\" hljs javascript\"><span class=\"hljs-keyword\">var<\/span> svg = d3.select(map.getPanes().overlayPane).append(<span class=\"hljs-string\">\"svg\"<\/span>);\n<span class=\"hljs-keyword\">var<\/span> g = svg.append(<span class=\"hljs-string\">\"g\"<\/span>).attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"leaflet-zoom-hide\"<\/span>);\n<\/code><\/pre>\n<h3>4) Use the D3 function <code>d3.json()<\/code> to read your data<\/h3>\n<p>Our data is conveniently in GeoJSON format so we can use d3.json() easily to read in our data. Note that this function is asynchronous so any bits of code that require the data will need to be included within this function.<\/p>\n<pre><code class=\"js hljs \">d3.json(<span class=\"hljs-string\">\"points.geojson\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(collection)<\/span> {<\/span>\n<span class=\"hljs-comment\">\/\/ Do stuff here<\/span>\n});<\/code><\/pre>\n<h3>5) Set up conversion and projection functions<\/h3>\n<p>Since SVG does not use the same coordinate system as a globe, the latitude and longitude coordinates will need to be transformed. There are two pieces of the code where we do this. The function that D3 uses to convert GeoJSON to path codes (<code>d3.geo.path()<\/code>) can include a projection function. In this case we\u2019re using what is called a \u201cstream transform\u201d in D3 combined with a function (<code>projectPoint<\/code>) that makes use of a Leaflet function (<code>latLngToLayerPoint<\/code>). These pieces are used here to create (and project) the <strong>line<\/strong> between our points and the bounding box coordinates.<\/p>\n<pre><code class=\"js hljs \"><span class=\"hljs-keyword\">var<\/span> transform = d3.geo.transform({\n    point: projectPoint\n});\n<span class=\"hljs-keyword\">var<\/span> d3path = d3.geo.path().projection(transform);\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">projectPoint<\/span><span class=\"hljs-params\">(x, y)<\/span> {<\/span>\n    <span class=\"hljs-keyword\">var<\/span> point = map.latLngToLayerPoint(<span class=\"hljs-keyword\">new<\/span> L.LatLng(y, x));\n    <span class=\"hljs-keyword\">this<\/span>.stream.point(point.x, point.y);\n} \n    });\n<\/code><\/pre>\n<p>We also need to a function to convert our points to a line (and project the points in the process). D3 has the function to create the line (d3.svg.line()) and we use a custom function to do the projection.<\/p>\n<pre><code class=\"js hljs \"><span class=\"hljs-keyword\">var<\/span> toLine = d3.svg.line()\n    .interpolate(<span class=\"hljs-string\">\"linear\"<\/span>)\n    .x(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n        <span class=\"hljs-keyword\">return<\/span> applyLatLngToLayer(d).x\n    })\n    .y(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n        <span class=\"hljs-keyword\">return<\/span> applyLatLngToLayer(d).y\n    });\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">applyLatLngToLayer<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n    <span class=\"hljs-keyword\">var<\/span> y = d.geometry.coordinates[<span class=\"hljs-number\">1<\/span>]\n    <span class=\"hljs-keyword\">var<\/span> x = d.geometry.coordinates[<span class=\"hljs-number\">0<\/span>]\n    <span class=\"hljs-keyword\">return<\/span> map.latLngToLayerPoint(<span class=\"hljs-keyword\">new<\/span> L.LatLng(y, x))\n}<\/code><\/pre>\n<h3>6) Create the points and lines we need<\/h3>\n<p>We have several elements we will be adding. These include the path itself (as a line), the yellow traveling circle, the points themselves (which we will use in a future post but for now are transparent), the red origin and destination points and the text. They all get added using a similar approach and one that is described in numerous other posts (<a href=\"http:\/\/bost.ocks.org\/mike\/circles\/\">here<\/a>is a simple one from Mike Bostock).<\/p>\n<pre><code class=\"js hljs \"><span class=\"hljs-comment\">\/\/ here is the line between points<\/span>\n<span class=\"hljs-keyword\">var<\/span> linePath = g.selectAll(<span class=\"hljs-string\">\".lineConnect\"<\/span>)\n    .data([featuresdata])\n    .enter()\n    .append(<span class=\"hljs-string\">\"path\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"lineConnect\"<\/span>);\n\n<span class=\"hljs-comment\">\/\/ This will be our traveling circle<\/span>\n<span class=\"hljs-keyword\">var<\/span> marker = g.append(<span class=\"hljs-string\">\"circle\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"r\"<\/span>, <span class=\"hljs-number\">10<\/span>)\n    .attr(<span class=\"hljs-string\">\"id\"<\/span>, <span class=\"hljs-string\">\"marker\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"travelMarker\"<\/span>);\n\n<span class=\"hljs-comment\">\/\/ if you want the actual points change opacity<\/span>\n<span class=\"hljs-keyword\">var<\/span> ptFeatures = g.selectAll(<span class=\"hljs-string\">\"circle\"<\/span>)\n    .data(featuresdata)\n    .enter()\n    .append(<span class=\"hljs-string\">\"circle\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"r\"<\/span>, <span class=\"hljs-number\">3<\/span>)\n    .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span>{<\/span>\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"waypoints \"<\/span> + <span class=\"hljs-string\">\"c\"<\/span> + d.properties.time\n    })      \n    .style(<span class=\"hljs-string\">\"opacity\"<\/span>, <span class=\"hljs-number\">0<\/span>);\n\n<span class=\"hljs-comment\">\/\/ I want the origin and destination to look different<\/span>\n<span class=\"hljs-keyword\">var<\/span> originANDdestination = [featuresdata[<span class=\"hljs-number\">0<\/span>], featuresdata[<span class=\"hljs-number\">17<\/span>]]\n\n<span class=\"hljs-keyword\">var<\/span> begend = g.selectAll(<span class=\"hljs-string\">\".drinks\"<\/span>)\n    .data(originANDdestination)\n    .enter()\n    .append(<span class=\"hljs-string\">\"circle\"<\/span>, <span class=\"hljs-string\">\".drinks\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"r\"<\/span>, <span class=\"hljs-number\">5<\/span>)\n    .style(<span class=\"hljs-string\">\"fill\"<\/span>, <span class=\"hljs-string\">\"red\"<\/span>)\n    .style(<span class=\"hljs-string\">\"opacity\"<\/span>, <span class=\"hljs-string\">\"1\"<\/span>);\n\n    <span class=\"hljs-comment\">\/\/ I want names for my coffee and beer<\/span>\n<span class=\"hljs-keyword\">var<\/span> text = g.selectAll(<span class=\"hljs-string\">\"text\"<\/span>)\n    .data(originANDdestination)\n    .enter()\n    .append(<span class=\"hljs-string\">\"text\"<\/span>)\n    .text(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n        <span class=\"hljs-keyword\">return<\/span> d.properties.name\n    })\n    .attr(<span class=\"hljs-string\">\"class\"<\/span>, <span class=\"hljs-string\">\"locnames\"<\/span>)\n    .attr(<span class=\"hljs-string\">\"y\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n        <span class=\"hljs-keyword\">return<\/span> -<span class=\"hljs-number\">10<\/span> <span class=\"hljs-comment\">\/\/I'm moving the text UP 10px<\/span>\n    })<\/code><\/pre>\n<h3>7) Add our items to the actual map (and account for zooming)<\/h3>\n<p>Using Leaflet\u2019s <a href=\"http:\/\/leafletjs.com\/reference.html#map-events\">viewreset<\/a> method and our <code>reset<\/code> function we can tell our app to re-compute the SVG coordinates and the coordinates of our map elements when the user repositions the map. We also run the reset function initially to put our SVG elements on the map.<\/p>\n<pre><code class=\"js hljs \">map.on(<span class=\"hljs-string\">\"viewreset\"<\/span>, reset);\n\n<span class=\"hljs-comment\">\/\/ this puts stuff on the map! <\/span>\nreset();<\/code><\/pre>\n<h3>8) The function to reset the SVG elements if the user repositions the map<\/h3>\n<p>For the point-related elements of our SVG we can use the <code>applyLatLngToLayer<\/code> function combined with the CSS t<code>ransform<\/code> property to convert latitude and longitude to the current map view coordinates. You\u2019ll note that for the SVG were adding 120 px to the width and height. This is because the bounds would otherwise perfectly fit our features and, as a result, your circles that represent points will get cut off.<\/p>\n<pre><code class=\" hljs javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">reset<\/span><span class=\"hljs-params\">()<\/span> {<\/span>\n    <span class=\"hljs-keyword\">var<\/span> bounds = d3path.bounds(collection),\n        topLeft = bounds[<span class=\"hljs-number\">0<\/span>],\n        bottomRight = bounds[<span class=\"hljs-number\">1<\/span>];\n\n\n    begend.attr(<span class=\"hljs-string\">\"transform\"<\/span>,\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(d)<\/span> {<\/span>\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">\"translate(\"<\/span> +\n                applyLatLngToLayer(d).x + <span class=\"hljs-string\">\",\"<\/span> +\n                applyLatLngToLayer(d).y + <span class=\"hljs-string\">\")\"<\/span>;\n        });\n\n    <span class=\"hljs-comment\">\/\/...do same thing to text, ptFeatures and marker...<\/span>\n    \n        });\n\n    svg.attr(<span class=\"hljs-string\">\"width\"<\/span>, bottomRight[<span class=\"hljs-number\">0<\/span>] - topLeft[<span class=\"hljs-number\">0<\/span>] + <span class=\"hljs-number\">120<\/span>)\n        .attr(<span class=\"hljs-string\">\"height\"<\/span>, bottomRight[<span class=\"hljs-number\">1<\/span>] - topLeft[<span class=\"hljs-number\">1<\/span>] + <span class=\"hljs-number\">120<\/span>)\n        .style(<span class=\"hljs-string\">\"left\"<\/span>, topLeft[<span class=\"hljs-number\">0<\/span>] - <span class=\"hljs-number\">50<\/span> + <span class=\"hljs-string\">\"px\"<\/span>)\n        .style(<span class=\"hljs-string\">\"top\"<\/span>, topLeft[<span class=\"hljs-number\">1<\/span>] - <span class=\"hljs-number\">50<\/span> + <span class=\"hljs-string\">\"px\"<\/span>);\n\n\n    linePath.attr(<span class=\"hljs-string\">\"d\"<\/span>, toLine)\n    g.attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(\"<\/span> + (-topLeft[<span class=\"hljs-number\">0<\/span>] + <span class=\"hljs-number\">50<\/span>) + <span class=\"hljs-string\">\",\"<\/span> + (-topLeft[<span class=\"hljs-number\">1<\/span>] + <span class=\"hljs-number\">50<\/span>) + <span class=\"hljs-string\">\")\"<\/span>);\n\n\n} <span class=\"hljs-comment\">\/\/ end reset<\/span><\/code><\/pre>\n<h3>9) The animation special sauce: two functions that do the D3 magic<\/h3>\n<p>We are using a D3 <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Transitions\">transition<\/a> to create the effect of a smooth line between points and the transition makes use of a function called <code>tweenDash<\/code>. This is a very clever approach to animating the path and I think Mike Bostock was the one to first show <a href=\"https:\/\/gist.github.com\/mbostock\/5649592\">the example<\/a>. <strong>The basic idea is this:<\/strong> SVG has a style property called <a href=\"http:\/\/www.w3.org\/TR\/SVG\/painting.html#StrokeProperties\">stroke-dasharray<\/a> which can be used to specify lengths of the alternating dashes and gaps that make up a line. So if you specify \u201c5,5\u201d you would have a line 5px long and then a gap 5px long and this pattern would be repeated. But what if you had an overall line\/path that is 100px long and you specify \u201c0,100\u201d? You would have no line and a gap of 100px meaning \u2014 no line! How about if you specified an array of \u201c1,100\u201d? This would give you a line 1px long and a gap of 100px \u2014 since your line is only 100px long, though, in practice this would yield a gap of 99px. Then you can use \u201c2,100\u201d, \u201c3,100\u201d and so on to smoothly fill in the line. This is the idea behind these functions.<\/p>\n<p>The <code>transition<\/code> function adds a transition to our path (<code>linePath<\/code>) and the transition is being applied to the <code>stroke-dasharray<\/code> style. The stoke-gap numbers (e.g, \u201c3,100\u201d) are being fed in from our <code>tweenDash<\/code> function.<\/p>\n<pre><code class=\" hljs javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">transition<\/span><span class=\"hljs-params\">(path)<\/span> {<\/span>\n    linePath.transition()\n        .duration(<span class=\"hljs-number\">7500<\/span>)\n        .attrTween(<span class=\"hljs-string\">\"stroke-dasharray\"<\/span>, tweenDash)\n        .each(<span class=\"hljs-string\">\"end\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">()<\/span> {<\/span>\n            d3.select(<span class=\"hljs-keyword\">this<\/span>).call(transition);<span class=\"hljs-comment\">\/\/ infinite loop<\/span>\n            ptFeatures.style(<span class=\"hljs-string\">\"opacity\"<\/span>, <span class=\"hljs-number\">0<\/span>)\n        }); \n\n\n} <\/code><\/pre>\n<pre><code class=\" hljs javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">tweenDash<\/span><span class=\"hljs-params\">()<\/span> {<\/span>\n\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(t)<\/span> {<\/span>\n        <span class=\"hljs-comment\">\/\/ In original version of this post the next two lines of JS were<\/span>\n        <span class=\"hljs-comment\">\/\/ outside this return which led to odd behavior on zoom<\/span>\n        <span class=\"hljs-comment\">\/\/ Thanks to Martin Raifer for the suggested fix.<\/span>\n\n        <span class=\"hljs-comment\">\/\/total length of path (single value)<\/span>\n        <span class=\"hljs-keyword\">var<\/span> l = linePath.node().getTotalLength(); \n        interpolate = d3.interpolateString(<span class=\"hljs-string\">\"0,\"<\/span> + l, l + <span class=\"hljs-string\">\",\"<\/span> + l); \n\n        <span class=\"hljs-comment\">\/\/t is fraction of time 0-1 since transition began<\/span>\n        <span class=\"hljs-keyword\">var<\/span> marker = d3.select(<span class=\"hljs-string\">\"#marker\"<\/span>);\n        \n        <span class=\"hljs-comment\">\/\/ p is the point on the line (coordinates) at a given length<\/span>\n        <span class=\"hljs-comment\">\/\/ along the line. In this case if l=50 and we're midway through<\/span>\n        <span class=\"hljs-comment\">\/\/ the time then this would 25.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> p = linePath.node().getPointAtLength(t * l);\n\n        <span class=\"hljs-comment\">\/\/Move the marker to that point<\/span>\n        marker.attr(<span class=\"hljs-string\">\"transform\"<\/span>, <span class=\"hljs-string\">\"translate(\"<\/span> + p.x + <span class=\"hljs-string\">\",\"<\/span> + p.y + <span class=\"hljs-string\">\")\"<\/span>); <span class=\"hljs-comment\">\/\/move marker<\/span>\n        <span class=\"hljs-keyword\">return<\/span> interpolate(t);\n    }\n}<\/code><\/pre>\n<h3>And you\u2019re done. One small issue.<\/h3>\n<p><del datetime=\"2014-12-08T15:07:25+00:00\">In the sample code I run the <code>transition<\/code> function from within the <code>reset<\/code> function. As a result, each time the user zooms the path resets. I would prefer to have the path continue if the user zooms and I thought that taking transition out of the reset function would work. But if you try zooming mysterious things happen. See the maps below. If you have a solution to the zooming issue, please let me know.<\/del><\/p>\n<p>It is lovely when someone, out of the blue, suggests a code fix. I want to thank <a href=\"https:\/\/twitter.com\/tyr_asd\">Martin Raifer<\/a> for his fix to this issue. The fix involved simply taking two lines of JS code in the tweenDash() function and moving them into the return as noted in the code snippet above.<\/p>\n<p><em><strong>Final map:<\/strong><\/em><br \/>\nThe Gist for this one is <a href=\"http:\/\/bl.ocks.org\/zross\/6a31f4ef9e778d94c204\">here<\/a>.<br \/>\n<iframe loading=\"lazy\" width=\"640\" height=\"300\" src=\"http:\/\/bl.ocks.org\/zross\/raw\/6a31f4ef9e778d94c204\/\"><\/iframe><\/p>\n<h3>This is the final code from GitHub.<\/h3>\n<div id=\"gist14753053\" class=\"gist\">\n<div class=\"gist-file\">\n<div class=\"gist-data gist-syntax\">\n<div class=\"file-data\">\n<table class=\"lines highlight\" style=\"height: 6243px;\" width=\"5378\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\"><span id=\"file-index-html-L1\" class=\"line-number\">1<\/span><span id=\"file-index-html-L12\" class=\"line-number\">12<\/span><span id=\"file-index-html-L13\" class=\"line-number\">13<\/span><span id=\"file-index-html-L14\" class=\"line-number\">14<\/span><span id=\"file-index-html-L15\" class=\"line-number\">15<\/span><span id=\"file-index-html-L16\" class=\"line-number\">16<\/span><span id=\"file-index-html-L17\" class=\"line-number\">17<\/span><span id=\"file-index-html-L18\" class=\"line-number\">18<\/span><span id=\"file-index-html-L19\" class=\"line-number\">19<\/span><span id=\"file-index-html-L20\" class=\"line-number\">20<\/span><span id=\"file-index-html-L21\" class=\"line-number\">21<\/span><span id=\"file-index-html-L22\" class=\"line-number\">22<\/span><span id=\"file-index-html-L23\" class=\"line-number\">23<\/span><span id=\"file-index-html-L24\" class=\"line-number\">24<\/span><span id=\"file-index-html-L25\" class=\"line-number\">25<\/span><span id=\"file-index-html-L26\" class=\"line-number\">26<\/span><span id=\"file-index-html-L27\" class=\"line-number\">27<\/span><span id=\"file-index-html-L28\" class=\"line-number\">28<\/span><span id=\"file-index-html-L29\" class=\"line-number\">29<\/span><span id=\"file-index-html-L30\" class=\"line-number\">30<\/span><span id=\"file-index-html-L31\" class=\"line-number\">31<\/span><span id=\"file-index-html-L32\" class=\"line-number\">32<\/span><span id=\"file-index-html-L33\" class=\"line-number\">33<\/span><span id=\"file-index-html-L34\" class=\"line-number\">34<\/span><span id=\"file-index-html-L35\" class=\"line-number\">35<\/span><span id=\"file-index-html-L36\" class=\"line-number\">36<\/span><span id=\"file-index-html-L37\" class=\"line-number\">37<\/span><span id=\"file-index-html-L38\" class=\"line-number\">38<\/span><span id=\"file-index-html-L39\" class=\"line-number\">39<\/span><span id=\"file-index-html-L40\" class=\"line-number\">40<\/span><span id=\"file-index-html-L41\" class=\"line-number\">41<\/span><span id=\"file-index-html-L42\" class=\"line-number\">42<\/span><span id=\"file-index-html-L43\" class=\"line-number\">43<\/span><span id=\"file-index-html-L44\" class=\"line-number\">44<\/span><span id=\"file-index-html-L45\" class=\"line-number\">45<\/span><span id=\"file-index-html-L46\" class=\"line-number\">46<\/span><span id=\"file-index-html-L47\" class=\"line-number\">47<\/span><span id=\"file-index-html-L48\" class=\"line-number\">48<\/span><span id=\"file-index-html-L49\" class=\"line-number\">49<\/span><span id=\"file-index-html-L50\" class=\"line-number\">50<\/span><span id=\"file-index-html-L51\" class=\"line-number\">51<\/span><span id=\"file-index-html-L52\" class=\"line-number\">52<\/span><span id=\"file-index-html-L53\" class=\"line-number\">53<\/span><span id=\"file-index-html-L54\" class=\"line-number\">54<\/span><span id=\"file-index-html-L55\" class=\"line-number\">55<\/span><span id=\"file-index-html-L56\" class=\"line-number\">56<\/span><span id=\"file-index-html-L57\" class=\"line-number\">57<\/span><span id=\"file-index-html-L58\" class=\"line-number\">58<\/span><span id=\"file-index-html-L59\" class=\"line-number\">59<\/span><span id=\"file-index-html-L60\" class=\"line-number\">60<\/span><span id=\"file-index-html-L61\" class=\"line-number\">61<\/span><span id=\"file-index-html-L62\" class=\"line-number\">62<\/span><span id=\"file-index-html-L63\" class=\"line-number\">63<\/span><span id=\"file-index-html-L64\" class=\"line-number\">64<\/span><span id=\"file-index-html-L65\" class=\"line-number\">65<\/span><span id=\"file-index-html-L66\" class=\"line-number\">66<\/span><span id=\"file-index-html-L67\" class=\"line-number\">67<\/span><span id=\"file-index-html-L68\" class=\"line-number\">68<\/span><span id=\"file-index-html-L69\" class=\"line-number\">69<\/span><span id=\"file-index-html-L70\" class=\"line-number\">70<\/span><span id=\"file-index-html-L71\" class=\"line-number\">71<\/span><span id=\"file-index-html-L72\" class=\"line-number\">72<\/span><span id=\"file-index-html-L73\" class=\"line-number\">73<\/span><span id=\"file-index-html-L74\" class=\"line-number\">74<\/span><span id=\"file-index-html-L75\" class=\"line-number\">75<\/span><span id=\"file-index-html-L76\" class=\"line-number\">76<\/span><span id=\"file-index-html-L77\" class=\"line-number\">77<\/span><span id=\"file-index-html-L78\" class=\"line-number\">78<\/span><span id=\"file-index-html-L79\" class=\"line-number\">79<\/span><span id=\"file-index-html-L80\" class=\"line-number\">80<\/span><span id=\"file-index-html-L81\" class=\"line-number\">81<\/span><span id=\"file-index-html-L82\" class=\"line-number\">82<\/span><span id=\"file-index-html-L83\" class=\"line-number\">83<\/span><span id=\"file-index-html-L84\" class=\"line-number\">84<\/span><span id=\"file-index-html-L85\" class=\"line-number\">85<\/span><span id=\"file-index-html-L86\" class=\"line-number\">86<\/span><span id=\"file-index-html-L87\" class=\"line-number\">87<\/span><span id=\"file-index-html-L88\" class=\"line-number\">88<\/span><span id=\"file-index-html-L89\" class=\"line-number\">89<\/span><span id=\"file-index-html-L90\" class=\"line-number\">90<\/span><span id=\"file-index-html-L91\" class=\"line-number\">91<\/span><span id=\"file-index-html-L92\" class=\"line-number\">92<\/span><span id=\"file-index-html-L93\" class=\"line-number\">93<\/span><span id=\"file-index-html-L94\" class=\"line-number\">94<\/span><span id=\"file-index-html-L95\" class=\"line-number\">95<\/span><span id=\"file-index-html-L96\" class=\"line-number\">96<\/span><span id=\"file-index-html-L97\" class=\"line-number\">97<\/span><span id=\"file-index-html-L98\" class=\"line-number\">98<\/span><span id=\"file-index-html-L99\" class=\"line-number\">99<\/span><span id=\"file-index-html-L100\" class=\"line-number\">100<\/span><span id=\"file-index-html-L101\" class=\"line-number\">101<\/span><span id=\"file-index-html-L102\" class=\"line-number\">102<\/span><span id=\"file-index-html-L103\" class=\"line-number\">103<\/span><span id=\"file-index-html-L104\" class=\"line-number\">104<\/span><span id=\"file-index-html-L105\" class=\"line-number\">105<\/span><span id=\"file-index-html-L106\" class=\"line-number\">106<\/span><span id=\"file-index-html-L107\" class=\"line-number\">107<\/span><span id=\"file-index-html-L108\" class=\"line-number\">108<\/span><span id=\"file-index-html-L109\" class=\"line-number\">109<\/span><span id=\"file-index-html-L110\" class=\"line-number\">110<\/span><span id=\"file-index-html-L111\" class=\"line-number\">111<\/span><span id=\"file-index-html-L112\" class=\"line-number\">112<\/span><span id=\"file-index-html-L113\" class=\"line-number\">113<\/span><span id=\"file-index-html-L114\" class=\"line-number\">114<\/span><span id=\"file-index-html-L115\" class=\"line-number\">115<\/span><span id=\"file-index-html-L116\" class=\"line-number\">116<\/span><span id=\"file-index-html-L117\" class=\"line-number\">117<\/span><span id=\"file-index-html-L118\" class=\"line-number\">118<\/span><span id=\"file-index-html-L119\" class=\"line-number\">119<\/span><span id=\"file-index-html-L120\" class=\"line-number\">120<\/span><span id=\"file-index-html-L121\" class=\"line-number\">121<\/span><span id=\"file-index-html-L122\" class=\"line-number\">122<\/span><span id=\"file-index-html-L123\" class=\"line-number\">123<\/span><span id=\"file-index-html-L124\" class=\"line-number\">124<\/span><span id=\"file-index-html-L125\" class=\"line-number\">125<\/span><span id=\"file-index-html-L126\" class=\"line-number\">126<\/span><span id=\"file-index-html-L127\" class=\"line-number\">127<\/span><span id=\"file-index-html-L128\" class=\"line-number\">128<\/span><span id=\"file-index-html-L129\" class=\"line-number\">129<\/span><span id=\"file-index-html-L130\" class=\"line-number\">130<\/span><span id=\"file-index-html-L131\" class=\"line-number\">131<\/span><span id=\"file-index-html-L132\" class=\"line-number\">132<\/span><span id=\"file-index-html-L133\" class=\"line-number\">133<\/span><span id=\"file-index-html-L134\" class=\"line-number\">134<\/span><span id=\"file-index-html-L135\" class=\"line-number\">135<\/span><span id=\"file-index-html-L136\" class=\"line-number\">136<\/span><span id=\"file-index-html-L137\" class=\"line-number\">137<\/span><span id=\"file-index-html-L138\" class=\"line-number\">138<\/span><span id=\"file-index-html-L139\" class=\"line-number\">139<\/span><span id=\"file-index-html-L140\" class=\"line-number\">140<\/span><span id=\"file-index-html-L141\" class=\"line-number\">141<\/span><span id=\"file-index-html-L142\" class=\"line-number\">142<\/span><span id=\"file-index-html-L143\" class=\"line-number\">143<\/span><span id=\"file-index-html-L144\" class=\"line-number\">144<\/span><span id=\"file-index-html-L145\" class=\"line-number\">145<\/span><span id=\"file-index-html-L146\" class=\"line-number\">146<\/span><span id=\"file-index-html-L147\" class=\"line-number\">147<\/span><span id=\"file-index-html-L148\" class=\"line-number\">148<\/span><span id=\"file-index-html-L149\" class=\"line-number\">149<\/span><span id=\"file-index-html-L150\" class=\"line-number\">150<\/span><span id=\"file-index-html-L151\" class=\"line-number\">151<\/span><span id=\"file-index-html-L152\" class=\"line-number\">152<\/span><span id=\"file-index-html-L153\" class=\"line-number\">153<\/span><span id=\"file-index-html-L154\" class=\"line-number\">154<\/span><span id=\"file-index-html-L155\" class=\"line-number\">155<\/span><span id=\"file-index-html-L156\" class=\"line-number\">156<\/span><span id=\"file-index-html-L157\" class=\"line-number\">157<\/span><span id=\"file-index-html-L158\" class=\"line-number\">158<\/span><span id=\"file-index-html-L159\" class=\"line-number\">159<\/span><span id=\"file-index-html-L160\" class=\"line-number\">160<\/span><span id=\"file-index-html-L161\" class=\"line-number\">161<\/span><span id=\"file-index-html-L162\" class=\"line-number\">162<\/span><span id=\"file-index-html-L163\" class=\"line-number\">163<\/span><span id=\"file-index-html-L164\" class=\"line-number\">164<\/span><span id=\"file-index-html-L165\" class=\"line-number\">165<\/span><span id=\"file-index-html-L166\" class=\"line-number\">166<\/span><span id=\"file-index-html-L167\" class=\"line-number\">167<\/span><span id=\"file-index-html-L168\" class=\"line-number\">168<\/span><span id=\"file-index-html-L169\" class=\"line-number\">169<\/span><span id=\"file-index-html-L170\" class=\"line-number\">170<\/span><span id=\"file-index-html-L171\" class=\"line-number\">171<\/span><span id=\"file-index-html-L172\" class=\"line-number\">172<\/span><span id=\"file-index-html-L173\" class=\"line-number\">173<\/span><span id=\"file-index-html-L174\" class=\"line-number\">174<\/span><span id=\"file-index-html-L175\" class=\"line-number\">175<\/span><span id=\"file-index-html-L176\" class=\"line-number\">176<\/span><span id=\"file-index-html-L177\" class=\"line-number\">177<\/span><span id=\"file-index-html-L178\" class=\"line-number\">178<\/span><span id=\"file-index-html-L179\" class=\"line-number\">179<\/span><span id=\"file-index-html-L180\" class=\"line-number\">180<\/span><span id=\"file-index-html-L181\" class=\"line-number\">181<\/span><span id=\"file-index-html-L182\" class=\"line-number\">182<\/span><span id=\"file-index-html-L183\" class=\"line-number\">183<\/span><span id=\"file-index-html-L184\" class=\"line-number\">184<\/span><span id=\"file-index-html-L185\" class=\"line-number\">185<\/span><span id=\"file-index-html-L186\" class=\"line-number\">186<\/span><span id=\"file-index-html-L187\" class=\"line-number\">187<\/span><span id=\"file-index-html-L188\" class=\"line-number\">188<\/span><span id=\"file-index-html-L189\" class=\"line-number\">189<\/span><span id=\"file-index-html-L190\" class=\"line-number\">190<\/span><span id=\"file-index-html-L191\" class=\"line-number\">191<\/span><span id=\"file-index-html-L192\" class=\"line-number\">192<\/span><span id=\"file-index-html-L193\" class=\"line-number\">193<\/span><span id=\"file-index-html-L194\" class=\"line-number\">194<\/span><span id=\"file-index-html-L195\" class=\"line-number\">195<\/span><span id=\"file-index-html-L196\" class=\"line-number\">196<\/span><span id=\"file-index-html-L197\" class=\"line-number\">197<\/span><span id=\"file-index-html-L198\" class=\"line-number\">198<\/span><span id=\"file-index-html-L199\" class=\"line-number\">199<\/span><span id=\"file-index-html-L200\" class=\"line-number\">200<\/span><span id=\"file-index-html-L201\" class=\"line-number\">201<\/span><span id=\"file-index-html-L202\" class=\"line-number\">202<\/span><span id=\"file-index-html-L203\" class=\"line-number\">203<\/span><span id=\"file-index-html-L204\" class=\"line-number\">204<\/span><span id=\"file-index-html-L205\" class=\"line-number\">205<\/span><span id=\"file-index-html-L206\" class=\"line-number\">206<\/span><span id=\"file-index-html-L207\" class=\"line-number\">207<\/span><span id=\"file-index-html-L208\" class=\"line-number\">208<\/span><span id=\"file-index-html-L209\" class=\"line-number\">209<\/span><span id=\"file-index-html-L210\" class=\"line-number\">210<\/span><span id=\"file-index-html-L211\" class=\"line-number\">211<\/span><span id=\"file-index-html-L212\" class=\"line-number\">212<\/span><span id=\"file-index-html-L213\" class=\"line-number\">213<\/span><span id=\"file-index-html-L214\" class=\"line-number\">214<\/span><span id=\"file-index-html-L215\" class=\"line-number\">215<\/span><span id=\"file-index-html-L216\" class=\"line-number\">216<\/span><span id=\"file-index-html-L217\" class=\"line-number\">217<\/span><span id=\"file-index-html-L218\" class=\"line-number\">218<\/span><span id=\"file-index-html-L219\" class=\"line-number\">219<\/span><span id=\"file-index-html-L220\" class=\"line-number\">220<\/span><span id=\"file-index-html-L221\" class=\"line-number\">221<\/span><span id=\"file-index-html-L222\" class=\"line-number\">222<\/span><span id=\"file-index-html-L223\" class=\"line-number\">223<\/span><span id=\"file-index-html-L224\" class=\"line-number\">224<\/span><span id=\"file-index-html-L225\" class=\"line-number\">225<\/span><span id=\"file-index-html-L226\" class=\"line-number\">226<\/span><span id=\"file-index-html-L227\" class=\"line-number\">227<\/span><span id=\"file-index-html-L228\" class=\"line-number\">228<\/span><span id=\"file-index-html-L229\" class=\"line-number\">229<\/span><span id=\"file-index-html-L230\" class=\"line-number\">230<\/span><span id=\"file-index-html-L231\" class=\"line-number\">231<\/span><span id=\"file-index-html-L232\" class=\"line-number\">232<\/span><span id=\"file-index-html-L233\" class=\"line-number\">233<\/span><span id=\"file-index-html-L234\" class=\"line-number\">234<\/span><span id=\"file-index-html-L235\" class=\"line-number\">235<\/span><span id=\"file-index-html-L236\" class=\"line-number\">236<\/span><span id=\"file-index-html-L237\" class=\"line-number\">237<\/span><span id=\"file-index-html-L238\" class=\"line-number\">238<\/span><span id=\"file-index-html-L239\" class=\"line-number\">239<\/span><span id=\"file-index-html-L240\" class=\"line-number\">240<\/span><span id=\"file-index-html-L241\" class=\"line-number\">241<\/span><span id=\"file-index-html-L242\" class=\"line-number\">242<\/span><span id=\"file-index-html-L243\" class=\"line-number\">243<\/span><span id=\"file-index-html-L244\" class=\"line-number\">244<\/span><span id=\"file-index-html-L245\" class=\"line-number\">245<\/span><span id=\"file-index-html-L246\" class=\"line-number\">246<\/span><span id=\"file-index-html-L247\" class=\"line-number\">247<\/span><span id=\"file-index-html-L248\" class=\"line-number\">248<\/span><span id=\"file-index-html-L249\" class=\"line-number\">249<\/span><span id=\"file-index-html-L250\" class=\"line-number\">250<\/span><span id=\"file-index-html-L251\" class=\"line-number\">251<\/span><span id=\"file-index-html-L252\" class=\"line-number\">252<\/span><span id=\"file-index-html-L253\" class=\"line-number\">253<\/span><span id=\"file-index-html-L254\" class=\"line-number\">254<\/span><span id=\"file-index-html-L255\" class=\"line-number\">255<\/span><span id=\"file-index-html-L256\" class=\"line-number\">256<\/span><span id=\"file-index-html-L257\" class=\"line-number\">257<\/span><span id=\"file-index-html-L258\" class=\"line-number\">258<\/span><span id=\"file-index-html-L259\" class=\"line-number\">259<\/span><span id=\"file-index-html-L260\" class=\"line-number\">260<\/span><span id=\"file-index-html-L261\" class=\"line-number\">261<\/span><span id=\"file-index-html-L262\" class=\"line-number\">262<\/span><span id=\"file-index-html-L263\" class=\"line-number\">263<\/span><span id=\"file-index-html-L264\" class=\"line-number\">264<\/span><span id=\"file-index-html-L265\" class=\"line-number\">265<\/span><span id=\"file-index-html-L266\" class=\"line-number\">266<\/span><span id=\"file-index-html-L267\" class=\"line-number\">267<\/span><span id=\"file-index-html-L268\" class=\"line-number\">268<\/span><span id=\"file-index-html-L269\" class=\"line-number\">269<\/span><span id=\"file-index-html-L270\" class=\"line-number\">270<\/span><span id=\"file-index-html-L271\" class=\"line-number\">271<\/span><span id=\"file-index-html-L272\" class=\"line-number\">272<\/span><span id=\"file-index-html-L273\" class=\"line-number\">273<\/span><span id=\"file-index-html-L274\" class=\"line-number\">274<\/span><span id=\"file-index-html-L275\" class=\"line-number\">275<\/span><span id=\"file-index-html-L276\" class=\"line-number\">276<\/span><span id=\"file-index-html-L277\" class=\"line-number\">277<\/span><span id=\"file-index-html-L278\" class=\"line-number\">278<\/span><span id=\"file-index-html-L279\" class=\"line-number\">279<\/span><span id=\"file-index-html-L280\" class=\"line-number\">280<\/span><span id=\"file-index-html-L281\" class=\"line-number\">281<\/span><span id=\"file-index-html-L282\" class=\"line-number\">282<\/span><span id=\"file-index-html-L283\" class=\"line-number\">283<\/span><span id=\"file-index-html-L284\" class=\"line-number\">284<\/span><span id=\"file-index-html-L285\" class=\"line-number\">285<\/span><span id=\"file-index-html-L286\" class=\"line-number\">286<\/span><span id=\"file-index-html-L287\" class=\"line-number\">287<\/span><span id=\"file-index-html-L288\" class=\"line-number\">288<\/span><span id=\"file-index-html-L289\" class=\"line-number\">289<\/span><span id=\"file-index-html-L290\" class=\"line-number\">290<\/span><span id=\"file-index-html-L291\" class=\"line-number\">291<\/span><span id=\"file-index-html-L292\" class=\"line-number\">292<\/span><span id=\"file-index-html-L293\" class=\"line-number\">293<\/span><span id=\"file-index-html-L294\" class=\"line-number\">294<\/span><span id=\"file-index-html-L295\" class=\"line-number\">295<\/span><span id=\"file-index-html-L296\" class=\"line-number\">296<\/span><span id=\"file-index-html-L297\" class=\"line-number\">297<\/span><span id=\"file-index-html-L298\" class=\"line-number\">298<\/span><span id=\"file-index-html-L299\" class=\"line-number\">299<\/span><span id=\"file-index-html-L300\" class=\"line-number\">300<\/span><span id=\"file-index-html-L301\" class=\"line-number\">301<\/span><span id=\"file-index-html-L302\" class=\"line-number\">302<\/span><span id=\"file-index-html-L303\" class=\"line-number\">303<\/span><span id=\"file-index-html-L304\" class=\"line-number\">304<\/span><span id=\"file-index-html-L305\" class=\"line-number\">305<\/span><span id=\"file-index-html-L306\" class=\"line-number\">306<\/span><span id=\"file-index-html-L307\" class=\"line-number\">307<\/span><span id=\"file-index-html-L308\" class=\"line-number\">308<\/span><span id=\"file-index-html-L309\" class=\"line-number\">309<\/span><span id=\"file-index-html-L310\" class=\"line-number\">310<\/span><span id=\"file-index-html-L311\" class=\"line-number\">311<\/span><span id=\"file-index-html-L312\" class=\"line-number\">312<\/span><span id=\"file-index-html-L313\" class=\"line-number\">313<\/span><span id=\"file-index-html-L314\" class=\"line-number\">314<\/span><span id=\"file-index-html-L315\" class=\"line-number\">315<\/span><span id=\"file-index-html-L316\" class=\"line-number\">316<\/span><span id=\"file-index-html-L317\" class=\"line-number\">317<\/span><span id=\"file-index-html-L318\" class=\"line-number\">318<\/span><span id=\"file-index-html-L319\" class=\"line-number\">319<\/span><span id=\"file-index-html-L320\" class=\"line-number\">320<\/span><span id=\"file-index-html-L321\" class=\"line-number\">321<\/span><span id=\"file-index-html-L322\" class=\"line-number\">322<\/span><span id=\"file-index-html-L323\" class=\"line-number\">323<\/span><span id=\"file-index-html-L324\" class=\"line-number\">324<\/span><span id=\"file-index-html-L325\" class=\"line-number\">325<\/span><span id=\"file-index-html-L326\" class=\"line-number\">326<\/span><span id=\"file-index-html-L327\" class=\"line-number\">327<\/span><span id=\"file-index-html-L328\" class=\"line-number\">328<\/span><span id=\"file-index-html-L329\" class=\"line-number\">329<\/span><span id=\"file-index-html-L330\" class=\"line-number\">330<\/span><span id=\"file-index-html-L331\" class=\"line-number\">331<\/span><span id=\"file-index-html-L332\" class=\"line-number\">332<\/span><span id=\"file-index-html-L333\" class=\"line-number\">333<\/span><span id=\"file-index-html-L334\" class=\"line-number\">334<\/span><span id=\"file-index-html-L335\" class=\"line-number\">335<\/span><span id=\"file-index-html-L336\" class=\"line-number\">336<\/span><span id=\"file-index-html-L337\" class=\"line-number\">337<\/span><span id=\"file-index-html-L338\" class=\"line-number\">338<\/span><span id=\"file-index-html-L339\" class=\"line-number\">339<\/span><span id=\"file-index-html-L340\" class=\"line-number\">340<\/span><span id=\"file-index-html-L341\" class=\"line-number\">341<\/span><span id=\"file-index-html-L342\" class=\"line-number\">342<\/span><span id=\"file-index-html-L343\" class=\"line-number\">343<\/span><span id=\"file-index-html-L344\" class=\"line-number\">344<\/span><\/td>\n<td class=\"line-data\">\n<div id=\"file-index-html-LC1\" class=\"line\">&lt;!DOCTYPE html&gt;<\/div>\n<div id=\"file-index-html-LC2\" class=\"line\">&lt;<span class=\"pl-ent\">html<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC3\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC4\" class=\"line\">&lt;<span class=\"pl-ent\">head<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC5\" class=\"line\">&lt;<span class=\"pl-ent\">meta<\/span> <span class=\"pl-e\">charset<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>utf-8<span class=\"pl-pds\">&#8220;<\/span><\/span> \/&gt;<\/div>\n<div id=\"file-index-html-LC6\" class=\"line\">&lt;<span class=\"pl-ent\">link<\/span> <span class=\"pl-e\">rel<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>stylesheet<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-e\">href<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>http:\/\/cdn.leafletjs.com\/leaflet-0.7\/leaflet.css<span class=\"pl-pds\">&#8220;<\/span><\/span> \/&gt;<\/div>\n<div id=\"file-index-html-LC7\" class=\"line\"><span class=\"pl-s2\"> &lt;<span class=\"pl-ent\">script<\/span> <span class=\"pl-e\">src<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>http:\/\/d3js.org\/d3.v3.min.js<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-e\">type<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>text\/javascript<span class=\"pl-pds\">&#8220;<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">script<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC8\" class=\"line\"><span class=\"pl-s2\"> &lt;<span class=\"pl-ent\">script<\/span> <span class=\"pl-e\">src<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>http:\/\/cdn.leafletjs.com\/leaflet-0.7\/leaflet.js<span class=\"pl-pds\">&#8220;<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">script<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC9\" class=\"line\"><span class=\"pl-s2\"> &lt;<span class=\"pl-ent\">script<\/span> <span class=\"pl-e\">src<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>https:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.6.4\/mapbox.js<span class=\"pl-pds\">&#8216;<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">script<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC10\" class=\"line\">&lt;<span class=\"pl-ent\">link<\/span> <span class=\"pl-e\">href<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>https:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.6.4\/mapbox.css<span class=\"pl-pds\">&#8216;<\/span><\/span> <span class=\"pl-e\">rel<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>stylesheet<span class=\"pl-pds\">&#8216;<\/span><\/span> \/&gt;<\/div>\n<div id=\"file-index-html-LC11\" class=\"line\"><span class=\"pl-s2\"> &lt;<span class=\"pl-ent\">style<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC12\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-ent\">html<\/span>,<\/span><\/div>\n<div id=\"file-index-html-LC13\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-ent\">body<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC14\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">height<\/span><\/span>: <span class=\"pl-c1\">100<span class=\"pl-k\">%<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC15\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">width<\/span><\/span>: <span class=\"pl-c1\">100<span class=\"pl-k\">%<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC16\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC17\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-ent\">body<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC18\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">margin<\/span><\/span>: <span class=\"pl-c1\">0<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC19\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC20\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-e\">#map<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC21\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">width<\/span><\/span>: <span class=\"pl-c1\">100<span class=\"pl-k\">%<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC22\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">height<\/span><\/span>: <span class=\"pl-c1\">100<span class=\"pl-k\">%<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC23\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC24\" class=\"line\"><span class=\"pl-s2\"> svg {<\/span><\/div>\n<div id=\"file-index-html-LC25\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">position<\/span><\/span>: <span class=\"pl-sc\">relative<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC26\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC27\" class=\"line\"><span class=\"pl-s2\"> path {<\/span><\/div>\n<div id=\"file-index-html-LC28\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">yellow<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC29\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\">stroke-<span class=\"pl-s3\">width<\/span><\/span>: <span class=\"pl-c1\">2<span class=\"pl-k\">px<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC30\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\">stroke<\/span>: <span class=\"pl-sc\">red<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC31\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\">stroke-<span class=\"pl-s3\">opacity<\/span><\/span>: <span class=\"pl-c1\">1<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC32\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC33\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-e\">.travelMarker<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC34\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">yellow<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC35\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">opacity<\/span><\/span>: <span class=\"pl-c1\">0.75<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC36\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC37\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-e\">.waypoints<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC38\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">black<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC39\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">opacity<\/span><\/span>: <span class=\"pl-c1\">0<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC40\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC41\" class=\"line\"><span class=\"pl-s2\">}<\/span><\/div>\n<div id=\"file-index-html-LC42\" class=\"line\"><span class=\"pl-s2\"><span class=\"pl-e\">.drinks<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC43\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\">stroke<\/span>: <span class=\"pl-sc\">black<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC44\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">red<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC45\" class=\"line\"><span class=\"pl-s2\">}<\/span><\/div>\n<div id=\"file-index-html-LC46\" class=\"line\"><span class=\"pl-s2\"><span class=\"pl-e\">.lineConnect<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC47\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">none<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC48\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\">stroke<\/span>: <span class=\"pl-sc\">black<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC49\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">opacity<\/span><\/span>: <span class=\"pl-c1\">1<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC50\" class=\"line\"><span class=\"pl-s2\">}<\/span><\/div>\n<div id=\"file-index-html-LC51\" class=\"line\"><span class=\"pl-s2\"><span class=\"pl-e\">.locnames<\/span> {<\/span><\/div>\n<div id=\"file-index-html-LC52\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">fill<\/span><\/span>: <span class=\"pl-sc\">black<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC53\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">text-shadow<\/span><\/span>: <span class=\"pl-c1\">1<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">1<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">1<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">#FFF<\/span>, <span class=\"pl-c1\">3<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">3<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">5<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">#000<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC54\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">font-weight<\/span><\/span>: <span class=\"pl-sc\">bold<\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC55\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-mp\"><span class=\"pl-s3\">font-size<\/span><\/span>: <span class=\"pl-c1\">13<span class=\"pl-k\">px<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC56\" class=\"line\"><span class=\"pl-s2\">}<\/span><\/div>\n<div id=\"file-index-html-LC57\" class=\"line\"><span class=\"pl-s2\"> &lt;\/<span class=\"pl-ent\">style<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC58\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC59\" class=\"line\">&lt;\/<span class=\"pl-ent\">head<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC60\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC61\" class=\"line\">&lt;<span class=\"pl-ent\">body<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC62\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC63\" class=\"line\">&lt;<span class=\"pl-ent\">div<\/span> <span class=\"pl-e\">id<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>demo<span class=\"pl-pds\">&#8220;<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">div<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC64\" class=\"line\">&lt;<span class=\"pl-ent\">div<\/span> <span class=\"pl-e\">id<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>map<span class=\"pl-pds\">&#8220;<\/span><\/span>&gt;&lt;\/<span class=\"pl-ent\">div<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC65\" class=\"line\"><span class=\"pl-s2\"> &lt;<span class=\"pl-ent\">script<\/span> <span class=\"pl-e\">type<\/span>=<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>text\/javascript<span class=\"pl-pds\">&#8220;<\/span><\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC66\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> mapboxTiles <span class=\"pl-k\">=<\/span> L.tileLayer(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>https:\/\/{s}.tiles.mapbox.com\/v3\/examples.map-zr0njcqy\/{z}\/{x}\/{y}.png<span class=\"pl-pds\">&#8216;<\/span><\/span>, {<\/span><\/div>\n<div id=\"file-index-html-LC67\" class=\"line\"><span class=\"pl-s2\"> attribution<span class=\"pl-k\">:<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>&lt;a href=&#8221;http:\/\/www.mapbox.com\/about\/maps\/&#8221; target=&#8221;_blank&#8221;&gt;Terms &amp;amp; Feedback&lt;\/a&gt;<span class=\"pl-pds\">&#8216;<\/span><\/span><\/span><\/div>\n<div id=\"file-index-html-LC68\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC69\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC70\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC71\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> map <span class=\"pl-k\">=<\/span> L.map(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8216;<\/span>map<span class=\"pl-pds\">&#8216;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC72\" class=\"line\"><span class=\"pl-s2\"> .addLayer(mapboxTiles)<\/span><\/div>\n<div id=\"file-index-html-LC73\" class=\"line\"><span class=\"pl-s2\"> .setView([<span class=\"pl-c1\">40.72332345541449<\/span>, <span class=\"pl-k\">&#8211;<\/span><span class=\"pl-c1\">73.99<\/span>], <span class=\"pl-c1\">14<\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC74\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC75\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC76\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ we will be appending the SVG to the Leaflet map pane<\/span><\/span><\/div>\n<div id=\"file-index-html-LC77\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ g (group) element will be inside the svg <\/span><\/span><\/div>\n<div id=\"file-index-html-LC78\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> svg <span class=\"pl-k\">=<\/span> d3.<span class=\"pl-s3\">select<\/span>(map.getPanes().overlayPane).append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>svg<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC79\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC80\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ if you don&#8217;t include the leaflet-zoom-hide when a <\/span><\/span><\/div>\n<div id=\"file-index-html-LC81\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ user zooms in or out you will still see the phantom<\/span><\/span><\/div>\n<div id=\"file-index-html-LC82\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ original SVG <\/span><\/span><\/div>\n<div id=\"file-index-html-LC83\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> g <span class=\"pl-k\">=<\/span> svg.append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>g<span class=\"pl-pds\">&#8220;<\/span><\/span>).attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>class<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>leaflet-zoom-hide<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC84\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC85\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC86\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/read in the GeoJSON. This function is asynchronous so<\/span><\/span><\/div>\n<div id=\"file-index-html-LC87\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ anything that needs the json file should be within<\/span><\/span><\/div>\n<div id=\"file-index-html-LC88\" class=\"line\"><span class=\"pl-s2\"> d3.json(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>points.geojson<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">collection<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC89\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC90\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ this is not needed right now, but for future we may need<\/span><\/span><\/div>\n<div id=\"file-index-html-LC91\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ to implement some filtering. This uses the d3 filter function<\/span><\/span><\/div>\n<div id=\"file-index-html-LC92\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ featuresdata is an array of point objects<\/span><\/span><\/div>\n<div id=\"file-index-html-LC93\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC94\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> featuresdata <span class=\"pl-k\">=<\/span> collection.features.filter(<span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC95\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> d.properties.<span class=\"pl-sc\">id<\/span> <span class=\"pl-k\">==<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>route1<span class=\"pl-pds\">&#8220;<\/span><\/span><\/span><\/div>\n<div id=\"file-index-html-LC96\" class=\"line\"><span class=\"pl-s2\"> })<\/span><\/div>\n<div id=\"file-index-html-LC97\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC98\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/stream transform. transforms geometry before passing it to<\/span><\/span><\/div>\n<div id=\"file-index-html-LC99\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ listener. Can be used in conjunction with d3.geo.path<\/span><\/span><\/div>\n<div id=\"file-index-html-LC100\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ to implement the transform. <\/span><\/span><\/div>\n<div id=\"file-index-html-LC101\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC102\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> transform <span class=\"pl-k\">=<\/span> d3.geo.transform({<\/span><\/div>\n<div id=\"file-index-html-LC103\" class=\"line\"><span class=\"pl-s2\"> point<span class=\"pl-k\">:<\/span> projectPoint<\/span><\/div>\n<div id=\"file-index-html-LC104\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC105\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC106\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/d3.geo.path translates GeoJSON to SVG path codes.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC107\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/essentially a path generator. In this case it&#8217;s<\/span><\/span><\/div>\n<div id=\"file-index-html-LC108\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ a path generator referencing our custom &#8220;projection&#8221;<\/span><\/span><\/div>\n<div id=\"file-index-html-LC109\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ which is the Leaflet method latLngToLayerPoint inside<\/span><\/span><\/div>\n<div id=\"file-index-html-LC110\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ our function called projectPoint<\/span><\/span><\/div>\n<div id=\"file-index-html-LC111\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> d3path <span class=\"pl-k\">=<\/span> d3.geo.path().projection(transform);<\/span><\/div>\n<div id=\"file-index-html-LC112\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC113\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC114\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Here we&#8217;re creating a FUNCTION to generate a line<\/span><\/span><\/div>\n<div id=\"file-index-html-LC115\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ from input points. Since input points will be in <\/span><\/span><\/div>\n<div id=\"file-index-html-LC116\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Lat\/Long they need to be converted to map units<\/span><\/span><\/div>\n<div id=\"file-index-html-LC117\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ with applyLatLngToLayer<\/span><\/span><\/div>\n<div id=\"file-index-html-LC118\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> toLine <span class=\"pl-k\">=<\/span> d3.svg.line()<\/span><\/div>\n<div id=\"file-index-html-LC119\" class=\"line\"><span class=\"pl-s2\"> .interpolate(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>linear<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC120\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">x<\/span>(<span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC121\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> applyLatLngToLayer(d).<span class=\"pl-sc\">x<\/span><\/span><\/div>\n<div id=\"file-index-html-LC122\" class=\"line\"><span class=\"pl-s2\"> })<\/span><\/div>\n<div id=\"file-index-html-LC123\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">y<\/span>(<span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC124\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> applyLatLngToLayer(d).<span class=\"pl-sc\">y<\/span><\/span><\/div>\n<div id=\"file-index-html-LC125\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC126\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC127\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC128\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ From now on we are essentially appending our features to the<\/span><\/span><\/div>\n<div id=\"file-index-html-LC129\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ group element. We&#8217;re adding a class with the line name<\/span><\/span><\/div>\n<div id=\"file-index-html-LC130\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ and we&#8217;re making them invisible<\/span><\/span><\/div>\n<div id=\"file-index-html-LC131\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC132\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ these are the points that make up the path<\/span><\/span><\/div>\n<div id=\"file-index-html-LC133\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ they are unnecessary so I&#8217;ve make them<\/span><\/span><\/div>\n<div id=\"file-index-html-LC134\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ transparent for now<\/span><\/span><\/div>\n<div id=\"file-index-html-LC135\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> ptFeatures <span class=\"pl-k\">=<\/span> g.selectAll(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>circle<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC136\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">data<\/span>(featuresdata)<\/span><\/div>\n<div id=\"file-index-html-LC137\" class=\"line\"><span class=\"pl-s2\"> .enter()<\/span><\/div>\n<div id=\"file-index-html-LC138\" class=\"line\"><span class=\"pl-s2\"> .append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>circle<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC139\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>r<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-c1\">3<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC140\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>class<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>waypoints<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC141\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC142\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Here we will make the points into a single<\/span><\/span><\/div>\n<div id=\"file-index-html-LC143\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ line\/path. Note that we surround the featuresdata<\/span><\/span><\/div>\n<div id=\"file-index-html-LC144\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ with [] to tell d3 to treat all the points as a<\/span><\/span><\/div>\n<div id=\"file-index-html-LC145\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ single line. For now these are basically points<\/span><\/span><\/div>\n<div id=\"file-index-html-LC146\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ but below we set the &#8220;d&#8221; attribute using the <\/span><\/span><\/div>\n<div id=\"file-index-html-LC147\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ line creator function from above.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC148\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> linePath <span class=\"pl-k\">=<\/span> g.selectAll(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>.lineConnect<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC149\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">data<\/span>([featuresdata])<\/span><\/div>\n<div id=\"file-index-html-LC150\" class=\"line\"><span class=\"pl-s2\"> .enter()<\/span><\/div>\n<div id=\"file-index-html-LC151\" class=\"line\"><span class=\"pl-s2\"> .append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>path<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC152\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>class<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>lineConnect<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC153\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC154\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ This will be our traveling circle it will<\/span><\/span><\/div>\n<div id=\"file-index-html-LC155\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ travel along our path<\/span><\/span><\/div>\n<div id=\"file-index-html-LC156\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> marker <span class=\"pl-k\">=<\/span> g.append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>circle<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC157\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>r<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-c1\">10<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC158\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>id<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>marker<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC159\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>class<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>travelMarker<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC160\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC161\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC162\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ For simplicity I hard-coded this! I&#8217;m taking<\/span><\/span><\/div>\n<div id=\"file-index-html-LC163\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the first and the last object (the origin)<\/span><\/span><\/div>\n<div id=\"file-index-html-LC164\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ and destination and adding them separately to<\/span><\/span><\/div>\n<div id=\"file-index-html-LC165\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ better style them. There is probably a better<\/span><\/span><\/div>\n<div id=\"file-index-html-LC166\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ way to do this!<\/span><\/span><\/div>\n<div id=\"file-index-html-LC167\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> originANDdestination <span class=\"pl-k\">=<\/span> [featuresdata[<span class=\"pl-c1\">0<\/span>], featuresdata[<span class=\"pl-c1\">17<\/span>]]<\/span><\/div>\n<div id=\"file-index-html-LC168\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC169\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> begend <span class=\"pl-k\">=<\/span> g.selectAll(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>.drinks<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC170\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">data<\/span>(originANDdestination)<\/span><\/div>\n<div id=\"file-index-html-LC171\" class=\"line\"><span class=\"pl-s2\"> .enter()<\/span><\/div>\n<div id=\"file-index-html-LC172\" class=\"line\"><span class=\"pl-s2\"> .append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>circle<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>.drinks<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC173\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>r<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-c1\">5<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC174\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">style<\/span>(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>fill<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>red<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC175\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">style<\/span>(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>opacity<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>1<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC176\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC177\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ I want names for my coffee and beer<\/span><\/span><\/div>\n<div id=\"file-index-html-LC178\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> text <span class=\"pl-k\">=<\/span> g.selectAll(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>text<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC179\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">data<\/span>(originANDdestination)<\/span><\/div>\n<div id=\"file-index-html-LC180\" class=\"line\"><span class=\"pl-s2\"> .enter()<\/span><\/div>\n<div id=\"file-index-html-LC181\" class=\"line\"><span class=\"pl-s2\"> .append(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>text<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC182\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">text<\/span>(<span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC183\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> d.properties.<span class=\"pl-sc\">name<\/span><\/span><\/div>\n<div id=\"file-index-html-LC184\" class=\"line\"><span class=\"pl-s2\"> })<\/span><\/div>\n<div id=\"file-index-html-LC185\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>class<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>locnames<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC186\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>y<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC187\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-k\">&#8211;<\/span><span class=\"pl-c1\">10<\/span><\/span><\/div>\n<div id=\"file-index-html-LC188\" class=\"line\"><span class=\"pl-s2\"> })<\/span><\/div>\n<div id=\"file-index-html-LC189\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC190\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC191\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ when the user zooms in or out you need to reset<\/span><\/span><\/div>\n<div id=\"file-index-html-LC192\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the view<\/span><\/span><\/div>\n<div id=\"file-index-html-LC193\" class=\"line\"><span class=\"pl-s2\"> map.on(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>viewreset<span class=\"pl-pds\">&#8220;<\/span><\/span>, reset);<\/span><\/div>\n<div id=\"file-index-html-LC194\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC195\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ this puts stuff on the map! <\/span><\/span><\/div>\n<div id=\"file-index-html-LC196\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s3\">reset<\/span>();<\/span><\/div>\n<div id=\"file-index-html-LC197\" class=\"line\"><span class=\"pl-s2\"> transition();<\/span><\/div>\n<div id=\"file-index-html-LC198\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC199\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Reposition the SVG to cover the features.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC200\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span> <span class=\"pl-en\">reset<\/span>() {<\/span><\/div>\n<div id=\"file-index-html-LC201\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> bounds <span class=\"pl-k\">=<\/span> d3path.bounds(collection),<\/span><\/div>\n<div id=\"file-index-html-LC202\" class=\"line\"><span class=\"pl-s2\"> topLeft <span class=\"pl-k\">=<\/span> bounds[<span class=\"pl-c1\">0<\/span>],<\/span><\/div>\n<div id=\"file-index-html-LC203\" class=\"line\"><span class=\"pl-s2\"> bottomRight <span class=\"pl-k\">=<\/span> bounds[<span class=\"pl-c1\">1<\/span>];<\/span><\/div>\n<div id=\"file-index-html-LC204\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC205\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC206\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ here you&#8217;re setting some styles, width, heigh etc<\/span><\/span><\/div>\n<div id=\"file-index-html-LC207\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ to the SVG. Note that we&#8217;re adding a little height and<\/span><\/span><\/div>\n<div id=\"file-index-html-LC208\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ width because otherwise the bounding box would perfectly<\/span><\/span><\/div>\n<div id=\"file-index-html-LC209\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ cover our features BUT&#8230; since you might be using a big<\/span><\/span><\/div>\n<div id=\"file-index-html-LC210\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ circle to represent a 1 dimensional point, the circle<\/span><\/span><\/div>\n<div id=\"file-index-html-LC211\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ might get cut off.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC212\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC213\" class=\"line\"><span class=\"pl-s2\"> text.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>,<\/span><\/div>\n<div id=\"file-index-html-LC214\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC215\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC216\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">x<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC217\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">y<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC218\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC219\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC220\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC221\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ for the points we need to convert from latlong<\/span><\/span><\/div>\n<div id=\"file-index-html-LC222\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ to map units<\/span><\/span><\/div>\n<div id=\"file-index-html-LC223\" class=\"line\"><span class=\"pl-s2\"> begend.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>,<\/span><\/div>\n<div id=\"file-index-html-LC224\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC225\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC226\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">x<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC227\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">y<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC228\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC229\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC230\" class=\"line\"><span class=\"pl-s2\"> ptFeatures.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>,<\/span><\/div>\n<div id=\"file-index-html-LC231\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC232\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC233\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">x<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC234\" class=\"line\"><span class=\"pl-s2\"> applyLatLngToLayer(d).<span class=\"pl-sc\">y<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC235\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC236\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC237\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ again, not best practice, but I&#8217;m harding coding<\/span><\/span><\/div>\n<div id=\"file-index-html-LC238\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the starting point<\/span><\/span><\/div>\n<div id=\"file-index-html-LC239\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC240\" class=\"line\"><span class=\"pl-s2\"> marker.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>,<\/span><\/div>\n<div id=\"file-index-html-LC241\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span>() {<\/span><\/div>\n<div id=\"file-index-html-LC242\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> y <span class=\"pl-k\">=<\/span> featuresdata[<span class=\"pl-c1\">0<\/span>].geometry.coordinates[<span class=\"pl-c1\">1<\/span>]<\/span><\/div>\n<div id=\"file-index-html-LC243\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> x <span class=\"pl-k\">=<\/span> featuresdata[<span class=\"pl-c1\">0<\/span>].geometry.coordinates[<span class=\"pl-c1\">0<\/span>]<\/span><\/div>\n<div id=\"file-index-html-LC244\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC245\" class=\"line\"><span class=\"pl-s2\"> map.latLngToLayerPoint(<span class=\"pl-k\">new<\/span> <span class=\"pl-en\">L.LatLng<\/span>(y, x)).<span class=\"pl-sc\">x<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span><\/span><\/div>\n<div id=\"file-index-html-LC246\" class=\"line\"><span class=\"pl-s2\"> map.latLngToLayerPoint(<span class=\"pl-k\">new<\/span> <span class=\"pl-en\">L.LatLng<\/span>(y, x)).<span class=\"pl-sc\">y<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>;<\/span><\/div>\n<div id=\"file-index-html-LC247\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC248\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC249\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC250\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Setting the size and location of the overall SVG container<\/span><\/span><\/div>\n<div id=\"file-index-html-LC251\" class=\"line\"><span class=\"pl-s2\"> svg.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>width<span class=\"pl-pds\">&#8220;<\/span><\/span>, bottomRight[<span class=\"pl-c1\">0<\/span>] <span class=\"pl-k\">&#8211;<\/span> topLeft[<span class=\"pl-c1\">0<\/span>] <span class=\"pl-k\">+<\/span> <span class=\"pl-c1\">120<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC252\" class=\"line\"><span class=\"pl-s2\"> .attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>height<span class=\"pl-pds\">&#8220;<\/span><\/span>, bottomRight[<span class=\"pl-c1\">1<\/span>] <span class=\"pl-k\">&#8211;<\/span> topLeft[<span class=\"pl-c1\">1<\/span>] <span class=\"pl-k\">+<\/span> <span class=\"pl-c1\">120<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC253\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">style<\/span>(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>left<span class=\"pl-pds\">&#8220;<\/span><\/span>, topLeft[<span class=\"pl-c1\">0<\/span>] <span class=\"pl-k\">&#8211;<\/span> <span class=\"pl-c1\">50<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>px<span class=\"pl-pds\">&#8220;<\/span><\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC254\" class=\"line\"><span class=\"pl-s2\"> .<span class=\"pl-sc\">style<\/span>(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>top<span class=\"pl-pds\">&#8220;<\/span><\/span>, topLeft[<span class=\"pl-c1\">1<\/span>] <span class=\"pl-k\">&#8211;<\/span> <span class=\"pl-c1\">50<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>px<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC255\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC256\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC257\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ linePath.attr(&#8220;d&#8221;, d3path);<\/span><\/span><\/div>\n<div id=\"file-index-html-LC258\" class=\"line\"><span class=\"pl-s2\"> linePath.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>d<span class=\"pl-pds\">&#8220;<\/span><\/span>, toLine)<\/span><\/div>\n<div id=\"file-index-html-LC259\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ ptPath.attr(&#8220;d&#8221;, d3path);<\/span><\/span><\/div>\n<div id=\"file-index-html-LC260\" class=\"line\"><span class=\"pl-s2\"> g.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> (<span class=\"pl-k\">&#8211;<\/span>topLeft[<span class=\"pl-c1\">0<\/span>] <span class=\"pl-k\">+<\/span> <span class=\"pl-c1\">50<\/span>) <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> (<span class=\"pl-k\">&#8211;<\/span>topLeft[<span class=\"pl-c1\">1<\/span>] <span class=\"pl-k\">+<\/span> <span class=\"pl-c1\">50<\/span>) <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC261\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC262\" class=\"line\"><span class=\"pl-s2\"> } <span class=\"pl-c\">\/\/ end reset<\/span><\/span><\/div>\n<div id=\"file-index-html-LC263\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC264\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the transition function could have been done above using<\/span><\/span><\/div>\n<div id=\"file-index-html-LC265\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ chaining but it&#8217;s cleaner to have a separate function.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC266\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the transition. Dash array expects &#8220;500, 30&#8221; where <\/span><\/span><\/div>\n<div id=\"file-index-html-LC267\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ 500 is the length of the &#8220;dash&#8221; 30 is the length of the<\/span><\/span><\/div>\n<div id=\"file-index-html-LC268\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ gap. So if you had a line that is 500 long and you used<\/span><\/span><\/div>\n<div id=\"file-index-html-LC269\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ &#8220;500, 0&#8221; you would have a solid line. If you had &#8220;500,500&#8221;<\/span><\/span><\/div>\n<div id=\"file-index-html-LC270\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ you would have a 500px line followed by a 500px gap. This<\/span><\/span><\/div>\n<div id=\"file-index-html-LC271\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ can be manipulated by starting with a complete gap &#8220;0,500&#8221;<\/span><\/span><\/div>\n<div id=\"file-index-html-LC272\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ then a small line &#8220;1,500&#8221; then bigger line &#8220;2,500&#8221; and so <\/span><\/span><\/div>\n<div id=\"file-index-html-LC273\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ on. The values themselves (&#8220;0,500&#8221;, &#8220;1,500&#8221; etc) are being<\/span><\/span><\/div>\n<div id=\"file-index-html-LC274\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ fed to the attrTween operator<\/span><\/span><\/div>\n<div id=\"file-index-html-LC275\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span> <span class=\"pl-en\">transition<\/span>() {<\/span><\/div>\n<div id=\"file-index-html-LC276\" class=\"line\"><span class=\"pl-s2\"> linePath.transition()<\/span><\/div>\n<div id=\"file-index-html-LC277\" class=\"line\"><span class=\"pl-s2\"> .duration(<span class=\"pl-c1\">7500<\/span>)<\/span><\/div>\n<div id=\"file-index-html-LC278\" class=\"line\"><span class=\"pl-s2\"> .attrTween(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>stroke-dasharray<span class=\"pl-pds\">&#8220;<\/span><\/span>, tweenDash)<\/span><\/div>\n<div id=\"file-index-html-LC279\" class=\"line\"><span class=\"pl-s2\"> .each(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>end<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-st\">function<\/span>() {<\/span><\/div>\n<div id=\"file-index-html-LC280\" class=\"line\"><span class=\"pl-s2\"> d3.<span class=\"pl-s3\">select<\/span>(<span class=\"pl-v\">this<\/span>).<span class=\"pl-s3\">call<\/span>(transition);<span class=\"pl-c\">\/\/ infinite loop<\/span><\/span><\/div>\n<div id=\"file-index-html-LC281\" class=\"line\"><span class=\"pl-s2\"> }); <\/span><\/div>\n<div id=\"file-index-html-LC282\" class=\"line\"><span class=\"pl-s2\"> } <span class=\"pl-c\">\/\/end transition<\/span><\/span><\/div>\n<div id=\"file-index-html-LC283\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC284\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ this function feeds the attrTween operator above with the <\/span><\/span><\/div>\n<div id=\"file-index-html-LC285\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ stroke and dash lengths<\/span><\/span><\/div>\n<div id=\"file-index-html-LC286\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span> <span class=\"pl-en\">tweenDash<\/span>() {<\/span><\/div>\n<div id=\"file-index-html-LC287\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> <span class=\"pl-st\">function<\/span>(<span class=\"pl-vpf\">t<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC288\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/total length of path (single value)<\/span><\/span><\/div>\n<div id=\"file-index-html-LC289\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> l <span class=\"pl-k\">=<\/span> linePath.node().getTotalLength(); <\/span><\/div>\n<div id=\"file-index-html-LC290\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC291\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ this is creating a function called interpolate which takes<\/span><\/span><\/div>\n<div id=\"file-index-html-LC292\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ as input a single value 0-1. The function will interpolate<\/span><\/span><\/div>\n<div id=\"file-index-html-LC293\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ between the numbers embedded in a string. An example might<\/span><\/span><\/div>\n<div id=\"file-index-html-LC294\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ be interpolatString(&#8220;0,500&#8221;, &#8220;500,500&#8221;) in which case<\/span><\/span><\/div>\n<div id=\"file-index-html-LC295\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the first number would interpolate through 0-500 and the<\/span><\/span><\/div>\n<div id=\"file-index-html-LC296\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ second number through 500-500 (always 500). So, then<\/span><\/span><\/div>\n<div id=\"file-index-html-LC297\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ if you used interpolate(0.5) you would get &#8220;250, 500&#8221;<\/span><\/span><\/div>\n<div id=\"file-index-html-LC298\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ when input into the attrTween above this means give me<\/span><\/span><\/div>\n<div id=\"file-index-html-LC299\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ a line of length 250 followed by a gap of 500. Since the<\/span><\/span><\/div>\n<div id=\"file-index-html-LC300\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ total line length, though is only 500 to begin with this<\/span><\/span><\/div>\n<div id=\"file-index-html-LC301\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ essentially says give me a line of 250px followed by a gap<\/span><\/span><\/div>\n<div id=\"file-index-html-LC302\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ of 250px.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC303\" class=\"line\"><span class=\"pl-s2\"> interpolate <span class=\"pl-k\">=<\/span> d3.interpolateString(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>0,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> l, l <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> l);<\/span><\/div>\n<div id=\"file-index-html-LC304\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/t is fraction of time 0-1 since transition began<\/span><\/span><\/div>\n<div id=\"file-index-html-LC305\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> marker <span class=\"pl-k\">=<\/span> d3.<span class=\"pl-s3\">select<\/span>(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>#marker<span class=\"pl-pds\">&#8220;<\/span><\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC306\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC307\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ p is the point on the line (coordinates) at a given length<\/span><\/span><\/div>\n<div id=\"file-index-html-LC308\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ along the line. In this case if l=50 and we&#8217;re midway through<\/span><\/span><\/div>\n<div id=\"file-index-html-LC309\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the time then this would 25.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC310\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> p <span class=\"pl-k\">=<\/span> linePath.node().getPointAtLength(t <span class=\"pl-k\">*<\/span> l);<\/span><\/div>\n<div id=\"file-index-html-LC311\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC312\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/Move the marker to that point<\/span><\/span><\/div>\n<div id=\"file-index-html-LC313\" class=\"line\"><span class=\"pl-s2\"> marker.attr(<span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>transform<span class=\"pl-pds\">&#8220;<\/span><\/span>, <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>translate(<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> p.<span class=\"pl-sc\">x<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>,<span class=\"pl-pds\">&#8220;<\/span><\/span> <span class=\"pl-k\">+<\/span> p.<span class=\"pl-sc\">y<\/span> <span class=\"pl-k\">+<\/span> <span class=\"pl-s1\"><span class=\"pl-pds\">&#8220;<\/span>)<span class=\"pl-pds\">&#8220;<\/span><\/span>); <span class=\"pl-c\">\/\/move marker<\/span><\/span><\/div>\n<div id=\"file-index-html-LC314\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-en\">console<\/span><span class=\"pl-s3\">.log<\/span>(interpolate(t))<\/span><\/div>\n<div id=\"file-index-html-LC315\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> interpolate(t);<\/span><\/div>\n<div id=\"file-index-html-LC316\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC317\" class=\"line\"><span class=\"pl-s2\"> } <span class=\"pl-c\">\/\/end tweenDash<\/span><\/span><\/div>\n<div id=\"file-index-html-LC318\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC319\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ Use Leaflet to implement a D3 geometric transformation.<\/span><\/span><\/div>\n<div id=\"file-index-html-LC320\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ the latLngToLayerPoint is a Leaflet conversion method:<\/span><\/span><\/div>\n<div id=\"file-index-html-LC321\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/Returns the map layer point that corresponds to the given geographical<\/span><\/span><\/div>\n<div id=\"file-index-html-LC322\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ coordinates (useful for placing overlays on the map).<\/span><\/span><\/div>\n<div id=\"file-index-html-LC323\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span> <span class=\"pl-en\">projectPoint<\/span>(<span class=\"pl-vpf\">x<\/span>, <span class=\"pl-vpf\">y<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC324\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> point <span class=\"pl-k\">=<\/span> map.latLngToLayerPoint(<span class=\"pl-k\">new<\/span> <span class=\"pl-en\">L.LatLng<\/span>(y, x));<\/span><\/div>\n<div id=\"file-index-html-LC325\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-v\">this<\/span>.stream.point(point.<span class=\"pl-sc\">x<\/span>, point.<span class=\"pl-sc\">y<\/span>);<\/span><\/div>\n<div id=\"file-index-html-LC326\" class=\"line\"><span class=\"pl-s2\"> } <span class=\"pl-c\">\/\/end projectPoint<\/span><\/span><\/div>\n<div id=\"file-index-html-LC327\" class=\"line\"><span class=\"pl-s2\"> });<\/span><\/div>\n<div id=\"file-index-html-LC328\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC329\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC330\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ similar to projectPoint this function converts lat\/long to<\/span><\/span><\/div>\n<div id=\"file-index-html-LC331\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ svg coordinates except that it accepts a point from our <\/span><\/span><\/div>\n<div id=\"file-index-html-LC332\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-c\">\/\/ GeoJSON<\/span><\/span><\/div>\n<div id=\"file-index-html-LC333\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC334\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-st\">function<\/span> <span class=\"pl-en\">applyLatLngToLayer<\/span>(<span class=\"pl-vpf\">d<\/span>) {<\/span><\/div>\n<div id=\"file-index-html-LC335\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> y <span class=\"pl-k\">=<\/span> d.geometry.coordinates[<span class=\"pl-c1\">1<\/span>]<\/span><\/div>\n<div id=\"file-index-html-LC336\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-s\">var<\/span> x <span class=\"pl-k\">=<\/span> d.geometry.coordinates[<span class=\"pl-c1\">0<\/span>]<\/span><\/div>\n<div id=\"file-index-html-LC337\" class=\"line\"><span class=\"pl-s2\"> <span class=\"pl-k\">return<\/span> map.latLngToLayerPoint(<span class=\"pl-k\">new<\/span> <span class=\"pl-en\">L.LatLng<\/span>(y, x))<\/span><\/div>\n<div id=\"file-index-html-LC338\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC339\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC340\" class=\"line\"><span class=\"pl-s2\"> }<\/span><\/div>\n<div id=\"file-index-html-LC341\" class=\"line\"><span class=\"pl-s2\"> &lt;\/<span class=\"pl-ent\">script<\/span>&gt;<\/span><\/div>\n<div id=\"file-index-html-LC342\" class=\"line\">&lt;\/<span class=\"pl-ent\">body<\/span>&gt;<\/div>\n<div id=\"file-index-html-LC343\" class=\"line\"><\/div>\n<div id=\"file-index-html-LC344\" class=\"line\">&lt;\/<span class=\"pl-ent\">html<\/span>&gt;<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<div class=\"gist-meta\"><a href=\"https:\/\/gist.github.com\/zross\/6a31f4ef9e778d94c204\/raw\/index.html\">view raw<\/a><a href=\"https:\/\/gist.github.com\/zross\/6a31f4ef9e778d94c204#file-index-html\">index.html<\/a> hosted with \u2764 by <a href=\"https:\/\/github.com\/\">GitHub<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Animate a path with D3 Viewing location data that varies through time on a static map is fun, but viewing it on an animated&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-709","post","type-post","status-publish","format-standard","hentry","category-r"],"_links":{"self":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/comments?post=709"}],"version-history":[{"count":0,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"wp:attachment":[{"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuoyao.net\/index.php\/wp-json\/wp\/v2\/tags?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}