webpack-bootstrap-ui-kit/src/js/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