Last active
February 8, 2018 10:05
-
-
Save hpfast/5017e08b6c27b5abd287c2cf21c0c533 to your computer and use it in GitHub Desktop.
Leaflet with a GeoJSON 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> | |
| <!--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); | |
| //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