viewof map7 = { var container = html`

` 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"); }