clusterMap = { apiKey; const container = html`

`; yield container; let pos = { lat: 34.01645, lng: -118.144 }; const nbmap = (container.value = new nextbillion.maps.Map({ container: document.getElementById("map"), center: pos, zoom: 10, maxZoom: 15, minZoom: 5, style: "https://api.nextbillion.io/maps/dark/style.json", scrollZoom: true })); // filters for classifying vehicles into five categories based on capacity var capacity1 = ["<", ["get", "capacity"], 2]; var capacity2 = [ "all", [">=", ["get", "capacity"], 2], ["<", ["get", "capacity"], 3] ]; var capacity3 = [ "all", [">=", ["get", "capacity"], 3], ["<", ["get", "capacity"], 4] ]; var capacity4 = [ "all", [">=", ["get", "capacity"], 4], ["<", ["get", "capacity"], 5] ]; var capacity5 = [">=", ["get", "capacity"], 5]; // colors to use for the categories var colors = ["#e2daea", "#b7a5c6", "#816796", "#844faf", "#8726d6"]; nbmap.on("load", function () { nbmap.map.addSource("vehicles", { type: "geojson", data: vehicleLocations, cluster: true, clusterRadius: 80, clusterProperties: { // keep separate counts for each capacity category in a cluster capacity1: ["+", ["case", capacity1, 1, 0]], capacity2: ["+", ["case", capacity2, 1, 0]], capacity3: ["+", ["case", capacity3, 1, 0]], capacity4: ["+", ["case", capacity4, 1, 0]], capacity5: ["+", ["case", capacity5, 1, 0]] } }); // circle and symbol layers for rendering individual earthquakes (unclustered points) nbmap.map.addLayer({ id: "vehicle_circle", type: "circle", source: "vehicles", filter: ["!=", "cluster", true], paint: { "circle-color": [ "case", capacity1, colors[0], capacity2, colors[1], capacity3, colors[2], capacity4, colors[3], colors[4] ], "circle-opacity": 0.6, "circle-radius": 12 } }); nbmap.map.addLayer({ id: "vehicle_label", type: "symbol", source: "vehicles", filter: ["!=", "cluster", true], layout: { "text-field": [ "number-format", ["get", "capacity"], { "min-fraction-digits": 0, "max-fraction-digits": 0 } ], "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-size": 10 }, paint: { "text-color": ["case", ["<", ["get", "capacity"], 3], "black", "white"] } }); // objects for caching and keeping track of HTML marker objects (for performance) var markers = {}; var markersOnScreen = {}; function updateMarkers() { var newMarkers = {}; var features = nbmap.map.querySourceFeatures("vehicles"); // 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 (var i = 0; i < features.length; i++) { var coords = features[i].geometry.coordinates; var props = features[i].properties; if (!props.cluster) continue; var id = props.cluster_id; var marker = markers[id]; if (!marker) { var el = createDonutChart(props); marker = new nextbillion.maps.Marker(el) .setLngLat(coords) .addTo(nbmap.map); markers[id] = marker; } newMarkers[id] = marker; if (!markersOnScreen[id]) marker.addTo(nbmap.map); } // for every marker we've added previously, remove those that are no longer visible for (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 nbmap.map.on("data", function (e) { if (e.sourceId !== "vehicles" || !e.isSourceLoaded) return; nbmap.map.on("move", updateMarkers); nbmap.map.on("moveend", updateMarkers); updateMarkers(); }); }); // code for creating an SVG donut chart from feature properties function createDonutChart(props) { var offsets = []; var counts = [ props.capacity1, props.capacity2, props.capacity3, props.capacity4, props.capacity5 ]; var total = 0; for (var i = 0; i < counts.length; i++) { offsets.push(total); total += counts[i]; } var fontSize = total >= 1000 ? 22 : total >= 100 ? 20 : total >= 10 ? 18 : 16; var r = total >= 1000 ? 50 : total >= 100 ? 32 : total >= 10 ? 24 : 18; var r0 = Math.round(r * 0.6); var w = r * 2; var html = '

"; var el = document.createElement("div"); el.innerHTML = html; return el.firstChild; } function donutSegment(start, end, r, r0, color) { if (end - start === 1) end -= 0.00001; var a0 = 2 * Math.PI * (start - 0.25); var a1 = 2 * Math.PI * (end - 0.25); var x0 = Math.cos(a0), y0 = Math.sin(a0); var x1 = Math.cos(a1), y1 = Math.sin(a1); var largeArc = end - start > 0.5 ? 1 : 0; return [ '' ].join(" "); } }