daspo-free-zone/index.js

import * as mapboxgl from "mapbox-gl";
import Bbox from "@turf/bbox";
import BboxPolygon from "@turf/bbox-polygon";
import Center from "@turf/center";
import BooleanContains from "@turf/boolean-contains";
import BooleanOverlap from "@turf/boolean-overlap";
import Buffer from "@turf/buffer";
import confini from "./layers/confini.json";
import confiniHole from "./layers/confini_hole.json";
import aree_omogenee from "./layers/aree_omogenee.json";
import scuole_buffer from "./layers/scuole_buffer.json";
import luoghi_monumentali_buffer from "./layers/luoghi_monumentali_buffer.json";
import mercati_buffer from "./layers/mercati_buffer.json";
import musei_buffer from "./layers/musei_buffer.json";
import ospedali_cliniche_buffer from "./layers/ospedali_cliniche_buffer.json";
import stazioni_ferrovie_buffer from "./layers/stazioni_ferrovie_buffer.json";
import stazioni_metro_buffer from "./layers/stazioni_metro_buffer.json";
import parchi_buffer from "./layers/parchi_buffer.json";
import "./style.css";

mapboxgl.accessToken =
  "pk.eyJ1IjoidGVvIiwiYSI6IllvZUo1LUkifQ.dirqtn275pAKdnqtLM2HSw";

const bounds = Bbox(confini);
const maxBounds = Bbox(Buffer(confini, 100));
const map = new mapboxgl.Map({
  container: "map-home",
  zoom: 11,
  center: Center(confini).geometry.coordinates,
  style: "mapbox://styles/teo/cjyxhh5n92wy51ck4a4uiymtu/draft",
  maxBounds: [[maxBounds[0], maxBounds[1]], [maxBounds[2], maxBounds[3]]],
  maxZoom: 16,
  scrollZoom: false
});

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");

map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
  padding: 20
});

// const slider = document.getElementById("slider");
// const sliderValue = document.getElementById("slider-value");

map.on("load", function() {
  map.setLayoutProperty("building", "visibility", "none");
  map.setLayoutProperty("building-outline", "visibility", "none");

  map.addSource("aree_omogeneeSource", {
    type: "geojson",
    data: aree_omogenee
  });

  map.addSource("scuoleBufferSource", {
    type: "geojson",
    data: scuole_buffer
  });

  map.addSource("luoghiMonumentaliBufferSource", {
    type: "geojson",
    data: luoghi_monumentali_buffer
  });

  map.addSource("mercatiBufferSource", {
    type: "geojson",
    data: mercati_buffer
  });

  map.addSource("museiBufferSource", {
    type: "geojson",
    data: musei_buffer
  });

  map.addSource("ospedaliClinicheBufferSource", {
    type: "geojson",
    data: ospedali_cliniche_buffer
  });

  map.addSource("stazioniFerrovieBufferSource", {
    type: "geojson",
    data: stazioni_ferrovie_buffer
  });

  map.addSource("stazioniMetroBufferSource", {
    type: "geojson",
    data: stazioni_metro_buffer
  });

  map.addSource("parchiBufferSource", {
    type: "geojson",
    data: parchi_buffer
  });

  map.addSource("confiniHoleSource", {
    type: "geojson",
    data: confiniHole
  });

  map.addSource("confiniSource", {
    type: "geojson",
    data: confini
  });

  map.addSource("osmbuildings", {
    type: "vector",
    url: "https://data.osmbuildings.org/0.2/rkc8ywdl/tile.json"
  });

  const layers = map.getStyle().layers;
  //console.log(layers);
  let labelLayerId = "";
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
      labelLayerId = layers[i].id;
      break;
    }
  }

  map.addLayer(
    {
      id: "aree_omogenee",
      type: "fill",
      source: "aree_omogeneeSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "parchi_buffer",
      type: "fill",
      source: "parchiBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "mercati_buffer",
      type: "fill",
      source: "mercatiBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "scuole_buffer",
      type: "fill",
      source: "scuoleBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "musei_buffer",
      type: "fill",
      source: "museiBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "ospedali_cliniche_buffer",
      type: "fill",
      source: "ospedaliClinicheBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "stazioni_ferrovie_buffer",
      type: "fill",
      source: "stazioniFerrovieBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "stazioni_metro_buffer",
      type: "fill",
      source: "stazioniMetroBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "luoghi_monumentali_buffer",
      type: "fill",
      source: "luoghiMonumentaliBufferSource",
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "buildings-base",
      type: "fill",
      source: "osmbuildings",
      "source-layer": "building",
      // filter: ["all", ["==", "minHeight", 0]],
      // layout: {},
      paint: {
        "fill-color": "#fff",
        "fill-opacity": { stops: [[16, 0], [17.5, 1]] }
      }
    },
    labelLayerId
  );

  map.addLayer(
    {
      id: "buildings-3d",
      type: "fill-extrusion",
      source: "osmbuildings",
      "source-layer": "building",
      paint: {
        "fill-extrusion-color": "#f5553d",
        "fill-extrusion-height": [
          "interpolate",
          ["linear"],
          ["zoom"],
          15,
          0,
          15.05,
          [
            "number",
            ["get", "height"],
            ["*", ["number", ["get", "levels"], 3], 3]
          ]
        ],
        "fill-extrusion-base": [
          "interpolate",
          ["linear"],
          ["zoom"],
          15,
          0,
          15.05,
          [
            "number",
            ["get", "minHeight"],
            ["*", ["number", ["get", "minLevel"], 0], 3]
          ]
        ],

        "fill-extrusion-opacity": {
          stops: [[15, 0], [15.5, 1], [16, 1], [17.5, 0.6]]
        }
      },
      //filter: ["!=", ["string", ["get", "shape"], ""], "none"]
      filter: ["match", ["get", "id"], "", true, false]
    },
    labelLayerId
  );

  map.addLayer(
    {
      id: "confiniHole",
      source: "confiniHoleSource",
      type: "fill",
      paint: {
        "fill-color": "#fff"
      }
    },
    "settlement-subdivision-label"
  );

  map.addLayer(
    {
      id: "confini",
      source: "confiniSource",
      type: "line",
      paint: {
        "line-color": "#000"
      }
    },
    "settlement-subdivision-label"
  );
});

