Skip to content

Instantly share code, notes, and snippets.

@eaglebh
Last active August 29, 2015 14:21
Show Gist options
  • Save eaglebh/e0367d42e3a69d968d36 to your computer and use it in GitHub Desktop.
Save eaglebh/e0367d42e3a69d968d36 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
svg {
position: relative;
}
path {
fill: yellow;
stroke-width: 2px;
stroke: red;
stroke-opacity: 1;
}
.travelMarker {
fill: yellow;
opacity: 0.75;
}
.waypoints {
fill: black;
opacity: 0;
}
}
.drinks {
stroke: black;
fill: red;
}
.lineConnect {
fill: none;
stroke: black;
opacity: 1;
}
.locnames {
fill: black;
text-shadow: 1px 1px 1px #FFF, 3px 3px 5px #000;
font-weight: bold;
font-size: 13px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div id="map"></div>
<script type="text/javascript">
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-zr0njcqy/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([-19.850833,-43.9863767,15], 14);
// we will be appending the SVG to the Leaflet map pane
// g (group) element will be inside the svg
var svg = d3.select(map.getPanes().overlayPane).append("svg");
// if you don't include the leaflet-zoom-hide when a
// user zooms in or out you will still see the phantom
// original SVG
var g = svg.append("g").attr("class", "leaflet-zoom-hide");
//read in the GeoJSON. This function is asynchronous so
// anything that needs the json file should be within
d3.json("pamp.geojson", function(collection) {
// this is not needed right now, but for future we may need
// to implement some filtering. This uses the d3 filter function
// featuresdata is an array of point objects
var featuresdata = collection.features.filter(function(d) {
return 1 == 1;
})
//stream transform. transforms geometry before passing it to
// listener. Can be used in conjunction with d3.geo.path
// to implement the transform.
var transform = d3.geo.transform({
point: projectPoint
});
//d3.geo.path translates GeoJSON to SVG path codes.
//essentially a path generator. In this case it's
// a path generator referencing our custom "projection"
// which is the Leaflet method latLngToLayerPoint inside
// our function called projectPoint
var d3path = d3.geo.path().projection(transform);
// Here we're creating a FUNCTION to generate a line
// from input points. Since input points will be in
// Lat/Long they need to be converted to map units
// with applyLatLngToLayer
var toLine = d3.svg.line()
.interpolate("linear")
.x(function(d) {
return applyLatLngToLayer(d).x
})
.y(function(d) {
return applyLatLngToLayer(d).y
});
// From now on we are essentially appending our features to the
// group element. We're adding a class with the line name
// and we're making them invisible
// these are the points that make up the path
// they are unnecessary so I've make them
// transparent for now
var ptFeatures = g.selectAll("circle")
.data(featuresdata)
.enter()
.append("circle")
.attr("r", 3)
.attr("class", "waypoints");
// Here we will make the points into a single
// line/path. Note that we surround the featuresdata
// with [] to tell d3 to treat all the points as a
// single line. For now these are basically points
// but below we set the "d" attribute using the
// line creator function from above.
var linePath = g.selectAll(".lineConnect")
.data([featuresdata])
.enter()
.append("path")
.attr("class", "lineConnect");
// This will be our traveling circle it will
// travel along our path
var marker = g.append("circle")
.attr("r", 10)
.attr("id", "marker")
.attr("class", "travelMarker");
// For simplicity I hard-coded this! I'm taking
// the first and the last object (the origin)
// and destination and adding them separately to
// better style them. There is probably a better
// way to do this!
var originANDdestination = [featuresdata[0], featuresdata[17]]
var begend = g.selectAll(".drinks")
.data(originANDdestination)
.enter()
.append("circle", ".drinks")
.attr("r", 5)
.style("fill", "red")
.style("opacity", "1");
// I want names for my coffee and beer
var text = g.selectAll("text")
.data(originANDdestination)
.enter()
.append("text")
.text(function(d) {
return d.properties.name
})
.attr("class", "locnames")
.attr("y", function(d) {
return -10
})
// when the user zooms in or out you need to reset
// the view
map.on("viewreset", reset);
// this puts stuff on the map!
reset();
transition();
// Reposition the SVG to cover the features.
function reset() {
var bounds = d3path.bounds(collection),
topLeft = bounds[0],
bottomRight = bounds[1];
// here you're setting some styles, width, heigh etc
// to the SVG. Note that we're adding a little height and
// width because otherwise the bounding box would perfectly
// cover our features BUT... since you might be using a big
// circle to represent a 1 dimensional point, the circle
// might get cut off.
text.attr("transform",
function(d) {
return "translate(" +
applyLatLngToLayer(d).x + "," +
applyLatLngToLayer(d).y + ")";
});
// for the points we need to convert from latlong
// to map units
begend.attr("transform",
function(d) {
return "translate(" +
applyLatLngToLayer(d).x + "," +
applyLatLngToLayer(d).y + ")";
});
ptFeatures.attr("transform",
function(d) {
return "translate(" +
applyLatLngToLayer(d).x + "," +
applyLatLngToLayer(d).y + ")";
});
// again, not best practice, but I'm harding coding
// the starting point
marker.attr("transform",
function() {
var y = featuresdata[0].geometry.coordinates[1]
var x = featuresdata[0].geometry.coordinates[0]
return "translate(" +
map.latLngToLayerPoint(new L.LatLng(y, x)).x + "," +
map.latLngToLayerPoint(new L.LatLng(y, x)).y + ")";
});
// Setting the size and location of the overall SVG container
svg.attr("width", bottomRight[0] - topLeft[0] + 120)
.attr("height", bottomRight[1] - topLeft[1] + 120)
.style("left", topLeft[0] - 50 + "px")
.style("top", topLeft[1] - 50 + "px");
// linePath.attr("d", d3path);
linePath.attr("d", toLine)
// ptPath.attr("d", d3path);
g.attr("transform", "translate(" + (-topLeft[0] + 50) + "," + (-topLeft[1] + 50) + ")");
} // end reset
// the transition function could have been done above using
// chaining but it's cleaner to have a separate function.
// the transition. Dash array expects "500, 30" where
// 500 is the length of the "dash" 30 is the length of the
// gap. So if you had a line that is 500 long and you used
// "500, 0" you would have a solid line. If you had "500,500"
// you would have a 500px line followed by a 500px gap. This
// can be manipulated by starting with a complete gap "0,500"
// then a small line "1,500" then bigger line "2,500" and so
// on. The values themselves ("0,500", "1,500" etc) are being
// fed to the attrTween operator
function transition() {
linePath.transition()
.duration(7500)
.attrTween("stroke-dasharray", tweenDash)
.each("end", function() {
d3.select(this).call(transition);// infinite loop
});
} //end transition
// this function feeds the attrTween operator above with the
// stroke and dash lengths
function tweenDash() {
return function(t) {
//total length of path (single value)
var l = linePath.node().getTotalLength();
// this is creating a function called interpolate which takes
// as input a single value 0-1. The function will interpolate
// between the numbers embedded in a string. An example might
// be interpolatString("0,500", "500,500") in which case
// the first number would interpolate through 0-500 and the
// second number through 500-500 (always 500). So, then
// if you used interpolate(0.5) you would get "250, 500"
// when input into the attrTween above this means give me
// a line of length 250 followed by a gap of 500. Since the
// total line length, though is only 500 to begin with this
// essentially says give me a line of 250px followed by a gap
// of 250px.
interpolate = d3.interpolateString("0," + l, l + "," + l);
//t is fraction of time 0-1 since transition began
var marker = d3.select("#marker");
// p is the point on the line (coordinates) at a given length
// along the line. In this case if l=50 and we're midway through
// the time then this would 25.
var p = linePath.node().getPointAtLength(t * l);
//Move the marker to that point
marker.attr("transform", "translate(" + p.x + "," + p.y + ")"); //move marker
console.log(interpolate(t))
return interpolate(t);
}
} //end tweenDash
// Use Leaflet to implement a D3 geometric transformation.
// the latLngToLayerPoint is a Leaflet conversion method:
//Returns the map layer point that corresponds to the given geographical
// coordinates (useful for placing overlays on the map).
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
} //end projectPoint
});
// similar to projectPoint this function converts lat/long to
// svg coordinates except that it accepts a point from our
// GeoJSON
function applyLatLngToLayer(d) {
var y = d.geometry.coordinates[1]
var x = d.geometry.coordinates[0]
return map.latLngToLayerPoint(new L.LatLng(y, x))
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
{
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"properties":{
"id":"marker-ia5isore0",
"title":"Start",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.974967,
-19.862875
],
"type":"Point"
},
"id":"cia5iy2fg04ayism4p4sfxjsf"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ites41",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.977198,
-19.856578
],
"type":"Point"
},
"id":"cia5iy2fi04azism4pe1wset0"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itk032",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.975353,
-19.854439
],
"type":"Point"
},
"id":"cia5iy2fj04b0ism4xr15pku6"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itnlu3",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.970246,
-19.854923
],
"type":"Point"
},
"id":"cia5iy2fk04b1ism45cg9fl6o"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itq3m4",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.9684,
-19.853955
],
"type":"Point"
},
"id":"cia5iy2fl04b2ism445fnhu85"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itsa25",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.966984,
-19.849353
],
"type":"Point"
},
"id":"cia5iy2fm04b3ism4im4bij2b"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ituqy6",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.967199,
-19.84455
],
"type":"Point"
},
"id":"cia5iy2fn04b4ism4ngek04yc"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itwlu7",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.969516,
-19.843581
],
"type":"Point"
},
"id":"cia5iy2fo04b5ism41ucnrag7"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5itysb8",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.970289,
-19.844307
],
"type":"Point"
},
"id":"cia5iy2fp04b6ism4jay7fx0m"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iu0sc9",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.970074,
-19.846043
],
"type":"Point"
},
"id":"cia5iy2fq04b7ism4m0jvp4zw"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iu2wya",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.972349,
-19.850806
],
"type":"Point"
},
"id":"cia5iy2fr04b8ism47h3tag8o"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iu5erb",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.97325,
-19.850927
],
"type":"Point"
},
"id":"cia5iy2fs04b9ism4vgrkn1i3"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iu7hec",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.974537,
-19.849232
],
"type":"Point"
},
"id":"cia5iy2ft04baism4su7hegur"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iu9pud",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.97428,
-19.847779
],
"type":"Point"
},
"id":"cia5iy2fu04bbism4hvlfp2j5"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iubwqe",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.976082,
-19.848828
],
"type":"Point"
},
"id":"cia5iy2fv04bcism4qo6a2vxm"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iuduif",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.978314,
-19.848425
],
"type":"Point"
},
"id":"cia5iy2fx04bdism4nqav32q9"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iugcag",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.981704,
-19.850604
],
"type":"Point"
},
"id":"cia5iy2fy04beism4yx4n6bxr"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iujrgh",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.993206,
-19.842006
],
"type":"Point"
},
"id":"cia5iy2fz04bfism4y5drxw5l"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ium7ei",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.994321,
-19.838171
],
"type":"Point"
},
"id":"cia5iy2g004bgism4o0x7bzcr"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iuo8ij",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.995008,
-19.838535
],
"type":"Point"
},
"id":"cia5iy2g104bhism481zcxgew"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iuqaak",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.994407,
-19.840997
],
"type":"Point"
},
"id":"cia5iy2g204biism4b8umbo96"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iurybl",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.995223,
-19.842208
],
"type":"Point"
},
"id":"cia5iy2g304bjism4udt6vmnd"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iutqym",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.993978,
-19.843742
],
"type":"Point"
},
"id":"cia5iy2g404bkism4grk37lhh"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iuviin",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.995523,
-19.846527
],
"type":"Point"
},
"id":"cia5iy2g504blism4pf40n7jh"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iuxkqo",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.9993,
-19.845357
],
"type":"Point"
},
"id":"cia5iy2g604bmism4iloi55t5"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivhrep",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.995695,
-19.848707
],
"type":"Point"
},
"id":"cia5iy2g704bnism47f9x9vzg"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivkgiq",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.99681,
-19.851048
],
"type":"Point"
},
"id":"cia5iy2g804boism40caxfo7p"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivmaqr",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-44.005308,
-19.850927
],
"type":"Point"
},
"id":"cia5iy2g904bpism41fa6zv9r"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivp0ss",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-44.005951,
-19.853753
],
"type":"Point"
},
"id":"cia5iy2ga04bqism44twbrluh"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivqtut",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-44.005222,
-19.854681
],
"type":"Point"
},
"id":"cia5iy2gc04brism4auhhc9pp"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivt7uu",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-44.002604,
-19.852582
],
"type":"Point"
},
"id":"cia5iy2gd04bsism4qjpg1bc0"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivv6iv",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.998913,
-19.8523
],
"type":"Point"
},
"id":"cia5iy2ge04btism47zq5zog2"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivx6yw",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.998055,
-19.854157
],
"type":"Point"
},
"id":"cia5iy2gf04buism4unfazojz"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5ivz15x",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.997669,
-19.860938
],
"type":"Point"
},
"id":"cia5iy2gg04bvism42lzgrc6l"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iw12ay",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.994278,
-19.860171
],
"type":"Point"
},
"id":"cia5iy2gh04bwism4xt9jwmnm"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iw3l6z",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.995308,
-19.858153
],
"type":"Point"
},
"id":"cia5iy2gi04bxism4gozcbiyy"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iw6ia10",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.991789,
-19.85008
],
"type":"Point"
},
"id":"cia5iy2gj04byism48bhughyo"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iw8l611",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.989644,
-19.851896
],
"type":"Point"
},
"id":"cia5iy2gk04bzism4xuoljrr2"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwa9e12",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.985996,
-19.851573
],
"type":"Point"
},
"id":"cia5iy2gl04c0ism4cqjyx719"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwbtu13",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.984408,
-19.852542
],
"type":"Point"
},
"id":"cia5iy2gm04c1ism4gqkdmp51"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwdhm14",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.98385,
-19.854197
],
"type":"Point"
},
"id":"cia5iy2gn04c2ism455qx6xd5"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwf6215",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.981919,
-19.853107
],
"type":"Point"
},
"id":"cia5iy2go04c3ism4w5yozx7w"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwgqq16",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.979816,
-19.854843
],
"type":"Point"
},
"id":"cia5iy2gp04c4ism4wmdeusky"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwioy17",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.981704,
-19.859767
],
"type":"Point"
},
"id":"cia5iy2gr04c5ism442mty7z4"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwl3518",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.980674,
-19.859888
],
"type":"Point"
},
"id":"cia5iy2gs04c6ism4g74cuvc9"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwnbm19",
"title":"",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.979129,
-19.858677
],
"type":"Point"
},
"id":"cia5iy2gt04c7ism4ncnrfbsy"
},
{
"type":"Feature",
"properties":{
"id":"marker-ia5iwpru1a",
"title":"End",
"description":"",
"marker-size":"medium",
"marker-color":"#1087bf",
"marker-symbol":"pitch"
},
"geometry":{
"coordinates":[
-43.975996,
-19.862875
],
"type":"Point"
},
"id":"cia5iy2gu04c8ism4vsj638sf"
}
],
"id":"pablomarcondes.ef5b0e79"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment