D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hpfast
Full window
Github gist
Leaflet with a topojson layer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A basic map with Leaflet</title> <!--add Leaflet CSS--> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <!--our own style rules--> <style type="text/css"> body, html { height: 90%; } #map-container { height: 100%; } </style> </head> <body> <!--The div in which the map will be created--> <div id="map-container"></div> <!--load leaflet.js--> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> <!--we need the topojson library as well--> <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script> <!--our own code to create the map--> <script> let map = L.map('map-container'); map.setView([52.268, 4.998], 7); let bglayer_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://cartodb.com/attributions">CartoDB</a>', subdomains: 'abcd', maxZoom: 19 }); bglayer_Positron.addTo(map); //extend Leaflet to create a GeoJSON layer from a TopoJSON file L.TopoJSON = L.GeoJSON.extend({ addData: function (data) { var geojson, key; if (data.type === "Topology") { for (key in data.objects) { if (data.objects.hasOwnProperty(key)) { geojson = topojson.feature(data, data.objects[key]); L.GeoJSON.prototype.addData.call(this, geojson); } } return this; } L.GeoJSON.prototype.addData.call(this, data); return this; } }); L.topoJson = function (data, options) { return new L.TopoJSON(data, options); }; //create an empty geojson layer //with a style and a popup on click var geojson = L.topoJson(null, { style: function(feature){ return { color: "#000", opacity: 1, weight: 1, fillColor: '#35495d', fillOpacity: 0.8 } }, onEachFeature: function(feature, layer) { layer.bindPopup('<p>'+feature.properties.name+'</p>') } }).addTo(map); //fill: #317581; //define a function to get and parse geojson from URL async function getGeoData(url) { let response = await fetch(url); let data = await response.json(); console.log(data) return data; } //fetch the geojson and add it to our geojson layer getGeoData('gemeenten2017.topojson').then(data => geojson.addData(data)); </script> </body> </html>
https://unpkg.com/topojson@3.0.2/dist/topojson.min.js