map.on("moveend", function() {
  if (map.getZoom() >= 15) {
    const aulenti = aree_omogenee.features.filter(
      f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
    )[0];

    let buildings = map.queryRenderedFeatures({
      layers: ["buildings-base"],
      filter: ["!=", ["string", ["get", "shape"], ""], "none"]
    });

    let features = map.queryRenderedFeatures({
      layers: [
        "aree_omogenee",
        "parchi_buffer",
        "luoghi_monumentali_buffer",
        "mercati_buffer",
        "musei_buffer",
        "ospedali_cliniche_buffer",
        "scuole_buffer",
        "stazioni_ferrovie_buffer",
        "stazioni_metro_buffer"
      ]
    });

    const filtered = buildings
      .filter(b => {
        let inside = false;
        for (let feature of features) {
          //console.log(b, feature);
          if (BooleanContains(feature, b)) {
            inside = true;
            break;
          } else {
            inside = false;
          }
        }
        return inside;
      })
      .map(b => b.properties.id);

    const ids = [...new Set(filtered)].filter(i => i);

    const filter = ["match", ["get", "id"], ids, true, false];

    if (ids.length) {
      map.setFilter("buildings-3d", filter);
    }
  }
});

map.on("zoomend", function() {
  if (map.getZoom() >= 15) {
    const aulenti = aree_omogenee.features.filter(
      f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
    )[0];

    let buildings = map.queryRenderedFeatures({
      layers: ["buildings-base"],
      filter: ["!=", ["string", ["get", "shape"], ""], "none"]
    });

    let features = map.queryRenderedFeatures({
      layers: [
        "aree_omogenee",
        "parchi_buffer",
        "luoghi_monumentali_buffer",
        "mercati_buffer",
        "musei_buffer",
        "ospedali_cliniche_buffer",
        "scuole_buffer",
        "stazioni_ferrovie_buffer",
        "stazioni_metro_buffer"
      ]
    });

    const filtered = buildings
      .filter(b => {
        let inside = false;
        for (let feature of features) {
          //console.log(b, feature);
          if (BooleanContains(feature, b)) {
            inside = true;
            break;
          } else {
            inside = false;
          }
        }
        return inside;
      })
      .map(b => b.properties.id);

    const ids = [...new Set(filtered)].filter(i => i);

    const filter = ["match", ["get", "id"], ids, true, false];

    if (ids.length) {
      map.setFilter("buildings-3d", filter);
    }
  }
});

// var toggleableLayerIds = ["wbbuilding", "aereal"];
//
// for (var i = 0; i < toggleableLayerIds.length; i++) {
//   var id = toggleableLayerIds[i];
//
//   var link = document.createElement("a");
//   link.href = "#";
//   link.className = "active";
//   link.textContent = id;
//
//   link.onclick = function(e) {
//     var clickedLayer = this.textContent;
//     e.preventDefault();
//     e.stopPropagation();
//
//     var visibility = map.getLayoutProperty(clickedLayer, "visibility");
//
//     if (visibility === "visible") {
//       map.setLayoutProperty(clickedLayer, "visibility", "none");
//       this.className = "";
//     } else {
//       this.className = "active";
//       map.setLayoutProperty(clickedLayer, "visibility", "visible");
//     }
//   };
//
//   var layers = document.getElementById("menu");
//   layers.appendChild(link);
// }