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/streets-v11', // stylesheet location center: [-74.5, 40], // starting position [lng, lat] zoom: 9 // starting zoom }); // Wait until the map loads. map.on("load", () => { // // Add custom map code here // 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:T47a,viewof map2 = { const container = html`

`; // Describe the map view const leftPane = html`

A custom map

All customizations of the map can be done within the map cell. Here we set a custom camera position and change the style Mapbox GL examples.

`; container.appendChild(leftPane); // 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", () => { // Build your map here // addLayers(map, customLayers); // Assign map object to the cell 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:[] 2e:{"title":"OSM Auth playground","cells":[{"id":0,"value":"md`# OSM Auth playground\n\nPlayground for OSM API https://wiki.openstreetmap.org/wiki/API_v0.6\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"$31","pinned":false,"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":689,"value":"md`## OSM Auth`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"redirectPath = window.location.origin + window.location.pathname","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"auth = osmAuth.osmAuth({\n client_id: \"JnPQpNyzQ5O0Re4YEBf80CljtzVB8kYep64INu84kQ0\",\n client_secret: \"x3Hdu29zOaTHR6ouSVACU2h6Q32KXYO5qR8azz070v8\",\n redirect_uri: redirectPath,\n scope: \"read_prefs\",\n auto: true // show a login form if the user is not authenticated and you try to do a call\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"auth.xhr(\n { method: \"GET\", path: \"/api/0.6/user/details\" },\n function (err, result) {\n // result is an XML DOM containing the user details\n return result;\n }\n)","pinned":true,"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":55,"value":"mapLayers = map2.getStyle().layers","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":682,"value":"osmAuth = import(\"https://cdn.skypack.dev/osm-auth@2.0.1?min\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}