2f:T471,md`# MapLibre earthquake slider * Adapted from the MapLibre [Create a time slider](https://maplibre.org/maplibre-gl-js/docs/examples/timeline-animation/) demo. * Uses [D3](https://github.com/d3/d3/blob/master/API.md) to load data * Uses [map.setFilter()](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfilter) to filter the symbols displayed on the map * [MapLibre GL API Reference](https://maplibre.org/maplibre-gl-js-docs/api/) -- maplibre.org * [map.setFilter](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#setfilter) * [style layers](https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/) * [style layer filter](https://maplibre.org/maplibre-gl-js-docs/style-spec/layers//#filter) * [style expressions](https://maplibre.org/maplibre-gl-js-docs/style-spec/expressions/) * Related demos * [Draw GeoJSON points](https://maplibre.org/maplibre-gl-js-docs/example/geojson-markers/) -- maplibre.org * [Update a feature in real time](https://maplibre.org/maplibre-gl-js-docs/example/live-update-feature/) -- maplibre.org * Plotly uses [mapbox](https://plotly.com/python/mapbox-layers/)`30:T8df,d3.json( 'https://docs.mapbox.com/mapbox-gl-js/assets/significant-earthquakes-2015.geojson', function (err, data) { if (err) throw err; // Create a month property value based on time // used to filter against. data.features = data.features.map(function (d) { d.properties.month = new Date(d.properties.time).getMonth(); return d; }); map.addSource('earthquakes', { 'type': 'geojson', data: data }); map.addLayer({ 'id': 'earthquake-circles', 'type': 'circle', 'source': 'earthquakes', 'paint': { 'circle-color': [ 'interpolate', ['linear'], ['get', 'mag'], 6, '#FCA107', 8, '#7F3121' ], 'circle-opacity': 0.75, 'circle-radius': [ 'interpolate', ['linear'], ['get', 'mag'], 6, 20, 8, 40 ] } }); map.addLayer({ 'id': 'earthquake-labels', 'type': 'symbol', 'source': 'earthquakes', 'layout': { 'text-field': [ 'concat', ['to-string', ['get', 'mag']], 'm' ], 'text-font': [ 'Open Sans Bold', 'Arial Unicode MS Bold' ], 'text-size': 12 }, 'paint': { 'text-color': 'rgba(0,0,0,0.5)' } }); // Set filter to first month of the year // 0 = January filterBy(0); document .getElementById('map-slider') .addEventListener('input', function (e) { var month = parseInt(e.target.value, 10); filterBy(month); }); } )31:[] 2d:{"title":"MapLibre earthquake slider","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"container = html`\n

Significant earthquakes in 2015

\n\n\n

Magnitude (m)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"md`### Event-driven reporting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"mutable z = 42","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"map.on(\"move\", () => {\n let f = d3.format(\"7.2f\");\n let deg = String.fromCharCode(176);\n let center = map.getCenter();\n let str = `Map center: ${f(center.lng) + deg} E, ${f(center.lat) + deg} N`\n mutable z = str;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`### Initialize the map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"map = {\n \n let source = usgs; // choose basemap from among: stamen, usgs, canada (radar)\n let sources = {'raster-tiles': source};\n \n let layers = [{\n 'id': 'simple-tiles',\n 'type': 'raster',\n 'source': 'raster-tiles',\n }];\n \n let style = { \n version: 8,\n sources: sources,\n layers: layers\n };\n \n const map = container.value = new maplibregl.Map({\n container: \"map\",\n //center: [-77.033485, 38.897205], // DC\n center: [-95., 37.], // DC\n style: style,\n zoom: 1,\n minZoom: 1,\n tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'],\n scrollZoom: true\n });\n \n invalidation.then(() => map.remove());\n return map\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`# Basemap\n\nChoose one for the raster-tiles source when initializing the map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`### Stamen & OSM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"stamen = ({\n type: 'raster',\n tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'],\n tileSize: 256,\n attribution:\n 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA'\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`### USGS imagery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"usgs = ({\n type: 'raster',\n tiles: ['https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}'],\n tileSize: 256,\n attribution: 'United States Geological Survey'\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`### Canadian radar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"canada = ({\n type: 'raster',\n tiles: [\"https://geo.weather.gc.ca/geomet/?\" +\n \"SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857\" +\n \"&WIDTH=1000&HEIGHT=1000&LAYERS=RADAR_1KM_RDBR&TILED=true&FORMAT=image/png\"],\n tileSize: 256,\n attribution: 'Government of Canada'\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`# Earthquakes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`### Filter function\n\n* set_filter(layer_id, filter, options)\n* my guess: only one filter per layer_id\n* because filter=Null removes any filter for layer_id)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"function filterBy(month) {\n var months = ['January','February','March','April','May','June',\n 'July','August','September','October','November','December'\n ];\n var filters = ['==', 'month', month];\n\n map.setFilter('earthquake-circles', filters);\n map.setFilter('earthquake-labels', filters);\n \n // Set the label to the month\n document.getElementById('month').textContent = months[month];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`### Styling for the map-control overlays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"// maplibregl = require(\"maplibre-gl@2.1.9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"maplibregl = {\n const gl = await require(\"maplibre-gl@2.1\");\n const href = await require.resolve(\"maplibre-gl@2.1.9/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"// mapboxgl = {\n// const gl = await require(\"mapbox-gl@1\");\n// const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n// document.head.appendChild(html``);\n// return gl;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"d3 = require(\"d3@3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}