Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet with a GeoJSON layer
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>
<!--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);
//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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment