How to use mapbox-gl - 10 common examples

it('addFeatures, removeFeatures, getShapesByFeatureID', () => {
        var graphThemeLayer;
        var features = [];
        for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
            // 省居民消费水平（单位：元）信息
            var provinceInfo = chinaConsumptionLevel[i];
            var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
            var attrs = {};
            attrs.NAME = provinceInfo[0];
            attrs.CON2009 = provinceInfo[3];
            attrs.CON2010 = provinceInfo[4];
            attrs.CON2011 = provinceInfo[5];
            attrs.CON2012 = provinceInfo[6];
            attrs.CON2013 = provinceInfo[7];
            var fea = new ThemeFeature(geo, attrs);
            features.push(fea);
        }
        graphThemeLayer = new Graph("GraphThemeLayer", "Bar",
            {
                map: map,
                attributions: " ",
                themeFields: ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"],
                opacity: 0.9,

isReachable('mapbox.com', function (_, online) {
  if (!online) { argv.basemap = 'offline' }
  if (/^(plain|land|offline)$/.test(argv.basemap)) {
    basemap = dataStyle
  } else if (!argv.basemap) {
    basemap = dataStyle
    dataStyle.layers.forEach((layer) => { layer.layout.visibility = 'none' })
  } else if (!hasScheme(argv.basemap)) {
    // assume it's a mapbox style, so prepend mapbox://styles/
    basemap = 'mapbox://styles/' + argv.basemap
  } else {
    // do this because 'basemap' will still be set on a ctrl-R reload
    basemap = basemap || argv.basemap
  }

  map = window.map = new mapboxgl.Map({
    container: 'map',
    style: basemap,
    center: [0, 0],
    zoom: 2
  })

  map.on('load', onMapLoad)
  map.on('error', function (err) { console.error(err) })
})

fs.unlinkSync(path.resolve(mapsFolder, file));
            }
        });
    }
    if (fileExt == '.json') {
        var geojsonData = require(path.resolve(mapsFolder, file));
        stl_json.sources['jsonsource'] = {
            type: 'geojson',
            data: geojsonData
        };
    }
});

// console.log(stl_json.sources);
// document.getElementById('geojson').value = JSON.stringify(geojson, null, 4);
mapboxgl.accessToken = 'pk.eyJ1IjoiZGlnaXRhbGtpIiwiYSI6ImNqNXh1MDdibTA4bTMycnAweDBxYXBpYncifQ.daSatfva2eG-95QHWC9Mig';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: stl_json,
    // style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-78.3816748, -0.3498079], // starting position [lng, lat]
    zoom: 14, // starting zoom
    pitch: 45,
    bearing: -17.6,
    hash: true
});

var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        point: true,
        polygon: true,

// Set a timer to detect when the map has finished loading
    const loadingInterval = setInterval(() => {
      if (this.map.loaded()) {
        clearInterval(loadingInterval);
        // For some reason, setCenter/setZoom commands that are called too soon are ignored.
        if (this.center) { this.map.setCenter(this.center); }
        if (this.zoom) { this.map.setZoom(this.zoom); }
        this.mapLoadedHandlers.forEach(h => h(this));
      }
    }, 100);

    // Add zoom and rotation controls to the map.
    const navigationControlOptions = {
      showCompass: false,
    };
    this.map.addControl(new mapboxgl.NavigationControl(navigationControlOptions));

    this.dragStartHandlers = [];
    this.dragHandlers = [];
    this.dragEndHandlers = [];
    this.mapLoadedHandlers = [];

    this.map.on('touchstart', (e) => {
      // the user actually touched the screen!
      // he has a touch feature AND is using it. See #1090
      if (!this.userIsUsingTouch) {
        this.userIsUsingTouch = true;
        console.log('user is using touch');
      }
    });

    this.map.on('mouseenter', 'clickable-zones-fill', (e) => {

function init() {
  mapboxgl.accessToken = MAPBOX_TOKEN;

  window.map = map = new mapboxgl.Map({
    trackResize: true,
    container: "map",
    minZoom: 1,
    style: getMarsStyle(),
    center: [-92.880, 18.79],
    zoom: 2.64,
    hash: true
  });

  map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), "top-right");

  map.on("zoomstart", hideHeights);
  map.on("zoomend", updateHeights);
  map.on("dragstart", hideHeights);
  map.on("dragend", updateHeights);
  map.on("load", function() {
    setLabelsVisible(appState.showLabels);
    schedulePrintMessage();
    // I was considering using native layers, to fetch the coordinates,
    // but my understanding of mapbox is not deep enough to do it yet.

    // map.showTileBoundaries = true;
    // map.addSource("dem", {
    //     type: "raster-dem",
    //     "url": "mapbox://anvaka.8ctdbgc9",
    //     "tileSize": 256,

}
            this.map.flyTo({
                center: flyToPos
            });

            this.reverseGeocode(result.result.center);
            
            // Hide UI
            // @todo refactor this to use React state
            document.querySelector('body').classList.remove('show-city-picker');
            cityPicker.clear();
        });
        this.map.addControl(cityPicker, 'top-left');

        this.map.addControl(
            new mapboxgl.NavigationControl({
                showCompass: false
            }),
            'bottom-right'
        );
        const geolocate = new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: false
        });
        geolocate.on('geolocate', result => {
            console.debug('geolocate', result); 
            this.reverseGeocode([result.coords.longitude, result.coords.latitude]);
        });
        this.map.addControl(geolocate, 'bottom-right');

function init() {
  // TODO: Do I need to hide this?
  mapboxgl.accessToken = 'pk.eyJ1IjoiYW52YWthIiwiYSI6ImNqaWUzZmhqYzA1OXMza213YXh2ZzdnOWcifQ.t5yext53zn1c9Ixd7Y41Dw';
  map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-122.2381,47.624],
      zoom: 11.32,
      hash: true
  });

  map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'bottom-right');
  map.addControl(new MapboxGeocoder({accessToken: mapboxgl.accessToken}));
  map.on('zoom', updateZoomWarning);

  map.dragRotate.disable();
  map.touchZoomRotate.disableRotation();

  // On large screens we want to warn people that they may end up downloading a lot of stuff
  updateZoomWarning();

  bus.on('download-all-roads', downloadRoads);
  bus.on('cancel-download-all-roads', () => {
    if (cancelDownload) cancelDownload();
  });
};

initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1Ijoid3VjYW5nZW8iLCJhIjoiY2oxNGQ1ZDdsMDA0djJxbzdzdGU4NWpqMiJ9.iaTLldYv7GNfxWhN42h__g";
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        style: CONFIG.HOST + "/style.json",
        center: [116.295, 39.945],
        zoom: 16
      });
      // 设置语言
      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
          },

onClick(evt) {
      // add a marker on the map wherever you clicked
      new mapboxgl.Marker().setLngLat(evt.lngLat).addTo(map);
      console.log('clicked at', evt.lngLat);
    },

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
      js.src = 'https://widgets.moovit.com/wtp/pl'
      fjs.parentNode.insertBefore(js, fjs)
      // }