2d:null 2e:["$","title",null,{"children":"Custom Glyph Maps for Maplibre | Dany Laksono | Observable"}] 33:T84a,{ const container = html`

`; yield container; const map = new maplibregl.Map({ container: container, style: "https://demotiles.maplibre.org/style.json", center: [-0.1276, 51.5074], // Coordinates for London zoom: 5 }); // Create a custom HTML element for the marker const customMarker = document.createElement("canvas"); customMarker.width = 50; customMarker.height = 50; // Function to draw a circle inside a triangle on the canvas function drawCustomMarker(canvas) { const ctx = canvas.getContext("2d"); const size = canvas.width; const cx = size / 2; const cy = size / 2; const spikes = 5; const outerRadius = 20; const innerRadius = 10; // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw a star ctx.beginPath(); for (let i = 0; i < spikes; i++) { const outerX = cx + Math.cos((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius; const outerY = cy + Math.sin((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius; ctx.lineTo(outerX, outerY); const innerX = cx + Math.cos(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) * innerRadius; const innerY = cy + Math.sin(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) * innerRadius; ctx.lineTo(innerX, innerY); } ctx.closePath(); ctx.fillStyle = "blue"; ctx.fill(); // Draw a circle inside the star ctx.beginPath(); ctx.arc(cx, cy, 4, 0, 2 * Math.PI); ctx.fillStyle = "pink"; ctx.fill(); } // Draw the custom marker drawCustomMarker(customMarker); // Wrap the canvas in a div const customMarkerDiv = document.createElement("div"); customMarkerDiv.appendChild(customMarker); // Add the custom marker to the map let marker = new maplibregl.Marker({ element: customMarkerDiv }).setLngLat([-0.1276, 51.5074]); marker.addTo(map); // new maplibregl.Marker(customMarkerDiv) // .setLngLat([-0.1276, 51.5074]) // Coordinates for London // .addTo(map); }34:T10e5,{ const container = html`

`; yield container; // Create layer control container const layerControl = html`

Polygon Layer
Pie Chart Layer

`; container.appendChild(layerControl); const map = new maplibregl.Map({ container: container, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", center: [0.1236921, 52.2007636], // Coordinates for Cambridge zoom: 12 }); map.on("load", () => { // Add GeoJSON source map.addSource("cambridge-data", { type: "geojson", data: geojson }); // Add polygon layer map.addLayer({ id: "polygon-layer", type: "fill", source: "cambridge-data", paint: { "fill-color": "rgba(0, 0, 255, 0.1)", // Light blue with opacity "fill-outline-color": "rgba(0, 0, 255, 1)" // Solid blue for boundaries } }); // Calculate the min and max total buildings for normalization const maxBuildings = Math.max( ...geojson.features.map((f) => f.properties.total_buildings) ); const minBuildings = Math.min( ...geojson.features.map((f) => f.properties.total_buildings) ); // Function to draw pie chart function drawPieChart(ctx, centerX, centerY, radius, suitable, unsuitable) { const total = suitable + unsuitable; const suitableAngle = (suitable / total) * 2 * Math.PI; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, 0, suitableAngle); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, suitableAngle, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // Draw a white border ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.stroke(); } // Create pie chart markers const markers = []; geojson.features.forEach((feature) => { const visualCenter = polylabel(feature.geometry.coordinates); // Skip this feature if visualCenter contains NaN if (isNaN(visualCenter[0]) || isNaN(visualCenter[1])) { console.warn( "Skipping feature due to invalid visual center:", feature.properties ); return; } const normalizedSize = (feature.properties.total_buildings - minBuildings) / (maxBuildings - minBuildings); const markerSize = 20 + normalizedSize * 60; // Size range between 20 and 80 const canvas = document.createElement("canvas"); canvas.width = markerSize; canvas.height = markerSize; const ctx = canvas.getContext("2d"); drawPieChart( ctx, markerSize / 2, markerSize / 2, markerSize / 2 - 1, feature.properties.suitable_buildings, feature.properties.unsuitable_buildings ); const customMarkerDiv = document.createElement("div"); customMarkerDiv.appendChild(canvas); const marker = new maplibregl.Marker({ element: customMarkerDiv }).setLngLat(visualCenter); markers.push(marker); }); // Add markers to the map const markerLayer = { id: "pie-chart-layer", markers: markers, addTo: function (map) { this.markers.forEach((marker) => marker.addTo(map)); }, remove: function () { this.markers.forEach((marker) => marker.remove()); } }; markerLayer.addTo(map); // Layer control functionality document.getElementById("polygon-layer").addEventListener("change", (e) => { map.setLayoutProperty( "polygon-layer", "visibility", e.target.checked ? "visible" : "none" ); }); document .getElementById("pie-chart-layer") .addEventListener("change", (e) => { if (e.target.checked) { markerLayer.addTo(map); } else { markerLayer.remove(); } }); }); }35:T19c5,{ console.log("Script started"); const container = html`

`; yield container; // Create layer control container const layerControl = html`

Polygon Layer
Pie Chart Layer

`; container.appendChild(layerControl); const map = new maplibregl.Map({ container: container, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", center: [0.1236921, 52.2007636], // Coordinates for Cambridge zoom: 12 }); map.on("load", () => { console.log("Map loaded"); // Add GeoJSON source map.addSource("cambridge-data", { type: "geojson", data: geojson }); // Add polygon layer map.addLayer({ id: "polygon-layer", type: "fill", source: "cambridge-data", paint: { "fill-color": "rgba(0, 0, 255, 0.1)", // Light blue with opacity "fill-outline-color": "rgba(0, 0, 255, 1)" // Solid blue for boundaries } }); // Calculate the min and max total buildings for normalization const maxBuildings = Math.max( ...geojson.features.map((f) => f.properties.total_buildings) ); const minBuildings = Math.min( ...geojson.features.map((f) => f.properties.total_buildings) ); // Function to draw pie chart function drawPieChart(ctx, centerX, centerY, radius, suitable, unsuitable) { const total = suitable + unsuitable; const suitableAngle = (suitable / total) * 2 * Math.PI; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, 0, suitableAngle); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, suitableAngle, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // Draw a white border ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.stroke(); } // Create pie chart markers const markers = []; geojson.features.forEach((feature) => { const visualCenter = polylabel(feature.geometry.coordinates); // Skip this feature if visualCenter contains NaN if (isNaN(visualCenter[0]) || isNaN(visualCenter[1])) { console.warn( "Skipping feature due to invalid visual center:", feature.properties ); return; } const normalizedSize = (feature.properties.total_buildings - minBuildings) / (maxBuildings - minBuildings); const markerSize = 20 + normalizedSize * 60; // Size range between 20 and 80 const canvas = document.createElement("canvas"); canvas.width = markerSize; canvas.height = markerSize; const ctx = canvas.getContext("2d"); drawPieChart( ctx, markerSize / 2, markerSize / 2, markerSize / 2 - 1, feature.properties.suitable_buildings, feature.properties.unsuitable_buildings ); const customMarkerDiv = document.createElement("div"); customMarkerDiv.appendChild(canvas); const marker = new maplibregl.Marker({ element: customMarkerDiv }).setLngLat(visualCenter); // Create a popup but don't add it to the map yet. const popup = new maplibregl.Popup({ closeButton: true, closeOnClick: true }); // Change the cursor to a pointer when the mouse is over the marker. customMarkerDiv.addEventListener("mouseenter", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. customMarkerDiv.addEventListener("mouseleave", () => { map.getCanvas().style.cursor = ""; }); // When a click event occurs on a feature in the markers layer, open a popup at the // location of the feature, with description HTML from its properties. customMarkerDiv.addEventListener("click", (e) => { // console.log(feature); // Close any existing popup if (map._popup) map._popup.remove(); const popupContent = `

${feature.properties.name || "Area"}

Total Buildings: ${feature.properties.total_buildings}

Suitable Buildings: ${feature.properties.suitable_buildings}

Unsuitable Buildings: ${ feature.properties.unsuitable_buildings }

`; popup.setLngLat(visualCenter).setHTML(popupContent).addTo(map); mutable selectedFeature = feature.id; // Stop the click event from propagating to the map e.stopPropagation(); }); markers.push(marker); }); // Add markers to the map const markerLayer = { id: "pie-chart-layer", markers: markers, addTo: function (map) { this.markers.forEach((marker) => marker.addTo(map)); }, remove: function () { this.markers.forEach((marker) => marker.remove()); } }; markerLayer.addTo(map); // Layer control functionality const polygonCheckbox = document.getElementById("polygon-layer"); const pieChartCheckbox = document.getElementById("pie-chart-layer"); if (polygonCheckbox) { console.log("Polygon checkbox found"); polygonCheckbox.addEventListener("change", (e) => { const visibility = e.target.checked ? "visible" : "none"; console.log(`Setting polygon layer visibility to: ${visibility}`); map.setLayoutProperty("polygon-layer", "visibility", visibility); }); } else { console.error("Polygon checkbox not found"); } if (pieChartCheckbox) { console.log("Pie chart checkbox found"); pieChartCheckbox.addEventListener("change", (e) => { console.log(`Pie chart layer checked: ${e.target.checked}`); if (e.target.checked) { markerLayer.addTo(map); } else { markerLayer.remove(); } }); } else { console.error("Pie chart checkbox not found"); } // Add a click event to the map to close the popup when clicking elsewhere map.on("click", () => { if (map._popup) map._popup.remove(); }); console.log("Event listeners set up"); }); console.log("Script ended"); }36:T1eae,{ const container = html`

`; yield container; // Create layer control container const layerControl = html`

Polygon Layer
Chart Layer

`; container.appendChild(layerControl); const map = new maplibregl.Map({ container: container, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", center: [0.1236921, 52.2007636], // Coordinates for Cambridge zoom: 12 }); map.on("load", () => { // Add GeoJSON source map.addSource("cambridge-data", { type: "geojson", data: geojson }); // Add polygon layer map.addLayer({ id: "polygon-layer", type: "fill", source: "cambridge-data", paint: { "fill-color": "rgba(0, 0, 255, 0.1)", // Light blue with opacity "fill-outline-color": "rgba(0, 0, 255, 1)" // Solid blue for boundaries } }); // Calculate the min and max total buildings for normalization const maxBuildings = Math.max( ...geojson.features.map((f) => f.properties.total_buildings) ); const minBuildings = Math.min( ...geojson.features.map((f) => f.properties.total_buildings) ); // Function to draw pie chart function drawPieChart(ctx, centerX, centerY, radius, suitable, unsuitable) { const total = suitable + unsuitable; const suitableAngle = (suitable / total) * 2 * Math.PI; ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, 0, suitableAngle); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.arc(centerX, centerY, radius, suitableAngle, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // Draw a white border ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.stroke(); } // Function to draw bar chart function drawBarChart(ctx, width, height, suitable, unsuitable) { const total = suitable + unsuitable; const suitableHeight = (suitable / total) * height; const unsuitableHeight = height - suitableHeight; ctx.fillStyle = "green"; ctx.fillRect(0, height - suitableHeight, width, suitableHeight); ctx.fillStyle = "red"; ctx.fillRect(0, 0, width, unsuitableHeight); // Draw a white border ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.strokeRect(0, 0, width, height); } // Create chart markers const markers = geojson.features .map((feature) => { const visualCenter = polylabel(feature.geometry.coordinates); // Skip this feature if visualCenter contains NaN if (isNaN(visualCenter[0]) || isNaN(visualCenter[1])) { console.warn( "Skipping feature due to invalid visual center:", feature.properties ); return null; } const normalizedSize = (feature.properties.total_buildings - minBuildings) / (maxBuildings - minBuildings); const markerSize = 20 + normalizedSize * 60; // Size range between 20 and 80 const pieCanvas = document.createElement("canvas"); pieCanvas.width = markerSize; pieCanvas.height = markerSize; const pieCtx = pieCanvas.getContext("2d"); drawPieChart( pieCtx, markerSize / 2, markerSize / 2, markerSize / 2 - 1, feature.properties.suitable_buildings, feature.properties.unsuitable_buildings ); const barCanvas = document.createElement("canvas"); barCanvas.width = markerSize / 2; barCanvas.height = markerSize; const barCtx = barCanvas.getContext("2d"); drawBarChart( barCtx, markerSize / 2, markerSize, feature.properties.suitable_buildings, feature.properties.unsuitable_buildings ); const customMarkerDiv = document.createElement("div"); customMarkerDiv.appendChild(pieCanvas); customMarkerDiv.appendChild(barCanvas); customMarkerDiv.style.width = `${markerSize}px`; customMarkerDiv.style.height = `${markerSize}px`; const marker = new maplibregl.Marker({ element: customMarkerDiv }).setLngLat(visualCenter); // Create a popup but don't add it to the map yet. const popup = new maplibregl.Popup({ closeButton: true, closeOnClick: true }); // Change the cursor to a pointer when the mouse is over the marker. customMarkerDiv.addEventListener("mouseenter", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. customMarkerDiv.addEventListener("mouseleave", () => { map.getCanvas().style.cursor = ""; }); // When a click event occurs on a feature in the markers layer, open a popup at the // location of the feature, with description HTML from its properties. customMarkerDiv.addEventListener("click", (e) => { // Close any existing popup if (map._popup) map._popup.remove(); const popupContent = `

${feature.properties.name || "Area"}

Total Buildings: ${feature.properties.total_buildings}

Suitable Buildings: ${feature.properties.suitable_buildings}

Unsuitable Buildings: ${ feature.properties.unsuitable_buildings }

`; popup.setLngLat(visualCenter).setHTML(popupContent).addTo(map); // Stop the click event from propagating to the map e.stopPropagation(); }); return marker; }) .filter((marker) => marker !== null); // Add markers to the map const markerLayer = { id: "chart-layer", markers: markers, addTo: function (map) { this.markers.forEach((marker) => marker.addTo(map)); }, remove: function () { this.markers.forEach((marker) => marker.remove()); } }; markerLayer.addTo(map); // Function to update marker visibility based on zoom level function updateMarkerVisibility() { const zoom = map.getZoom(); markers.forEach((marker) => { const element = marker.getElement(); const pieChart = element.children[0]; const barChart = element.children[1]; if (zoom >= 14.5) { // change here for zoom-based glyph change pieChart.style.display = "none"; barChart.style.display = "block"; } else { pieChart.style.display = "block"; barChart.style.display = "none"; } }); } // Update marker visibility on zoom map.on("zoom", updateMarkerVisibility); // Initial update updateMarkerVisibility(); // Layer control functionality document.getElementById("polygon-layer").addEventListener("change", (e) => { map.setLayoutProperty( "polygon-layer", "visibility", e.target.checked ? "visible" : "none" ); }); document.getElementById("chart-layer").addEventListener("change", (e) => { if (e.target.checked) { markerLayer.addTo(map); } else { markerLayer.remove(); } }); // Add a click event to the map to close the popup when clicking elsewhere map.on("click", () => { if (map._popup) map._popup.remove(); }); }); }37:Tf18,map = { const map = clustermapObj; map.addControl(new maplibregl.NavigationControl()); // filters for classifying earthquakes into five categories based on magnitude const mag1 = ["<", ["get", "mag"], 2]; const mag2 = ["all", [">=", ["get", "mag"], 2], ["<", ["get", "mag"], 3]]; const mag3 = ["all", [">=", ["get", "mag"], 3], ["<", ["get", "mag"], 4]]; const mag4 = ["all", [">=", ["get", "mag"], 4], ["<", ["get", "mag"], 5]]; const mag5 = [">=", ["get", "mag"], 5]; // colors to use for the categories // const colors = ["#fed976", "#feb24c", "#fd8d3c", "#fc4e2a", "#e31a1c"]; map.on("load", () => { // add a clustered GeoJSON source for a sample set of earthquakes map.addSource("earthquakes", { type: "geojson", data: "https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson", cluster: true, clusterRadius: 80, clusterProperties: { // keep separate counts for each magnitude category in a cluster mag1: ["+", ["case", mag1, 1, 0]], mag2: ["+", ["case", mag2, 1, 0]], mag3: ["+", ["case", mag3, 1, 0]], mag4: ["+", ["case", mag4, 1, 0]], mag5: ["+", ["case", mag5, 1, 0]] } }); // circle and symbol layers for rendering individual earthquakes (unclustered points) map.addLayer({ id: "earthquake_circle", type: "circle", source: "earthquakes", filter: ["!=", "cluster", true], paint: { "circle-color": [ "case", mag1, colors[0], mag2, colors[1], mag3, colors[2], mag4, colors[3], colors[4] ], "circle-opacity": 0.6, "circle-radius": 12 } }); map.addLayer({ id: "earthquake_label", type: "symbol", source: "earthquakes", filter: ["!=", "cluster", true], layout: { "text-field": [ "number-format", ["get", "mag"], { "min-fraction-digits": 1, "max-fraction-digits": 1 } ], "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-size": 10 }, paint: { "text-color": ["case", ["<", ["get", "mag"], 3], "black", "white"] } }); // objects for caching and keeping track of HTML marker objects (for performance) const markers = {}; let markersOnScreen = {}; function updateMarkers() { const newMarkers = {}; const features = map.querySourceFeatures("earthquakes"); // for every cluster on the screen, create an HTML marker for it (if we didn't yet), // and add it to the map if it's not there already for (let i = 0; i < features.length; i++) { const coords = features[i].geometry.coordinates; const props = features[i].properties; if (!props.cluster) continue; const id = props.cluster_id; let marker = markers[id]; if (!marker) { const el = createDonutChart(props); // const el = createBarChart(props); marker = markers[id] = new maplibregl.Marker({ element: el }).setLngLat(coords); } newMarkers[id] = marker; if (!markersOnScreen[id]) marker.addTo(map); } // for every marker we've added previously, remove those that are no longer visible for (const id in markersOnScreen) { if (!newMarkers[id]) markersOnScreen[id].remove(); } markersOnScreen = newMarkers; } // after the GeoJSON data is loaded, update markers on the screen and do so on every map move/moveend map.on("data", (e) => { if (e.sourceId !== "earthquakes" || !e.isSourceLoaded) return; map.on("move", updateMarkers); map.on("moveend", updateMarkers); updateMarkers(); }); }); return map; }38:T40a,function createDonutChart(props) { const offsets = []; const counts = [props.mag1, props.mag2, props.mag3, props.mag4, props.mag5]; let total = 0; for (let i = 0; i < counts.length; i++) { offsets.push(total); total += counts[i]; } const fontSize = total >= 1000 ? 22 : total >= 100 ? 20 : total >= 10 ? 18 : 16; const r = total >= 1000 ? 50 : total >= 100 ? 32 : total >= 10 ? 24 : 18; const r0 = Math.round(r * 0.6); const w = r * 2; const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = w; const ctx = canvas.getContext('2d'); for (let i = 0; i < counts.length; i++) { donutSegment(ctx, offsets[i] / total, (offsets[i] + counts[i]) / total, r, r0, colors[i]); } ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(r, r, r0, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = 'black'; ctx.font = `${fontSize}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(total.toLocaleString(), r, r); return canvas; } 39:[{"id":"85f8da80b48c4be442b1cec9c31c23be527d96384724fd51bafa6329e46ec17b0fd95f89dbe268f0d31d171860ab16cc58082ef9450ab6d988e91427ebf9f45a","href":"https://static.observableusercontent.com/files/85f8da80b48c4be442b1cec9c31c23be527d96384724fd51bafa6329e46ec17b0fd95f89dbe268f0d31d171860ab16cc58082ef9450ab6d988e91427ebf9f45a","name":"lsoa_airsource_heatpump.geojson","type":"application/geo+json","lastModified":1721801934030.698,"size":1887492},{"id":"869a10f23fc63aaeb8612d652743d097579606bbb40c3cac3475901b178dd217675d7ebc529f9e9a3547e37165025edf16c25658fbd0974ee3f257fdbfd4d374","href":"https://static.observableusercontent.com/files/869a10f23fc63aaeb8612d652743d097579606bbb40c3cac3475901b178dd217675d7ebc529f9e9a3547e37165025edf16c25658fbd0974ee3f257fdbfd4d374","name":"lsoa_multideprivation.geojson","type":"application/geo+json","lastModified":1721787022349.983,"size":2188409}] 31:{"id":"d2323935e1eb3450","slug":"custom-glyph-maps-for-maplibre","title":"Custom Glyph Maps for Maplibre","thumbnail":"7d7ff57f7265d9ff4355a3f37acdfb79b9dd636ca4289b753748316ad487e5fb","access_level":"public","create_time":"$D2024-07-10T10:46:52.060Z","update_time":"$D2026-09-02T05:29:35.442Z","view_time":null,"first_public_time":"$D2024-08-02T09:15:51.922Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024"},"version":238,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null}],"members":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null,"role":"editor"},{"type":"team","id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom Glyph Maps for Maplibre","cells":[{"id":0,"value":"# Custom Glyph Maps for Maplibre\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"This notebook demonstrates how custom marker in MaplibreJS can be drawn using custom canvas function, which could be implemented as a glyph to encode data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## Proof of Concept: A Single Canvas Marker","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"MaplibreJS (and other JS map libraries) have a concept of a marker: a map icon put into certain coordinates. Usually, markers are just a simple static symbol. In this example, we can modify the marker to use html element, which subsequently can be modified using Canvas. This enables us to change a lot of things, including to use them for data encoding. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## Encoding Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"We can also use marker to depict the underlying geospatial data. In this case, we use the potential for air source heat pump installation in Cambrigde, UK, by LSOA. The markers are placed in the visual centre of the boundaries using Mapbox's Polylabel. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"geojson = FileAttachment(\"lsoa_airsource_heatpump.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"## Glyph with Popup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"Since the canvas glyphs are just markers, they come with the full functionalities of a marker in MaplibreJS. An example for this is to show a popup when they are clicked - meaning that we can link the click event with any data-related visualisation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"mutable selectedFeature = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"We can also use built-in styling function in MaplibreJS, e.g., to implement change based on zoom level. Try zooming in to see the changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"This means that we can incorporates the rich visualisation techniques built-in with Maplibre/Mapbox's Data-driven styling ([https://maplibre.org/maplibre-style-spec/expressions/](https://maplibre.org/maplibre-style-spec/expressions/)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Clustered Glyph Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"Clustering function is also built-in within MaplibreJS. We can use them to visualise discretised canvas glyphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"container2 = {\n const container2 = html`

`;\n yield container2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"## TODO","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"- We want to show how clustering can be done using arbitrary clustering functions, such as GeoHash (https://chartfactor.com/doc/latest/visualizations/maps_gl/#geohash-clusters)\n- We also wants to include some examples with data-binning on geographical space, such as using Uber H3, which has certain advantages related to multi-level aggregation of geospatial data. This is a work in progress.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"colors = [\"#fed976\", \"#feb24c\", \"#fd8d3c\", \"#fc4e2a\", \"#e31a1c\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function donutSegment(ctx, start, end, r, r0, color) {\n if (end - start === 1) end -= 0.00001;\n const a0 = 2 * Math.PI * (start - 0.25);\n const a1 = 2 * Math.PI * (end - 0.25);\n const x0 = r + r * Math.cos(a0);\n const y0 = r + r * Math.sin(a0);\n const x1 = r + r * Math.cos(a1);\n const y1 = r + r * Math.sin(a1);\n\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(r, r);\n ctx.arc(r, r, r, a0, a1);\n ctx.lineTo(r + r0 * Math.cos(a1), r + r0 * Math.sin(a1));\n ctx.arc(r, r, r0, a1, a0, true);\n ctx.closePath();\n ctx.fill();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"clustermapObj = new maplibregl.Map({\n //interactive: false,\n boxZoom: true,\n pitch: 0,\n bearing: 0,\n maplibreLogo: true,\n container: container2,\n zoom: 0.3,\n center: [0, 20],\n hash: true,\n // style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n // check https://basemaps.cartocdn.com/basemaplist.js for more\n\n style: \"https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json\",\n scrollZoom: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"import polylabel from \"npm:polylabel@1.1.0\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"import * as turf from \"npm:@turf/turf\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import maplibregl from \"npm:maplibre-gl@5.24.0\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"- https://peerj.com/preprints/27858.pdf\n- https://chartfactor.com/doc/latest/visualizations/maps_gl/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W39","stdlib":"2","titling":"auto"}} 32:"$31:body"