3f:null 40:["$","title",null,{"children":"Using Mapbox GL JS (Part 2) | Dieter Pfoser | Observable"}] 46:T8e1,md`## Popups -> (BP 5) [Codepen version](https://codepen.io/pfoser/pen/poowqaY) Bulding on the previous example, we want to add a **popup element** to the \`\`unclustered-point\`\` layer. In our specific case, we want a popup to show up when hovering above an icon. The following code creates a popup template. \`\`\`javascript // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); \`\`\` We want to make the popup appear when the mouse hovers over the marker. We can capture the \`\`\mouseenter\`\`\ event, i.e., the mouse moves over the marker to make the popup appear. The shown content is a concatenated string consisting of the name and kind, e.g., Alcatraz - HSTS. A nice touch is also that we change the cursor from the default hand to a pointer. Some math goes into guaranteeing that the popup shows up only once when zooming out and a marker would appear more than once such as in the following example.

\`\`\`javascript // single location markers // See also https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ map.on("mouseenter", "unclustered-point", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.name + " - " + e.features[0].properties.kind; // 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 .setLngLat(coordinates) .setHTML(description) .addTo(map); }); \`\`\` Once the mouse pointer leaves the marker, remove the popup. The cursor is changed back to the default (hand). \`\`\`javascript map.on("mouseleave", "unclustered-point", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); \`\`\` `47:T1960,viewof map5a = { var container = html`

` var filter = html`

` var content = html`

${container} ${filter}

` yield content // let filter = html`` // let container = html`

`; // Give the container dimensions. // yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/light-v10", center: [-122.4102, 37.79], zoom: 12, pitch: 0, bearing: 83, antialias: true }); var filterInput = document.getElementById("filter-input"); fetch( "https://dl.dropboxusercontent.com/s/qz5n0pltt4pl0ki/geonames_ca.geojson" ) .then(response => { return response.json(); // check whether the reply is json }) .then(poi_data => { // if promise fulfilled, i.e., json // console.log("Number of Feature: ", geonames_data.features.length); console.log(poi_data.features.length); map.on("load", function() { // Add a new source from our GeoJSON data and set the // 'cluster' option to true. GL-JS will add the point_count property to your source data. map.addSource("poi-clusters", { type: "geojson", data: poi_data, cluster: true, clusterMaxZoom: 14, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) }); map.addLayer({ id: "poi-clusters", type: "circle", source: "poi-clusters", filter: ["has", "point_count"], paint: { // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) // with three steps to implement three types of circles: // * Blue, 20px circles when point count is less than 100 // * Yellow, 30px circles when point count is between 100 and 750 // * Pink, 40px circles when point count is greater than or equal to 750 "circle-color": [ "step", ["get", "point_count"], "#51bbd6", 100, "#f1f075", 750, "#f28cb1" ], "circle-radius": [ "step", ["get", "point_count"], 20, 100, 30, 750, 40 ] } }); map.addLayer({ id: "cluster-count", type: "symbol", source: "poi-clusters", filter: ["has", "point_count"], layout: { "text-field": "{point_count_abbreviated}", "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12 } }); map.addLayer({ id: "unclustered-point", type: "circle", source: "poi-clusters", filter: ["!", ["has", "point_count"]], paint: { "circle-color": "#11b4da", "circle-radius": 4, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // NEW FUNCTIONALITY // inspect a cluster on click map.on("click", "poi-clusters", function(e) { var features = map.queryRenderedFeatures(e.point, { layers: ["poi-clusters"] }); var clusterId = features[0].properties.cluster_id; map .getSource("poi-clusters") .getClusterExpansionZoom(clusterId, function(err, zoom) { if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); }); }); // Attaching mouse events to map // clusters map.on("mouseenter", "poi-clusters", function() { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "poi-clusters", function() { map.getCanvas().style.cursor = ""; }); //POPUP // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // single location markers // See also https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ map.on("mouseenter", "unclustered-point", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.name + " - " + e.features[0].properties.kind; // 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 .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on("mouseleave", "unclustered-point", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); filterInput.addEventListener("keypress", function(e) { // If the input value matches a layerID set // it's visibility to 'visible' or else hide it. var key = e.which || e.keyCode; if (key === 13) { // 13 is enter - if key is enter key, read out value of text field var term = e.target.value.trim().toLowerCase(); console.log(term); var filteredFeatures = poi_data.features.filter(function(feature) { return feature.properties.name.toLowerCase().includes(term); }); var filteredFeatureCollection = { type: "FeatureCollection", features: filteredFeatures }; map.getSource("poi-clusters").setData(filteredFeatureCollection); } }); //filterInput }); }) .catch(err => { console.log("Erro loading data: ", err); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); }48:T403,md` In addition to popups, the code above also adds some functionality to the clusters: * using the \`\`\ map.easeTo\`\` function, zoom to the cluster extent * change the cursor from a "hand" to a "pointer" \`\`\`javascript map.on("click", "poi-clusters", function(e) { var features = map.queryRenderedFeatures(e.point, { layers: ["poi-clusters"] }); var clusterId = features[0].properties.cluster_id; map .getSource("poi-clusters") .getClusterExpansionZoom(clusterId, function(err, zoom) { if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); }); }); // Attaching mouse events to map // clusters map.on("mouseenter", "poi-clusters", function() { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "poi-clusters", function() { map.getCanvas().style.cursor = ""; }); \`\`\` `49:T772,md`## Data driven markers -> (BP 5b) [Codepen version](https://codepen.io/pfoser/pen/oNNwOeL) Ok, now let's get rid of the blue circle markers and add markers that relate to the type of object shown. The following code creates similar to before the \`\`unclustered-point\`\` layer. \`\`\`javascript // NEW FUNCTIONALITY map.addLayer({ id: "unclustered-point", type: "symbol", source: "poi-clusters", filter: ["!", ["has", "point_count"]], layout: { "icon-image": ['get', 'symbol2'], "icon-size":2 } \`\`\` This time instead of a \`\` type: "circle" \`\` marker we use a \`\` type: "symbol" \`\`. The question is which one? The answer is given in \`\`layout: {"icon-image": ['get', 'symbol2'],...\`\`. Essentially this statement checks \`\`properties.symbol2\`\` for a label referring to a set of symbols that come bre-built with Mapbox GL. The following image shows a screenshot from the geonames_ca table. The symbol2 attribute mentions labels such as \`\`park-15\`\`\, which were derived (manually) from the kind attribute that was part of the original dataset.

The symbol2 label directly relates to icons that are part of the Mapbox dataset, i.e., [Default Mapbox icons](https://github.com/mapbox/mapbox-gl-styles). For more information on this topic read also the following posts on [Stack Overflow](https://stackoverflow.com/). * [Where do Mapbox icons come from ](https://stackoverflow.com/questions/51481471/adding-custom-icons-for-each-feature-in-feature-collection-with-mapbox-gl-js) and * [Adding custom icons for each feature in feature collection with mapbox-gl-js](https://gis.stackexchange.com/questions/179255/mapbox-gl-addlayer-where-are-the-icon-images-coming-from) `4a:T1934,viewof map5b = { var container = html`

` var filter = html`

` var content = html`

${container} ${filter}

` yield content // let filter = html`` // let container = html`

`; // Give the container dimensions. // yield container; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/light-v10", center: [-122.4102, 37.79], zoom: 12, pitch: 0, bearing: 83, antialias: true }); var filterInput = document.getElementById("filter-input"); fetch( "https://dl.dropboxusercontent.com/s/qz5n0pltt4pl0ki/geonames_ca.geojson" ) .then(response => { return response.json(); // check whether the reply is json }) .then(poi_data => { // if promise fulfilled, i.e., json // console.log("Number of Feature: ", geonames_data.features.length); console.log(poi_data.features.length); map.on("load", function() { // Add a new source from our GeoJSON data and set the // 'cluster' option to true. GL-JS will add the point_count property to your source data. map.addSource("poi-clusters", { type: "geojson", data: poi_data, cluster: true, clusterMaxZoom: 14, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) }); map.addLayer({ id: "poi-clusters", type: "circle", source: "poi-clusters", filter: ["has", "point_count"], paint: { // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) // with three steps to implement three types of circles: // * Blue, 20px circles when point count is less than 100 // * Yellow, 30px circles when point count is between 100 and 750 // * Pink, 40px circles when point count is greater than or equal to 750 "circle-color": [ "step", ["get", "point_count"], "#51bbd6", 100, "#f1f075", 750, "#f28cb1" ], "circle-radius": [ "step", ["get", "point_count"], 20, 100, 30, 750, 40 ] } }); map.addLayer({ id: "cluster-count", type: "symbol", source: "poi-clusters", filter: ["has", "point_count"], layout: { "text-field": "{point_count_abbreviated}", "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12 } }); // NEW FUNCTIONALITY map.addLayer({ id: "unclustered-point", type: "symbol", source: "poi-clusters", filter: ["!", ["has", "point_count"]], layout: { "icon-image": ['get', 'symbol2'], "icon-size":2 } }); // NEW FUNCTIONALITY // inspect a cluster on click map.on("click", "poi-clusters", function(e) { var features = map.queryRenderedFeatures(e.point, { layers: ["poi-clusters"] }); var clusterId = features[0].properties.cluster_id; map .getSource("poi-clusters") .getClusterExpansionZoom(clusterId, function(err, zoom) { if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); }); }); // Attaching mouse events to map // clusters map.on("mouseenter", "poi-clusters", function() { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "poi-clusters", function() { map.getCanvas().style.cursor = ""; }); //POPUP // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // single location markers // See also https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/ map.on("mouseenter", "unclustered-point", function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = "pointer"; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.name + " - " + e.features[0].properties.kind; // 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 .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on("mouseleave", "unclustered-point", function() { map.getCanvas().style.cursor = ""; popup.remove(); }); filterInput.addEventListener("keypress", function(e) { // If the input value matches a layerID set // it's visibility to 'visible' or else hide it. var key = e.which || e.keyCode; if (key === 13) { // 13 is enter - if key is enter key, read out value of text field var term = e.target.value.trim().toLowerCase(); console.log(term); var filteredFeatures = poi_data.features.filter(function(feature) { return feature.properties.name.toLowerCase().includes(term); }); var filteredFeatureCollection = { type: "FeatureCollection", features: filteredFeatures }; map.getSource("poi-clusters").setData(filteredFeatureCollection); } }); //filterInput }); }) .catch(err => { console.log("Erro loading data: ", err); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); }4b:T59c,md ` ## Heatmap -> (BP 6) [Codepen version](https://codepen.io/pfoser/pen/abbyqrV) In the following example, we are replacing the clusters with a heatmap. The code is based on this [Heatmap intro for Mapbox GL](https://docs.mapbox.com/help/tutorials/make-a-heatmap-with-mapbox-gl-js/). This article discusses the various parameters that can be set to change the visual appearance of the heatmap. The example uses two layers, (i) \`\` poi-heat\`\` - the actual heatmap layer and (ii) \`\`poi-points\`\` - showing the actual locations beyond a certain zoom level. In our case the transition between heatmap and points happens at zoom level 14 (points appear) - 15 (heatmap starts to disappear). *Find in the code how this transition is implemented!* The code also includes a small utility function that outputs the zoom level to the console, each time the zoom is changed. \`\`\`javascript map.on("zoom", function() { console.log(map.getZoom()); }); \`\`\` Now we are ready to combine the heatmap with a filter. -> (BP 6a) [Codepen version](https://codepen.io/pfoser/pen/bGGrMGR) *Try searching for beach, peak, valley, park, etc. to see the heatmap change (really fast).* ### Examples * [Heatmap examples for earthquakes](https://docs.mapbox.com/mapbox-gl-js/example/heatmap-layer/) * [Mapbox Tutorial: Heatmap using GL JS](https://medium.com/@mzdraper/mapbox-tutorial-heatmap-using-gl-js-bc2e5199d630) `4c:Ta88,viewof map6 = { var container = html`

` var content = html`

${container}

` var check = html`` var content = html`

${container} ${check}

` yield content // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/light-v10", center: [-122.4102, 37.79], zoom: 12, pitch: 0, bearing: 83, antialias: true }); var filterInput = document.getElementById("filter-input"); fetch( "https://dl.dropboxusercontent.com/s/qz5n0pltt4pl0ki/geonames_ca.geojson" ) .then(response => { return response.json(); // check whether the reply is json }) .then(poi_data => { // if promise fulfilled, i.e., json // console.log("Number of Feature: ", geonames_data.features.length); console.log(poi_data.features.length); map.on("load", function() { // NEW // heatmap data source // CREATE TWO LAYERS - CLUSTER AND HEATMAP // HEATMAP data source map.addSource("poi-heatmap", { data: poi_data, type: "geojson" }); // heatmap cluster layer map.addLayer({ id: "poi-heat", type: "heatmap", source: "poi-heatmap", maxzoom: 15, layout: { visibility: "none" }, paint: { // increase intensity as zoom level increases "heatmap-intensity": { stops: [[11, 1], [15, 3]] }, // assign color values be applied to points depending on their density "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(33,102,172,0)", 0.2, "rgb(103,169,207)", 0.4, "rgb(209,229,240)", 0.6, "rgb(253,219,199)", 0.8, "rgb(239,138,98)", 1, "rgb(178,24,43)" ], // increase radius as zoom increases "heatmap-radius": { stops: [[11, 8], [15, 12]] }, // decrease opacity to transition into the circle layer "heatmap-opacity": { default: 1, stops: [[14, 1], [15, 0]] } } }); map.addLayer({ id: "poi-points", type: "circle", source: "poi-heatmap", minzoom: 14, layout: { visibility: "none" }, "circle-opacity": { stops: [[14, 0], [15, 1]] }, paint: { "circle-color": "#11b4da", "circle-radius": 6, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // CLUSTER LAYER // Add a new source from our GeoJSON data and set the // 'cluster' option to true. GL-JS will add the point_count property to your source data. map.addSource("poi-clusters", { type: "geojson", data: poi_data, cluster: true, clusterMaxZoom: 14, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) }); map.addLayer({ id: "poi-clusters", type: "circle", source: "poi-clusters", filter: ["has", "point_count"], layout: { visibility: "visible" }, paint: { // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) // with three steps to implement three types of circles: // * Blue, 20px circles when point count is less than 100 // * Yellow, 30px circles when point count is between 100 and 750 // * Pink, 40px circles when point count is greater than or equal to 750 "circle-color": [ "step", ["get", "point_count"], "#51bbd6", 250, "#f1f075", 1000, "#f28cb1" ], "circle-radius": [ "step", ["get", "point_count"], 20, 250, 30, 1000, 40 ] } }); map.addLayer({ id: "cluster-count", type: "symbol", source: "poi-clusters", filter: ["has", "point_count"], layout: { visibility: "visible", "text-field": "{point_count_abbreviated}", "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12 } }); map.addLayer({ id: "unclustered-point", type: "circle", source: "poi-clusters", filter: ["!", ["has", "point_count"]], layout: { visibility: "visible" }, paint: { "circle-color": "#11b4da", "circle-radius": 10, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // we will use this to toggle all the CLUSTER layers layers on and off. var clusterLayers = [ "poi-clusters", "cluster-count", "unclustered-point" ]; // we will use this to toggle all the HEATMAP layers layers on and off. var heatLayers = [ "poi-heat", "poi-points" ]; // CONTROL LAYER // gets triggered when check boxes change function switchLayer(layer) { var clickedLayersLabel = layer.target.id; // get the label of the layer cluster var clickedLayers = eval(clickedLayersLabel); // create the variable from the label using the eval function var visibility = map.getLayoutProperty(clickedLayers[0], "visibility"); // check whether the cluster of layers is visible by checking the first entry if (visibility === "visible") { hideLayerGroups(clickedLayers); } else { showLayerGroups(clickedLayers); } } function hideLayerGroups(clickedLayers) { clickedLayers.forEach(layer => { map.setLayoutProperty(layer, "visibility", "none"); }); } function showLayerGroups(clickedLayers) { clickedLayers.forEach(layer => { map.setLayoutProperty(layer, "visibility", "visible"); }); } // attach listener to all checkboxes var layerList = document.getElementById("menu"); var checkboxes = layerList.getElementsByTagName("input"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].onclick = switchLayer; } }); }) .catch(err => { console.log("Erro loading data: ", err); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); }4f:T466,html``50:[] 44:{"id":"aa9b48540dac546b","slug":"using-mapbox-gl-js-part-2","title":"Using Mapbox GL JS (Part 2)","thumbnail":"046decccbe40ec27351669576278a2cb6c55ac13f45ab6ccc4a790ad22f28939","access_level":"public","create_time":"$D2019-10-27T19:15:25.103Z","update_time":"$D2025-06-06T13:18:20.326Z","view_time":null,"first_public_time":"$D2019-10-27T19:24:06.377Z","has_unpublished_edits":null,"fork":{"id":"ac4694b192417887","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS (Part 1)","owner":{"id":"625c996794dd81cc","login":"pfoser","name":"Dieter Pfoser"}},"stars":4,"starred":false,"owner":{"type":"team","id":"625c996794dd81cc","login":"pfoser","name":"Dieter Pfoser","avatar_url":"https://avatars-next.observableusercontent.com/e3a53a0ea8b634cdf39f31fb43613b84029986f37920cf3ef6f259e6625a0caf","tier":"starter_2024","bio":"","following":false},"version":598,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f49f03248c930e0","login":"pfoser","name":"Dieter Pfoser","avatar_url":"https://avatars-next.observableusercontent.com/e3a53a0ea8b634cdf39f31fb43613b84029986f37920cf3ef6f259e6625a0caf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"4f49f03248c930e0","login":"pfoser","name":"Dieter Pfoser","avatar_url":"https://avatars-next.observableusercontent.com/e3a53a0ea8b634cdf39f31fb43613b84029986f37920cf3ef6f259e6625a0caf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Using Mapbox GL JS (Part 2)","cells":[{"id":0,"value":"md`# Using Mapbox GL JS (Part 2)\n\nFollowing [Part 1](https://observablehq.com/@pfoser/using-mapbox-gl-js) of this Mapbox GL tutorial, the following examples focus on interactions with the data such as popups and user interface elements.\n\n### Useful links (persistent from last time)\n* [Mapbox GL examples](https://docs.mapbox.com/mapbox-gl-js/examples/) - many, many examples... top menu on this page has links to API Reference and Overview pages as well.\n* Good [mapbox examples in observable](https://observablehq.com/@benjaminadk/mapbox-tutorials)\n* [Views](https://observablehq.com/@observablehq/introduction-to-views) (**viewof**) in observable, or how we make things show up?\n* Observable uses [generators](https://observablehq.com/@observablehq/introduction-to-generators) (**yield**) to represent values that change over time. Generators enable interaction, animation, realtime data streaming, and all the other exciting, dynamic capabilities of Observable notebooks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`\n## Housekeeping\n### How do we add the mapbox library?\n\nMapbox GL JS can also be loaded from Mapbox's CDN, but it works perfectly well loaded from unpkg, and that's how we load most things, so... I load it from there. Like Leaflet, it needs both JavaScript and CSS to properly function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoiZHBmb3NlciIsImEiOiJjazlxaHRvbmMwazR2M2Vwbmpha3I5c28yIn0.nklv92j_cl0t2HsHD579AQ\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`### Styles used in the above code.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 45:"$44:body"