Skip to content

Instantly share code, notes, and snippets.

@hpfast
Last active August 4, 2023 07:11
Show Gist options
  • Save hpfast/2fb8de57c356d8c45ce511189eec5d6a to your computer and use it in GitHub Desktop.
Save hpfast/2fb8de57c356d8c45ce511189eec5d6a to your computer and use it in GitHub Desktop.
Leaflet with a topojson layer
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment