index.html has been copied without modification from the OpenLayers examples:
https://openlayers.org/en/latest/examples/heatmap-earthquakes.html
Last active
February 15, 2019 22:08
-
-
Save pbogden/417b72d388a4a8447ee5940e638787d0 to your computer and use it in GitHub Desktop.
Leaflet earthquakes
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> | |
| <head> | |
| <title>Earthquakes Heatmap</title> | |
| <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css"> | |
| <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> | |
| <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> | |
| <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script> | |
| <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> | |
| </head> | |
| <body> | |
| <div id="map" class="map"></div> | |
| <form> | |
| <label>radius size</label> | |
| <input id="radius" type="range" min="1" max="50" step="1" value="5"/> | |
| <label>blur size</label> | |
| <input id="blur" type="range" min="1" max="50" step="1" value="15"/> | |
| </form> | |
| <script> | |
| import Map from 'ol/Map.js'; | |
| import View from 'ol/View.js'; | |
| import KML from 'ol/format/KML.js'; | |
| import {Heatmap as HeatmapLayer, Tile as TileLayer} from 'ol/layer.js'; | |
| import Stamen from 'ol/source/Stamen.js'; | |
| import VectorSource from 'ol/source/Vector.js'; | |
| var blur = document.getElementById('blur'); | |
| var radius = document.getElementById('radius'); | |
| var vector = new HeatmapLayer({ | |
| source: new VectorSource({ | |
| url: 'data/kml/2012_Earthquakes_Mag5.kml', | |
| format: new KML({ | |
| extractStyles: false | |
| }) | |
| }), | |
| blur: parseInt(blur.value, 10), | |
| radius: parseInt(radius.value, 10) | |
| }); | |
| vector.getSource().on('addfeature', function(event) { | |
| // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a | |
| // standards-violating <magnitude> tag in each Placemark. We extract it from | |
| // the Placemark's name instead. | |
| var name = event.feature.get('name'); | |
| var magnitude = parseFloat(name.substr(2)); | |
| event.feature.set('weight', magnitude - 5); | |
| }); | |
| var raster = new TileLayer({ | |
| source: new Stamen({ | |
| layer: 'toner' | |
| }) | |
| }); | |
| var map = new Map({ | |
| layers: [raster, vector], | |
| target: 'map', | |
| view: new View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }) | |
| }); | |
| blur.addEventListener('input', function() { | |
| vector.setBlur(parseInt(blur.value, 10)); | |
| }); | |
| radius.addEventListener('input', function() { | |
| vector.setRadius(parseInt(radius.value, 10)); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment