A simple map

Here we follow the getting started example to create a map with a starting camera location and one of the default map styles.

Map styles can be edited online using the Mapbox Studio editor.

This cell creates the interactive GL map view and returns the map object that can be used to interact with the data and layers via the Mapbox GL JS API.

`; container.appendChild(leftPane); container.appendChild( html`

` ); yield container; // Inititalize the GL map let map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/light-v10', // stylesheet location center: [24.9103, 60.2280], zoom: 13 }); // Wait until the map loads. map.on("load", () => { map.addSource('reveal-points', { type: 'geojson', data: { type: "FeatureCollection", features: [] } }); map.addLayer(mapLayers['reveal-heatmap']); 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()); }31:[] 2e:{"title":"Reveal Map","cells":[{"id":0,"value":"md`# Reveal Map\n\nStarter notebook template to create an interactive [Mapbox GL map](https://docs.mapbox.com/mapbox-gl-js/examples/) based on https://observablehq.com/@tmcw/using-mapbox-gl-js\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"mapLayers = ({\n \"reveal-heatmap\": {\n id: 'reveal-heatmap',\n type: 'heatmap',\n source: 'reveal-points',\n maxzoom: 24,\n paint: {\n // Increase the heatmap weight based on frequency and property magnitude\n 'heatmap-weight': 1,\n // Increase the heatmap color weight weight by zoom level\n // heatmap-intensity is a multiplier on top of heatmap-weight\n 'heatmap-intensity': 1,\n // Color ramp for heatmap. Domain is 0 (low) to 1 (high).\n // Begin color ramp at 0-stop with a 0-transparancy color\n // to create a blur-like effect.\n 'heatmap-color': [\n \"interpolate\",\n [\"linear\"],\n [\"heatmap-density\"],\n 0,\n \"hsl(0, 0%, 19%)\",\n 0.1,\n \"hsla(0, 0%, 24%, 0.59)\",\n 1,\n \"hsla(0, 100%, 50%, 0)\"\n ],\n // Adjust the heatmap radius by zoom level\n 'heatmap-radius': 15,\n // Transition from heatmap to circle layer by zoom level\n 'heatmap-opacity': 1\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"viewof mousePosition = {\n var container = html``;\n\n map.on('mousemove', function(e) {\n let points = map.getSource('reveal-points')._data;\n points = turf.simplify(points, { tolerance: 5 });\n points.features.push({\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: e.lngLat.toArray()\n }\n });\n map.getSource('reveal-points').setData(points);\n console.log(e.lngLat);\n console.log(points);\n\n container.innerHTML =\n // e.point is the x, y coordinates of the mousemove event relative\n // to the top-left corner of the map\n JSON.stringify(e.point) +\n '
' +\n // e.lngLat is the longitude, latitude geographical position of the event\n JSON.stringify(e.lngLat.wrap());\n container.value = {\n point: e.point,\n lngLat: e.lngLat\n };\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`Add custom data layers [from a geojson](https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"customLayers = ({\n source: {\n 'geojson-data': {\n type: 'geojson',\n data: geojson\n }\n },\n layers: [\n {\n id: 'points',\n type: 'symbol',\n source: 'geojson-data',\n layout: {\n // get the icon name from the source's \"icon\" property\n // concatenate the name to get an icon from the style's sprite sheet\n 'icon-image': ['concat', ['get', 'icon'], '-15'],\n // get the title name from the source's \"title\" property\n 'text-field': ['get', 'title'],\n 'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],\n 'text-offset': [0, 0.6],\n 'text-anchor': 'top'\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"geojson = ({\n type: 'FeatureCollection',\n features: [\n {\n // feature for Mapbox DC\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [-77.03238901390978, 38.913188059745586]\n },\n properties: {\n title: 'Mapbox DC',\n icon: 'monument'\n }\n },\n {\n // feature for Mapbox SF\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [-122.414, 37.776]\n },\n properties: {\n title: 'Mapbox SF',\n icon: 'harbor'\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"md`## Customize the map\n\nThe GL map is composed of various layers, each having a data source, data filters and styling defined to give the final output. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`## Setup\n\nReplace the \"mapboxgl.accessToken\" with one from your [Mapbox account](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Its recommended to create a new token with a URL scope to observable account \"https://USERNAME.static.observableusercontent.com\" to prevent misuse.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"mapboxglAccessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"import { mapboxgl } with {\n mapboxglAccessToken as accessToken\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`Option Mapbox GL JS helper function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {\n addMap,\n addLayers,\n duplicateLayer,\n inspectLayer,\n addMapPopups\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"turf = require('@turf/turf')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}