Menu
I want to render points, coming from a .json file through d3 on a leaflet map.
The only three promising articles I found are:
http://bost.ocks.org/mike/leaflet/;
http://bl.ocks.org/sumbera/10463358 and
https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-leaflet-map-with-d3js-objects-that-scale-with-the-map
However, I cannot transfer that to my problem.
The first link does that with polygons and the second link is far to complicated. The third one does not seem to work...
Thats what I got.
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="d3.min.js" charset="utf-8"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// synchroize d3 and leaflet
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
// but how to draw the points on the map?!
// load a tile layer
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
</script>
</body>
</html>
My problem is: How would I extract the information I need from the .json and then, use that as a .svg to overlay my leaflet map with?
Citiy data from: Made with Natural Earth. Free vector and raster map data @ naturalearthdata.com.
445
Looking @ your cities.json they are all points.
Thus you will have to use this demo to render your points http://bl.ocks.org/sumbera/10463358.
Since you already have points in the correct format so you dont need to the reformat function:
function reformat(array) {
var data = [];
array.map(function (d, i) {
data.push({
id: i,
type: "Feature",
geometry: {
coordinates: [+d.longitude, +d.latitude],
type: "Point"
}
});
});
return data;
}
var geoData = { type: "FeatureCollection", features: reformat(incidents) };
Instead you just need to do this:
d3.json('https://gist.githubusercontent.com/cyrilcherian/92b8f73dcbbb08fd42b4/raw/087202976663f9f3192bec8f0143cf3bc131c794/cities.json', function(error, incidents) {
//load the json data
var geoData = incidents;
//put the data in the quad tree
var qtree = d3.geom.quadtree(geoData.features.map(function(data, i) {
return {
x: data.geometry.coordinates[0],
y: data.geometry.coordinates[1],
all: data
};
}));
Now use the quad tree to get the points which need to be displayed.
If your are wondering what is quad tree read this here
Working example here
EDIT
Working example of drawing points sans quad tree optimization is here
Hope this helps!
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
