How to use the mapbox-gl.FullscreenControl function in mapbox-gl

To help you get started, we’ve selected a few mapbox-gl examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github WarsawLO / warsawlo / src / templates / School.js View on Github external
this.map = new mapboxgl.Map({
        container: this.mapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [location.position.Longitude, location.position.Latitude],
        zoom: 13,
      })
      let el = document.createElement('div')
      el.className = 'marker'
      el.style = 'display:inline-block;'
      ReactDOM.render((
        
          
        
      ), el)
      this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')
      this.map.addControl(new mapboxgl.FullscreenControl({ container: document.querySelector('body') }))
      this.map.on('mousemove', this.handleMouseStart)
      this.map.on('mouseout', this.handleMouseOut)
      new mapboxgl.Marker(el)
        .setLngLat([location.position.Longitude, location.position.Latitude])
        .addTo(this.map)
      console.log(this.fixedHeaderEl.current.clientHeight)
      this.setState({
        headerHeight: this.fixedHeaderEl.current.clientHeight,
      })
    }

    (function(d, s, id) {
      // if(!document.querySelector('#moovit-jsw')){
      let js, fjs = d.getElementsByTagName(s)[0]
      js = d.createElement(s)
      js.id = id
github geocompass / rs_buildings_extraction / webmap / src / components / HomeMap.vue View on Github external
// 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);

      // 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      //添加绘制功能
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle;

      var draw = new MapboxDraw({
        modes: modes
      });
github bcgov / gwells / app / frontend / src / aquifers / components / AquiferMap.vue View on Github external
maxPitch: 0,
        dragRotate: false,
        center: centre,
        style: this.buildMapStyle()
      }

      this.map = new mapboxgl.Map(mapConfig)

      this.addTopCentreControlConainer()

      new GestureHandling({ modifierKey: 'ctrl' }).addTo(this.map)

      /* Add controls */

      this.map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-left')
      this.map.addControl(new mapboxgl.FullscreenControl(), 'top-left')
      this.map.addControl(new DataBCGeocoder(), 'top-left')
      this.map.addControl(new BoxZoomControl({
        onZoom: this.zoomToBBox
      }), 'top-left')
      this.map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
          enableHighAccuracy: true
        }
      }), 'top-left')
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'imperial'
      }))
      this.map.addControl(new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
github Wykks / ngx-mapbox-gl / projects / ngx-mapbox-gl / src / lib / control / fullscreen-control.directive.ts View on Github external
this.MapService.mapCreated$.subscribe(() => {
      if (this.ControlComponent.control) {
        throw new Error('Another control is already set for this control');
      }
      this.ControlComponent.control = new FullscreenControl({ container: this.container });
      this.MapService.addControl(this.ControlComponent.control, this.ControlComponent.position);
    });
  }
github janhartmann / flight-spotter / client / src / map / MapBox.tsx View on Github external
const addControls = () => {
    if (withZoom || withCompass) {
      mapInstance.current.addControl(
        new mapboxgl.NavigationControl({
          showCompass: withCompass,
          showZoom: withZoom
        }),
        "top-right"
      );
    }

    if (withFullscreen) {
      mapInstance.current.addControl(
        new mapboxgl.FullscreenControl(),
        "top-right"
      );
    }

    if (withGeolocateControl) {
      mapInstance.current.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        }),
        "top-right"
      );
    }
  };