hpfast/aardbevingen_NL.geojson

## aardbevingen_NL.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              aardbevingen_NL.geojson
            
          
      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/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>

    <!--code we need to use a different projection-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>

    <!--our own code to create the map-->
    <script>
      //define the custom projection tileset (Amersfoort/RD)
      var RD = new L.Proj.CRS( 'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs', {
          resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
          bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
          origin: [-285401.92, 22598.08]
        }
      );
      //initialize the map with our coordinate reference system
      let map = L.map('map-container', {
        crs: RD
      });
      //map view still gets set with Latitude/Longitude,
      //but the zoomlevel is now different (it uses the resolutions defined in our projection tileset above)
      map.setView([52.268, 4.998], 3)  ;

      //add background layer in custom projection
      let bglayer_BRTAchtergrondkaart = new L.TileLayer('http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/brtachtergrondkaartgrijs/EPSG:28992/{z}/{x}/{y}.png', {
        minZoom: 0,
        maxZoom: 13,
        tms: true,
        attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>'
      });
      bglayer_BRTAchtergrondkaart.addTo(map)
      //define color of points based on earthquake type
      function colorPoints(type){
        return type === 'tec' ? '#35495D' :
          type === 'ind' ? '#EA9657' :
          '#317581'
      }
      //define how our point data will be visualized
      function styleEarthquakePoints(feature){
        return {
          radius: 2.5*Math.sqrt((Math.exp(parseFloat(feature.properties.MAG)))),
          fillColor: colorPoints(feature.properties.TYPE),
          color: '#fff',
          weight: 1,
          opacity: 0.8,
          fillOpacity: 0.6
        };
      }
      //create an empty geojson layer that already knows how to style the data
      var geojson = L.geoJson(null,{
        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, styleEarthquakePoints(feature));
        }
      }).addTo(map);
      //define a function to get and parse geojson from URL
      async function getGeoData(url) {
        let response = await fetch(url);
        let data = await response.json();
        return data;
      }

      //fetch the geojson and add it to our geojson layer
      getGeoData('aardbevingen_NL.geojson').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/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>

	<!--code we need to use a different projection-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>

	<!--our own code to create the map-->
	<script>
	//define the custom projection tileset (Amersfoort/RD)
	var RD = new L.Proj.CRS( 'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs', {
	resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
	bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
	origin: [-285401.92, 22598.08]
	}
	);
	//initialize the map with our coordinate reference system
	let map = L.map('map-container', {
	crs: RD
	});
	//map view still gets set with Latitude/Longitude,
	//but the zoomlevel is now different (it uses the resolutions defined in our projection tileset above)
	map.setView([52.268, 4.998], 3) ;

	//add background layer in custom projection
	let bglayer_BRTAchtergrondkaart = new L.TileLayer('http://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/brtachtergrondkaartgrijs/EPSG:28992/{z}/{x}/{y}.png', {
	minZoom: 0,
	maxZoom: 13,
	tms: true,
	attribution: 'Map data: <a href="http://www.kadaster.nl">Kadaster</a>'
	});
	bglayer_BRTAchtergrondkaart.addTo(map)
	//define color of points based on earthquake type
	function colorPoints(type){
	return type === 'tec' ? '#35495D' :
	type === 'ind' ? '#EA9657' :
	'#317581'
	}
	//define how our point data will be visualized
	function styleEarthquakePoints(feature){
	return {
	radius: 2.5*Math.sqrt((Math.exp(parseFloat(feature.properties.MAG)))),
	fillColor: colorPoints(feature.properties.TYPE),
	color: '#fff',
	weight: 1,
	opacity: 0.8,
	fillOpacity: 0.6
	};
	}
	//create an empty geojson layer that already knows how to style the data
	var geojson = L.geoJson(null,{
	pointToLayer: function (feature, latlng) {
	return L.circleMarker(latlng, styleEarthquakePoints(feature));
	}
	}).addTo(map);
	//define a function to get and parse geojson from URL
	async function getGeoData(url) {
	let response = await fetch(url);
	let data = await response.json();
	return data;
	}

	//fetch the geojson and add it to our geojson layer
	getGeoData('aardbevingen_NL.geojson').then(data => geojson.addData(data));
	</script>
	</body>
	</html>