Last active
August 4, 2023 07:11
-
-
Save hpfast/2fb8de57c356d8c45ce511189eec5d6a to your computer and use it in GitHub Desktop.
Leaflet with a topojson layer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <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