Skip to content

Instantly share code, notes, and snippets.

@bannarisoftwares

bannarisoftwares/gemeenten2017.topojson

Forked from hpfast/gemeenten2017.topojson
Last active August 4, 2023 07:11
Show Gist options
  • Save bannarisoftwares/fd08b132620baabd4c82367751624d5a to your computer and use it in GitHub Desktop.
Save bannarisoftwares/fd08b132620baabd4c82367751624d5a to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet with a topojson layer
Display the source blob
Display the rendered blob
Raw
gemeenten2017.topojson
{
"type": "Topology",
"arcs": [
[
[13, 163],
[95, 0]
],
[
[13, 19],
[95, 0]
],
[
[13, 31],
[95, 0]
],
[
[13, 42],
[95, 0]
],
[
[13, 53],
[95, 0]
],
[
[13, 64],
[95, 0]
],
[
[13, 76],
[95, 0]
],
[
[13, 87],
[95, 0]
],
[
[13, 98],
[95, 0]
],
[
[61, 8],
[0, 90]
],
[
[121, 8],
[0, -8]
],
[
[115, 8],
[6, 0]
],
[
[115, 257],
[-7, 0]
],
[
[108, 257],
[0, -249]
],
[
[115, 257],
[0, -249]
],
[
[6, 257],
[0, -249]
],
[
[13, 257],
[0, -249]
],
[
[6, 257],
[7, 0]
],
[
[13, 8],
[95, 0]
],
[
[0, 8],
[6, 0]
],
[
[0, 0],
[121, 0]
],
[
[0, 8],
[0, -8]
]
],
"transform": {
"scale": [0.03504954379995753, 0.02694815848097327],
"translate": [-28650.023040778047, 6627.119957512703]
},
"objects": {
"new_small_house": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"arcs": [0],
"properties": {
"fid": 2607,
"handle": 23519,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [1],
"properties": {
"fid": 2608,
"handle": 23520,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [2],
"properties": {
"fid": 2609,
"handle": 23521,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [3],
"properties": {
"fid": 2610,
"handle": 23522,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [4],
"properties": {
"fid": 2611,
"handle": 23523,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [5],
"properties": {
"fid": 2612,
"handle": 23524,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [6],
"properties": {
"fid": 2613,
"handle": 23525,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [7],
"properties": {
"fid": 2614,
"handle": 23526,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [8],
"properties": {
"fid": 2615,
"handle": 23527,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [9],
"properties": {
"fid": 2616,
"handle": 23528,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [10],
"properties": {
"fid": 2633,
"handle": 23545,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [11],
"properties": {
"fid": 2683,
"handle": 23595,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [12],
"properties": {
"fid": 2685,
"handle": 23597,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [13],
"properties": {
"fid": 2687,
"handle": 23599,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [14],
"properties": {
"fid": 2689,
"handle": 23601,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [15],
"properties": {
"fid": 2691,
"handle": 23603,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [16],
"properties": {
"fid": 2692,
"handle": 23604,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [17],
"properties": {
"fid": 2693,
"handle": 23605,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [18],
"properties": {
"fid": 2696,
"handle": 23608,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [19],
"properties": {
"fid": 2699,
"handle": 23611,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [20],
"properties": {
"fid": 2700,
"handle": 23612,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
},
{
"type": "LineString",
"arcs": [21],
"properties": {
"fid": 2701,
"handle": 23613,
"block": -1,
"etype": 17,
"space": 0,
"layer": "freecads.com",
"olinetype": "bylayer",
"linetype": "",
"color": "0,0,0,255",
"ocolor": 256,
"color24": -1,
"transparency": 0,
"lweight": -1,
"linewidth": 0,
"ltscale": 1,
"visible": 1,
"thickness": 0,
"ext": "(3:0,0,1)",
"width": null
}
}
]
}
}
}
Raw
index.html
<!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