hpfast/gemeenten2017.topojson

## gemeenten2017.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              gemeenten2017.topojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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/[email protected]/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/[email protected]/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>

    <!--we need the topojson library as well-->
    <script src="https://unpkg.com/[email protected]/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>
	<!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/[email protected]/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/[email protected]/dist/leaflet.js"
	integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
	crossorigin=""></script>

	<!--we need the topojson library as well-->
	<script src="https://unpkg.com/[email protected]/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>