3f:null 40:["$","title",null,{"children":"Using Mapbox GL JS (Part 1) | Dieter Pfoser | Observable"}] 46:T707,md`# Using Mapbox GL JS (Part 1) There is a [Part 2](https://observablehq.com/@pfoser/using-mapbox-gl-js-part-2) to this tutorial. [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/overview/) is a modern library for web maps, developed by [Mapbox](http://mapbox.com/). Using it is similar to [Leaflet](http://leafletjs.com/), with a few notable differences: - Mapbox GL JS is a vector-based library. Instead of displaying image tiles rendered by a server, it renders vector tiles in the browser. This means that it does not rely on discrete zoom levels, and all aspects of the map style are changeable within the library. - Vector tiles are quite a bit different than image tiles, and different organizations and companies supply them. This example uses vector tiles from Mapbox themselves, but there are other sources. If you'd like to use Mapbox's tile service, you'll need to register for an access token on their site. *The token used in those examples is my personal one...* ### Useful links * [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. * Good [mapbox examples in observable](https://observablehq.com/@benjaminadk/mapbox-tutorials) * [Views](https://observablehq.com/@observablehq/introduction-to-views) (**viewof**) in observable, or how we make things show up? * 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. * [Mapbox Styles](https://docs.mapbox.com/api/maps/styles/), i.e., different types of background maps `47:T599,viewof map1a = { 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/streets-v10", center: [-122.4102, 37.79], zoom: 15.7, pitch: 65, bearing: 83, antialias: true }); map.on("load", function() { // Insert the layer beneath any symbol layer. map.addLayer({ id: "3d-buildings", source: "composite", "source-layer": "building", filter: ["==", "extrude", "true"], type: "fill-extrusion", minzoom: 14, paint: { "fill-extrusion-color": "#aaa", // use an 'interpolate' expression to add a smooth transition effect to the // buildings as the user zooms in "fill-extrusion-height": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"] ], "fill-extrusion-base": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"] ], "fill-extrusion-opacity": 0.3 } }); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); map.on("mousemove", e => { container.value = e.lngLat; container.dispatchEvent(new CustomEvent("input")); }); }48:Ta8c,md`## 3D Buildings with data -> (BP 3a) [Codepen version](https://codepen.io/pfoser/pen/vYYyVEB) This is example uses Geonames data for California (a total of 121,000 entries). ### Clustering markers Mapbox provides a nice way of clustering markers (no MarkerClusters are needed anymore) by simply adding properties to the data layer. Read more about about clusters in this [nice tutorial](https://www.jerriepelser.com/tutorials/airport-explorer/mapping/clustering/). **TIP**: Adjust the [paint properties](https://docs.mapbox.com/help/glossary/layout-paint-property/) of layers to make them visually more interesting. This [simple codepen example](https://codepen.io/pfoser/pen/JjjEywZ) does not use clusters, but shows all locations as circle markers with \`\`'circle-opacity': 0.5 \`\`. ### Data The data is a GeoJSON dataset. The specific URL is [https://dl.dropboxusercontent.com/s/qz5n0pltt4pl0ki/geonames_ca.geojson](https://dl.dropboxusercontent.com/s/qz5n0pltt4pl0ki/geonames_ca.geojson) ### fetch and promises (instead of $.getJSON) This code uses \`\`fetch\`\` to retrieve the GeoJSON data. \`\`fetch\`\` tries to retrieve content from the specified URL returns what is called a **promise**, which in Javascript is an object that represents the eventual completion (or failure) of an asynchronous operation. The basic anatomy of such a request is as follows: \`\`\` fetch("https://some.url/somedata.json") .then(response => response.json()) // Convert response to JSON .then(data => console.log(data)) // Handle successful data retrieval .catch(error => console.log("Error:", error)); // Handle errors \`\`\` The \`\`.then()\`\` method handles the success case. The \`\`.catch()\`\` method handles the error case. The \`\`.finally()\`\` method always runs (success or failure). In the above example the two \`\`.then()\`\` methods are chained, i.e., if fetch retrieves data, then this data is first parsed as JSON data. If that is also successful, the data is shown on the console. Our mapping example does something similar. It first parses the data as JSON data and then creates the varous layers from it (second then statement). Each \`\`.then()\`\` clause uses an anonymous function and here a shortcut notation, the arrow notation (=>). This notation is simply shortcut for a function that does not need a name and only encapsulates some functionality. The following two notations are equivalent. the keyword \`\`function\`\` is replaced by \`\`=>\`\`. Arrow function notation \`\`\` .then(response => { return response.json(); }) \`\`\` Classic function notation (long form) \`\`\` .then(function(response) { return response.json(); }) \`\`\` `49:Tf49,viewof map3a = { 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/streets-v10", center: [-122.4102, 37.79], zoom: 15.7, pitch: 65, bearing: 83, antialias: true }); 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() { map.addLayer({ id: "3d-buildings", source: "composite", "source-layer": "building", filter: ["==", "extrude", "true"], type: "fill-extrusion", minzoom: 15, paint: { "fill-extrusion-color": "#aaa", // use an 'interpolate' expression to add a smooth transition effect to the // buildings as the user zooms in "fill-extrusion-height": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"] ], "fill-extrusion-base": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"] ], "fill-extrusion-opacity": 0.6 } }); // 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: 16, // 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" } }); }); }) .catch(err => { console.log("Erro loading data: ", err); }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); }4a:T6cf,md`## 3D Buildings with data and filter -> (BP 4a) [Codepen version](https://codepen.io/pfoser/pen/ExxNbPj) Bulding on the above example, introduce a search filter that allows us to filter the data. The html element: \`\`\`html

\`\`\` Javascript code that attaches to text field. \`\`\`javascript var filterInput = document.getElementById("filter-input"); 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 \`\`\` Essentially, once the Enter key is pressed the content of the field is read, trimmed (whitespace, etc removed), and converted to lowercase -> \`\`term\`\` variable. \`\`poi_data.features\`\` contains the 121k objects/features that are shown. We now store the ones that contain (\`\`include\`\`) the \`\`term\`\` in \`\`var filteredFeatures\`\`. Since the \`\`map\`\` object expects a FeatureCollection, we create one. Finally, the data of \`\`map\`\` is switched out with \`\`map.getSource("poi-clusters").setData(filteredFeatureCollection)\`\`. `4b:T1444,viewof map4a = { 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: 65, 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() { map.addLayer({ id: "3d-buildings", source: "composite", "source-layer": "building", filter: ["==", "extrude", "true"], type: "fill-extrusion", minzoom: 15, paint: { "fill-extrusion-color": "#aaa", // use an 'interpolate' expression to add a smooth transition effect to the // buildings as the user zooms in "fill-extrusion-height": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"] ], "fill-extrusion-base": [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"] ], "fill-extrusion-opacity": 0.6 } }); // Add a new source from our GeoJSON data and set the // map.addSource("poi-clusters", { type: "geojson", data: poi_data, cluster: true, //'cluster' option true. GL-JS will add the point_count property to your source data. 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" } }); 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(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"); }4c:T466,html``4d:[] 44:{"id":"ac4694b192417887","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS (Part 1)","thumbnail":"a870ad4951b0ca6cf8d1449dafa72040ab479614573d91a2d984aa59d35fecbb","access_level":"public","create_time":"$D2019-10-20T20:31:50.764Z","update_time":"$D2025-06-02T22:07:47.836Z","view_time":null,"first_public_time":"$D2019-10-21T21:58:35.736Z","has_unpublished_edits":null,"fork":{"id":"8df4248910c363e5","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":11,"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":522,"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":10,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Using Mapbox GL JS (Part 1)","cells":[{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`## A simple map example\n\n-> [Codepen version](https://codepen.io/pfoser/pen/BaaQyWa)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof centerpoint = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: [4.352731704711914, 50.846272321172954],\n zoom: 4,\n style: \"mapbox://styles/mapbox/streets-v10\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"md`## A simple map example with a 3D Building layer\n-> (BP 1a)[Codepen version](https://codepen.io/pfoser/pen/YzzpOMb)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"map1a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"$4b","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":false,"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":516,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 45:"$44:body"