![\"\"](\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_overlaying_geo_data_with_leaflet.jpg?resize=678%2C254\")
<\/p>\n<\/p>\n
In this post I describe how you can overlay Geo Data onto a leaflet map with D3.js.<\/p>\n
<\/p>\n
There are a number of tutorials online on how to overlay Geodata with D3.js. However, I couldn’t find any of these that worked for the most recent version of D3.js and Leaflet. They were all fundamentally broken. This post goes into the details of overlaying simple circles on a leaflet map.<\/p>\n
Here I am using the latest (as of writing) versions of Leaflet and D3.js. These are V1.3 and V4.13.0 for leaflet and D3.js respectively.<\/p>\n
First I am going to set up Leaflet and set some defaults up. Once this is done I will be able to set up D3 and start overlaying data.<\/p>\n
First Leaflet needs to be imported and the CSS needs to be loaded. Here I have used cdnjs to load the library but this can be a local copy if preferred.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.3.1\/leaflet.css\"\/>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.3.1\/leaflet.js\"><\/script><\/pre>\nTo draw a leaflet map you must first create an element to draw into. In the body of my HTML I create a div to hold the data and style its width and height.<\/p>\n
<div id=\"map\" style=\"width: 600px; height: 600px\"><\/div><\/pre>\nOnce I have created the map div I can start creating the map using JavaScript.<\/p>\n
var map = L.map('map').setView([51.505548, -0.075316], 16);\r\nmapLink = L.tileLayer('http:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png').addTo(map);<\/pre>\nAbove I create a map centering on the coordinates
51.505548, -0.075316<\/code>.\u00a0In the second line I add a tile layer using the open street map tiling and add it to the map. These two lines then create a scrollable map on the page in the map div.<\/p>\nNow I have my leaflet scrollable map and can start to add geo data to it.<\/p>\n
Setting up D3 and the SVG layer to draw to<\/h2>\n
Now I have my leaflet map I can start to add D3 and elements to the map.<\/p>\n
In the head element I need to include the d3 source so I add the following line to the page.<\/p>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.13.0\/d3.min.js\"><\/script><\/pre>\nD3.js operates on a SVG element so I need to add a SVG to the Leaflet map. Using Leaflet I ask it to create\u00a0a\u00a0SVG element and add it to the map.\u00a0This can be done with the following code.<\/p>\n
var svgLayer = L.svg();\r\nsvgLayer.addTo(map);<\/pre>\nBy default Leaflet adds an initial group element inside this SVG so I can access both the SVG and the group using the following D3.js.<\/p>\n
var svg = d3.select(\"#map\").select(\"svg\");\r\nvar g = svg.select('g');<\/pre>\nNow I have access to the SVG and the group I can start to work with the data.<\/p>\n
Loading data and Drawing to the SVG<\/h2>\n
For this demonstration, I have a json file with some coordinates that I am going to highlight on the map.<\/p>\n
[\r\n {\"coordinate\":[51.506532, -0.074624]},\r\n {\"coordinate\":[51.504452, -0.076028]},\r\n {\"coordinate\":[51.505548, -0.075316]},\r\n {\"coordinate\":[51.508109, -0.076061]},\r\n {\"coordinate\":[51.506019, -0.073639]}\r\n]<\/pre>\nThese could have names and more information to display on the map but for this example I am going o merely circle the locations.<\/p>\n
To load this data I am going to use the D3.js loading functionality.<\/p>\n
d3.json(\"london.json\", function(pointsOfInterest) {\r\n \/\/code here\r\n});<\/pre>\nHere this will load
london.json<\/code>\u00a0asynchronously and once it has loaded it will call the callback. The contents of the file will be json decoded and stored in the variablepointsOfInterest<\/code>.\u00a0The following code lives in this callback.<\/p>\nLeaflet uses a custom object to hold latitude and longitude data,
L.LatLng<\/code>. So once my data has loaded I add this data to the pointsOfInterest object.<\/p>\npointsOfInterest.forEach(function(d) {\r\n d.latLong = new L.LatLng(d.coordinate[0], d.coordinate[1]);\r\n});<\/pre>\nOnce I have this in a form Leaflet will understand I start by creating the circles using D3.js.<\/p>\n
var feature = g.selectAll(\"circle\")\r\n .data(pointsOfInterest)\r\n .enter().append(\"circle\")\r\n .style(\"stroke\", \"black\")\r\n .style(\"opacity\", .4)\r\n .style(\"fill\", \"blue\")\r\n .attr(\"r\", 20);<\/pre>\nHere I take the data from my
pointsOfInterest<\/code>\u00a0object and create a circle for each data item. At the moment this is just adding the elements to the group inside the SVG. This is not yet placing it on the correct place on the map.<\/p>\nOnce I have the circles created I create a function that will place them in the correct location.<\/p>\n
function drawAndUpdateCircles() {\r\n feature.attr(\"transform\",\r\n function(d) {\r\n var layerPoint = map.latLngToLayerPoint(d.latLong);\r\n return \"translate(\"+ layerPoint.x +\",\"+ layerPoint.y +\")\";\r\n }\r\n )\r\n}<\/pre>\nThis code adds the transform attribute to each of the circles. This is used to move the circle in the correct place on the map. However before the circle can be overlaid I need to work out where on the screen it needs to be placed.<\/p>\n
I have stored where to store the circles using latitude and longitude values. This needs to be transformed into a pixel location on screen. Leaflet provides a simple way of doing this with
map.latLngToLayerPoint(value)<\/code>. This returns an object with two properties, x and y. I then use these values to translate the location of the circles to the correct place on the map.<\/p>\n