31: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); }); } )32:[] 2f:{"title":"Earthquakes on Mapbox GL","cells":[{"id":0,"value":"md`# Earthquakes on Mapbox GL\n\n* Adapted from the Mapbox [Create a time slider](https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/) demo.\n * Uses [D3](https://github.com/d3/d3/blob/master/API.md) to load data\n * Uses [map.setFilter()](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfilter) to filter the symbols displayed on the map\n* [Mapbox GL API Reference](https://docs.mapbox.com/mapbox-gl-js/api/)\n * [map.setFilter](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setfilter)\n * [layer filter expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter)\n * [style expression](https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/)\n* Related demos\n * [Draw GeoJSON points](https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/) -- mapbox.com\n * [Update a feature in real time](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/) -- mapbox.com\n* Plotly uses [mapbox](https://plotly.com/python/mapbox-layers/)`","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 mapboxgl.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":"$31","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":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":"$W32","stdlib":"1","titling":"auto"}