webpack-bootstrap-ui-kit/src/js_old/_components/drivers/_map.mapbox.js

"use strict";

import $ from "jquery";
import mapBoxGL from "mapbox-gl";

import Events from "../../_events";

const MapBoxDriver = (($) => {
  class MapBoxDriver {
    getName() {
      return "MapBoxDriver";
    }

    init($el, config = []) {
      const ui = this;

      mapBoxGL.accessToken = config["key"];

      ui.map = new mapBoxGL.Map({
        container: $el.find(".mapAPI-map")[0],
        center: config["center"] ? config["center"] : [0, 0],
        //hash: true,
        style: config["style"]
          ? config["style"]
          : "mapbox://styles/mapbox/streets-v9",
        localIdeographFontFamily: config["font-family"],
        zoom: config["mapZoom"] ? config["mapZoom"] : 10,
        attributionControl: false,
        antialias: true,
        accessToken: config["key"],
      })
        .addControl(
          new mapBoxGL.AttributionControl({
            compact: true,
          })
        )
        .addControl(new mapBoxGL.NavigationControl(), "top-right")
        .addControl(
          new mapBoxGL.GeolocateControl({
            positionOptions: {
              enableHighAccuracy: true,
            },
            trackUserLocation: true,
          }),
          "bottom-right"
        )
        .addControl(
          new mapBoxGL.ScaleControl({
            maxWidth: 80,
            unit: "metric",
          }),
          "top-left"
        )
        .addControl(new mapBoxGL.FullscreenControl());

      ui.map.on("load", (e) => {
        $el.trigger(Events.MAPAPILOADED);
      });

      ui.popup = new mapBoxGL.Popup({
        closeOnClick: false,
        className: "popup",
      });
    }

    addMarker(crds, config) {
      const ui = this;

      // create a DOM el for the marker
      const $el = $(
        `<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>`
      );

      $el.on("click", (e) => {
        ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);

        if (config["flyToMarker"]) {
          ui.map.flyTo({
            center: crds,
            zoom: 17,
          });
        }

        $(e.currentTarget).trigger(Events.MAPMARKERCLICK);
      });

      // add marker to map
      const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map);

      return marker;
    }

    addGeoJson(config) {
      const ui = this;
      // Insert the layer beneath any symbol layer.
      /*if (config['3d']) {
        const layers = Map.getStyle().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': '3d-buildings',
          'source': 'composite',
          'source-layer': 'building',
          'filter': ['==', 'extrude', 'true'],
          'type': 'fill-extrusion',flyToBounds
          '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': .6,
          },
        }, labelLayerId);
      }*/

      const firstMarker = config["geojson"].features[0].geometry.coordinates;
      //Map.setCenter(firstMarker);
      const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);

      // add markers to map
      config["geojson"].features.forEach((marker) => {
        const id = marker.id;
        const crds = marker.geometry.coordinates;
        const content = marker.properties.content;

        ui.addMarker(crds, {
          id,
          content,
          icon: marker.icon,
          flyToMarker: config["flyToMarker"],
        });

        bounds.extend(crds);
      });

      ui.map.fitBounds(bounds, {
        padding: 30,
      });

      ui.popup.on("close", (e) => {
        if (config["flyToBounds"]) {
          ui.map.fitBounds(bounds, {
            padding: 30,
          });
        }

        $(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
      });
    }

    getMap() {
      const ui = this;
      return ui.map;
    }

    getPopup() {
      const ui = this;
      return ui.popup;
    }
  }

  return MapBoxDriver;
})($);

export default MapBoxDriver;