31:T42b,viewof map1 = { // From https://observablehq.com/@tmcw/using-mapbox-gl-js // Create the map container const container = html`

`; const infoContainer = html`

A simple map

See the Mapbox GL examples for interesting things to try out.

`; container.appendChild(infoContainer); const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; // Inititalize the GL map let map = addMap({ container: mapContainer }); // Wait until the map loads. map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:T4c8,viewof map2 = { // From https://observablehq.com/@tmcw/using-mapbox-gl-js // // Create the map container // const container = html`

`; const infoContainer = html`

A custom map

See the Mapbox GL examples for interesting things to try out.

`; container.appendChild(infoContainer); const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; let map = addMap({ container: mapContainer, style: 'mapbox://styles/mapbox/dark-v9' }); // Wait until the map loads. map.on("load", () => { // Customize map addLayers(map, usAdminLayers); addMapPopups(map, 'us county', countyPopupContent, { popupOn: 'mousemove' }); setFeatureStateOn(map, 'us county'); // container.value = map; container.dispatchEvent(new CustomEvent("input")); }); invalidation.then(() => map.remove()); }33:T8ca,// Sets the _hover and _selected feature state for the given layer // On mpusemove {_hover:true} // Pn click {_selected:true} function setFeatureStateOn(map, layer) { let source = map.getLayer(layer).source; let sourceLayer = map.getLayer(layer).sourceLayer; // // Hover // let hoveredStateId = null; // When the user moves their mouse over the layer, we'll update the // feature state for the feature under the mouse. map.on('mousemove', layer, function(e) { if (e.features.length > 0) { if (hoveredStateId) { map.setFeatureState( { source: source, sourceLayer: sourceLayer, id: hoveredStateId }, { _hover: false } ); } hoveredStateId = e.features[0].id; map.setFeatureState( { source: source, sourceLayer: sourceLayer, id: hoveredStateId }, { _hover: true } ); } }); // When the mouse leaves the layer, update the feature state of the // previously hovered feature. map.on('mouseleave', layer, function() { if (hoveredStateId) { map.setFeatureState( { source: source, sourceLayer: sourceLayer, id: hoveredStateId }, { _hover: false } ); } hoveredStateId = null; }); // // Click // let selectedStateId = []; let clickStateId = null; // When the user clicks their mouse over the layer, we'll update the // feature state for the feature under the mouse. map.on('click', layer, function(e) { // console.log(e); if (e.features.length > 0) { if ( selectedStateId.length && !e.originalEvent.ctrlKey && !e.originalEvent.metaKey ) { while (selectedStateId.length) { map.removeFeatureState( { source: source, sourceLayer: sourceLayer, id: selectedStateId.slice(-1)[0] }, '_selected' ); selectedStateId.pop(); } } clickStateId = e.features[0].id; selectedStateId.push(e.features[0].id); map.setFeatureState( { source: source, sourceLayer: sourceLayer, id: selectedStateId.slice(-1)[0] }, { _selected: true } ); } }); }34:T5ad,usAdminLayers = ({ source: { 'county-points': { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-county-points' }, 'state-points': { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-state-points' }, county: { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-county' }, state: { type: 'vector', url: 'mapbox://mapbox.hist-pres-election-state' } }, layer: { 'us county': { type: 'fill', source: 'county', 'source-layer': 'historical_pres_elections_county', beforeLayer: "waterway-label", paint: { "fill-color": [ 'case', ['boolean', ['feature-state', '_selected'], false], "yellow", "hsla(0,0,20,0.5)" ], 'fill-opacity': [ 'case', ['boolean', ['feature-state', '_hover'], false], 1, 0.5 ] } }, 'us state': { type: 'line', source: 'state', 'source-layer': 'historical_pres_elections_state', beforeLayer: "waterway-label", paint: { "line-width": 0.5, "line-color": "grey" } }, 'us county line': { type: 'line', source: 'county', 'source-layer': 'historical_pres_elections_county', beforeLayer: "waterway-label", paint: { "line-width": 0.1, "line-color": "grey" } } } })35:T471,addMapPopups = function(map, layer, popupContent, options) { // Based on https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: true, closeOnMove: true }); function createPopup(e) { map.getCanvas().style.cursor = 'pointer'; var feature = e.features[0]; var coordinates = e.lngLat; var popupHTML = popupContent(feature); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup.remove(); popup .setLngLat(coordinates) .setHTML(popupHTML) .addTo(map); } // Create and remove popups based on interactivity map.on(options.popupOn, layer, createPopup); map.on('mouseleave', layer, function() { map.getCanvas().style.cursor = ''; popup.remove(); }); }36:T4dc,inspectLayer = function(map, layer, inspectContent, options) { options = Object.assign( { inspectOn: 'click', inspectOff: 'mouseleave', inspectContent: 'table', limit: 1 }, options ); function featureTable(features) { let featureTable = features.map(feature => { feature.properties['$id'] = feature.id; feature.properties['$type'] = feature.geometry.type; return feature.properties; }); return featureTable; } let container = html`

${options.placeholder}

`; let properties = {}; map.on(options.inspectOn, layer, e => { map.getCanvas().style.cursor = 'pointer'; if (options.inspectContent == 'table') { container.innerHTML = table(featureTable(e.features)); } else { container.innerHTML = inspectContent(featureTable(e.features)[0]); } // Update value container.value = e.features; container.dispatchEvent(new CustomEvent("input")); }); map.on("mouseleave", layer, e => { container.innerHTML = `

${options.placeholder}

`; map.getCanvas().style.cursor = ''; // Update value container.value = {}; container.dispatchEvent(new CustomEvent("input")); }); return container; }37:T4e3,tileData = { var height = 520; var projection = d3 .geoAzimuthalEqualArea() .center([0, 0]) .rotate([96, -40, 6]) .scale(1700) .translate([width / 2, height / 2]); var tile = d3 .tile() .size([width, height]) .scale(projection.scale() * 2 * Math.PI) .translate(projection([0, 0])); var tiles = Promise.all( tile().map(async t => { let data = new vt.VectorTile( new protobuf( await d3.buffer( `https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.hist-pres-election-county/${t.z}/${t.x}/${t.y}.mvt?sku=101esRrPXF7pO&access_token=pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiemdYSVVLRSJ9.g3lbg_eN0kztmsfIPxa9MQ` ) ) ).layers; t.data = Object.keys(data).reduce((initialData, key) => { initialData[key] = { type: "FeatureCollection", features: [...Array(data[key].length).keys()].map((item, i) => { let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z); if (key === 'water') { feature.properties['class'] = 'water'; } return feature; }) }; return initialData; }, {}); return t; }) ); return tiles; }38:[] 2f:{"title":"Mapbox GL Cartography","cells":[{"id":0,"value":"md`# Mapbox GL Cartography\nHelpful functions for the Mapbox GL notebook cartographer\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"map1.keyboard","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"viewof inspectCounty = inspectLayer(map2, \"us county\", inspectCountyContent, {\n inspectOn: \"mousemove\",\n placeholder: \"Hover over the map to view County details\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"table(inspectCounty.map(feature => feature.properties))","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"map2.getLayer('us county')","pinned":true,"hidden":false,"mode":"ojs"},{"id":966,"value":"map2.on('mousemove', e => {\n let features = map2.querySourceFeatures('us county', {\n sourceLayer: \"historical_pres_elections_county\"\n });\n console.log(features);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"inspectCountyContent = function(properties) {\n let content = '

${key} ${properties[key]}

';\n\n return content;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"countyPopupContent = function(feature) {\n return `

${feature.properties.name}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`# Map Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`### addMap\nQuickly add an interactive Mapbox GL map with default options and controls.\n\n~~~js\nimport {addMap} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"addMap = function(options) {\n options = Object.assign(\n {\n container: 'map',\n style: 'mapbox://styles/mapbox/light-v9',\n center: [-87.0413, 38.878], //[-96, 37.8],\n zoom: 3\n },\n options\n );\n\n if (!mapboxgl.accessToken && options.hasOwnProperty('accessToken')) {\n mapboxgl.accessToken = options.accessToken;\n }\n\n // Inititalize the GL map\n var map = new mapboxgl.Map(options);\n\n //\n // Add map controls\n //\n\n // Geocoder\n if (options.hasOwnProperty('geocoder')) {\n map.addControl(\n new mapboxglGeocoder({\n accessToken: mapboxgl.accessToken,\n mapboxgl: mapboxgl,\n countries: 'us'\n }),\n 'top-left'\n );\n }\n\n // Map navigation\n map.addControl(new mapboxgl.NavigationControl(), 'top-right');\n\n // Directions\n // map.addControl(\n // new mapboxglDirections({\n // accessToken: mapboxgl.accessToken,\n // unit: 'metric',\n // profile: 'mapbox/driving'\n // }),\n // 'top-left'\n // );\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`### addLayers\nQuickly custom layers\n\n~~~js\nimport {addLayers} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"addLayers = function(map, mapLayers) {\n if (mapLayers.hasOwnProperty(\"sources\")) {\n Object.keys(mapLayers.sources).forEach(id => {\n map.addSource(id, mapLayers.sources[id]);\n });\n }\n // LEGACY\n if (mapLayers.hasOwnProperty(\"source\")) {\n Object.keys(mapLayers.source).forEach(id => {\n map.addSource(id, mapLayers.source[id]);\n });\n }\n // Use a layers array\n if (mapLayers.hasOwnProperty(\"layers\")) {\n mapLayers.layers.forEach(layer => {\n map.addLayer(\n layer,\n layer.hasOwnProperty(\"beforeLayer\") ? layer[\"beforeLayer\"] : null\n );\n });\n }\n // LEGACY: Use a layers object\n if (mapLayers.hasOwnProperty(\"layer\")) {\n Object.keys(mapLayers.layer).forEach(id => {\n map.addLayer(\n Object.assign(\n {\n id: id\n },\n mapLayers.layer[id]\n ),\n mapLayers.layer[id].hasOwnProperty(\"beforeLayer\")\n ? mapLayers.layer[id][\"beforeLayer\"]\n : null\n );\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"md`### duplicateLayer\n\nDuplicate an existing layer\n\n~~~js\nimport {duplicateLayer} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"duplicateLayer = function(map, LayerId, layer, beforeId) {\n map.addLayer(\n Object.assign(\n {\n source: map.getLayer(LayerId).source,\n 'source-layer': map.getLayer(LayerId).sourceLayer\n },\n layer\n ),\n typeof beforeId !== undefined ? beforeId : null\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`### addPopup\n\nAdd popups for a layer on interaction\n\n~~~js\nimport {addPopup} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`### inspectLayer\n\nInspect layer features on interaction\n\n~~~js\nimport {inspectLayer} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`### findLayers\n\nFind layers that match a given filter criteria\n\n~~~js\nimport {findLayers} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"findLayers(map1, function(layer) {\n return layer['source-layer'] == 'place_label';\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"findLayers(map1, function(layer) {\n return (\n layer.hasOwnProperty('layout') && layer.layout.hasOwnProperty('text-font')\n );\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"findLayers(map1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"// Returns an array of map style layers that match a given filter function\nfunction findLayers(map, filterFn) {\n return map.getStyle().layers.filter(layer => {\n return filterFn ? filterFn(layer) : layer;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"md`### clickedFeatures\n\nGet map features that were clicked\n\n~~~js\nimport {clickedFeatures} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"// Forked from https://observablehq.com/@robinsummerhill/observable-mapbox-gl-js\n\nfunction clickedFeatures(map, options) {\n options = Object.assign(\n {\n layers: null,\n event: \"click\"\n },\n options\n );\n\n let layerId = options.layers;\n\n if (typeof options.layers === 'string') options.layers = [options.layers];\n\n return Generators.observe(notify => {\n const queryFeatures = event => {\n const features = map.queryRenderedFeatures(event.point, {\n layers: options.layers\n });\n \n notify(\n features.map(feature => ({\n properties: feature.properties,\n layer: feature.layer\n }))\n );\n };\n\n map.on(options.event, layerId, queryFeatures);\n\n // Notify initial value\n notify([]);\n\n return () => {\n // Clean up by removing click handler\n map.off(options.event, queryFeatures);\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`# Data Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"md`### search\n\nUse the [Mapbox Geocoding API](https://docs.mapbox.com/search-playground/) to search for a location using an input string. Copied from https://observablehq.com/@mbostock/mapbox-fly-to\n\n~~~js\nimport {search} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"viewof query = text({\n placeholder: \"Placeholder text\",\n description: \"This input only changes value on submit\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"ct = fetch(\n `https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(\n query\n )}.json?access_token=${mapboxgl.accessToken}`\n).then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`### geoCode \nAdd spatial properties to your data\n\n~~~js\nimport {geoCode} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"d3.tile()","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`# Style Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### styleData \nTurn your data into Mapbox GL data driven style expressions\n\n~~~js\nimport {styleData} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"// Builds a Mapbox GL style expression from the input data\n\nfunction styleData(data, joinExpression, styleExpression, fallbackValue) {\n var expression = [\"case\"];\n\n Object.keys(data).forEach(key => {\n var row = data[key];\n\n // Value for tile features with joinable data\n expression.push(joinExpression(row, key));\n expression.push(styleExpression(row));\n });\n\n // Fallback value for tile features with no data\n expression.push(fallbackValue);\n\n return expression;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"// Return a list of layers in the style that matches a given filter object\ngetLayers = function(map, filter) {\n var layers = map.getStyle().layers;\n var filteredLayers = [];\n\n Object.keys(layers).forEach(l => {\n Object.keys(filter).forEach(k => {\n if (layers[l].hasOwnProperty(k) && layers[l][k] == filter[k]) {\n filteredLayers.push(layers[l]);\n }\n });\n });\n\n return filteredLayers;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"addLayersFromStyle = function(map, layers, style) {\n let json = d3.json(\n 'https://api.mapbox.com/styles/v1/planemad/ck8zyb4jg0fq21ir3ctmug773?access_token=pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiemdYSVVLRSJ9.g3lbg_eN0kztmsfIPxa9MQ'\n );\n\n // map.addLayer();\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"addLayersFromStyle()","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`# Camera Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`### fitFeatures \nTurn your data into Mapbox GL data driven style expressions\n\n~~~js\nimport {fitFeatures} from \"@planemad/mapbox-gl-cartography\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"fitFeatures = function(map, features) {\n var bounds = turf.bbox(turf.featureCollection(features));\n map.fitBounds(bounds);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`# Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### Mapbox GL \nInclude latest Mapbox GL JS libraries and CSS to your notebook\n\n~~~js\nimport {mapboxgl} with {accessToken} from \"@planemad/mapbox-gl-cartography\"\n~~~\n\nWhere accessToken is a cell in your notebook with your own Mapbox access token. [Signup for one](https://www.mapbox.com/pricing) if you don't have one already.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"accessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl');\n\n if (!mapboxgl.accessToken) {\n mapboxgl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"mapboxglGeocoder = {\n let mapboxglGeocoder = await require('https://bundle.run/@mapbox/mapbox-gl-geocoder@4.6.0');\n\n const href = await require.resolve(\n \"@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css\"\n );\n document.head.appendChild(html``);\n return mapboxglGeocoder;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"mapboxglDirections = {\n let mapboxglDirections = await require('@mapbox/mapbox-gl-directions@4.0.3/dist/mapbox-gl-directions.js');\n\n const href = await require.resolve(\n \"https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css\"\n );\n document.head.appendChild(html``);\n return mapboxglDirections;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`### Helpers \nCommon functions to help with Mapbox cartography\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"d3 = require(\"d3\", \"d3-tile\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":687,"value":"protobuf = require('pbf/dist/pbf.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"import { table } from \"@gampleman/table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":997,"value":"import { text, autoSelect } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"sampleData_covidUsCounty = d3.csv(\n \"https://raw.githubusercontent.com/nytimes/covid-19-data/master/us-counties.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`### Other resources\n\nhttps://observablehq.com/@robinsummerhill/observable-mapbox-gl-js\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}