How to use the leaflet.latLngBounds function in leaflet

To help you get started, we’ve selected a few leaflet 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 InterDigitalInc / AdvantEDGE / js-apps / meep-frontend / src / js / containers / idc-map.js View on Github external
createMap() {
    // Get stored configuration
    var cfg = this.getCfg();
    var lat = (cfg && cfg.center) ? cfg.center.lat : DEFAULT_MAP_LATITUDE;
    var lng = (cfg && cfg.center) ? cfg.center.lng : DEFAULT_MAP_LONGITUDE;
    var zoom = (cfg && cfg.zoom) ? cfg.zoom : DEFAULT_MAP_ZOOM;
    var baselayerName = (cfg && cfg.baselayerName) ? cfg.baselayerName : DEFAULT_MAP_STYLE;
 
    // Map bounds
    const corner1 = L.latLng(-90, -180);
    const corner2 = L.latLng(90, 180);
    const bounds = L.latLngBounds(corner1, corner2);
    
    // Create Map instance
    var domNode = ReactDOM.findDOMNode(this);
    this.map = L.map(domNode, {
      center: [lat,lng],
      zoom: zoom,
      minZoom: 2,
      maxZoom: 20,
      drawControl: true,
      maxBounds: bounds,
      maxBoundsViscosity: 1.0
    });
    this.map.attributionControl.addAttribution('<a href="https://www.maptiler.com/copyright/?_ga=2.45788834.742970109.1593090041-1523068243.1593090041">© MapTiler</a>');
    this.map.attributionControl.addAttribution('<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>');

    // Create GL Baselayers
github Vizzuality / trase / frontend / scripts / react-components / tool / map / map.component.js View on Github external
_createRasterLayer(rasterUrl) {
    const url = `${rasterUrl}{z}/{x}/{y}.png`;

    // TODO add those params in layer configuration
    const southWest = L.latLng(-36, -76);
    const northEast = L.latLng(18, -28);
    const bounds = L.latLngBounds(southWest, northEast);

    const layer = L.tileLayer(url, {
      pane: MAP_PANES.contextBelow,
      tms: true,
      // TODO add those params in layer configuration
      maxZoom: 11,
      bounds
    });
    return layer;
  }
github nasa / earthdata-search / static / src / js / util / map / layers.js View on Github external
castArray(rectangles).forEach((rect) =&gt; {
      const shape = L.polygon(rect, options)
      // eslint-disable-next-line no-underscore-dangle
      shape._interpolationFn = 'cartesian'
      layer.addLayer(shape)

      const bounds = L.latLngBounds(rect)
      if (
        bounds.getNorth() - bounds.getSouth() &lt; 0.5
        &amp;&amp; bounds.getWest() - bounds.getEast() &lt; 0.5
      ) {
        layer.addLayer(L.marker(bounds.getCenter()))
      }
    })
  }
github Vizzuality / trase / frontend / scripts / components / tool / map.component.js View on Github external
weight
        });
        layer.disabled = !layer.feature.properties.hasFlows;
      }

      if (isLinked) {
        linkedPolygons.push(layer.feature);
      }
    });

    if (forceDefaultMapView === true) {
      this.setMapView(defaultMapView);
    } else if (linkedPolygons.length) {
      const bbox = turf_bbox({ type: 'FeatureCollection', features: linkedPolygons });
      // we use L's _getBoundsCenterZoom internal method + setView as fitBounds does not support a minZoom option
      const bounds = L.latLngBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]]);
      const boundsCenterZoom = this.map._getBoundsCenterZoom(bounds);
      if (defaultMapView) {
        boundsCenterZoom.zoom = Math.max(boundsCenterZoom.zoom, defaultMapView.zoom);
      }
      this._setMapViewDebounced(boundsCenterZoom.center, boundsCenterZoom.zoom);
    }
  }
github vue-leaflet / Vue2Leaflet / tests / unit / components / LMap.spec.js View on Github external
const wrapper = getMapWrapper();
    wrapper.vm.mapObject.fitBounds = mockFitBounds;

    wrapper.setProps({ padding: optionsPadding.padding });
    wrapper.setProps({ paddingBottomRight: optionsPadding2.paddingBottomRight });
    wrapper.setProps({ paddingTopLeft: optionsPadding2.paddingTopLeft });
    await wrapper.vm.$nextTick();
    wrapper.setProps({ bounds: bounds });
    await wrapper.vm.$nextTick();
    wrapper.setProps({ padding: null });
    await wrapper.vm.$nextTick();
    wrapper.setProps({ bounds: bounds2 });
    await wrapper.vm.$nextTick();

    expect(mockFitBounds.mock.calls.length).toBe(2);
    expect(mockFitBounds.mock.calls[0][0]).toEqual(L.latLngBounds(bounds));
    expect(mockFitBounds.mock.calls[0][1]).toEqual(Object.assign({}, defaultOptions, optionsPadding));
    expect(mockFitBounds.mock.calls[1][0]).toEqual(L.latLngBounds(bounds2));
    expect(mockFitBounds.mock.calls[1][1]).toEqual(Object.assign({}, defaultOptions, optionsPadding2));
  });
github yagajs / leaflet-ng2 / ts / rectangle.directive.ts View on Github external
@Input() public set east(val: number) {
        const oldBounds: LatLngBounds = this.getBounds();
        super.setBounds(latLngBounds([
            [oldBounds.getSouth(), oldBounds.getWest()],
            [oldBounds.getNorth(), val],
        ]));

        this.boundsChange.emit(this.bounds);
        this.eastChange.emit(val);
    }
    public get east(): number {
github WikiWatershed / model-my-watershed / src / mmw / js / src / draw / utils.js View on Github external
function shapeBoundingBox(shape) {
    return L.latLngBounds(getGeoJsonLatLngs(shape));
}
github wladich / nakarte / src / lib / leaflet.layer.bing / index.js View on Github external
_update_attribution: function () {
        var bounds = L.latLngBounds(this._map.getBounds().getSouthWest().wrap(),this._map.getBounds().getNorthEast().wrap());
        var zoom = this._map.getZoom();
        for (var i = 0; i &lt; this._providers.length; i++) {
            var p = this._providers[i];
            if ((zoom &lt;= p.zoomMax &amp;&amp; zoom &gt;= p.zoomMin) &amp;&amp;
                bounds.intersects(p.bounds)) {
                if (!p.active &amp;&amp; this._map.attributionControl)
                    this._map.attributionControl.addAttribution(p.attrib);
                p.active = true;
            } else {
                if (p.active &amp;&amp; this._map.attributionControl)
                    this._map.attributionControl.removeAttribution(p.attrib);
                p.active = false;
            }
        }
    },
github nreese / enhanced_tilemap / public / vislib / _map.js View on Github external
TileMapMap.prototype.mapBounds = function () {
      let bounds = this.map.getBounds();
      
      //When map is not visible, there is no width or height. 
      //Need to manually create bounds based on container width/height
      if(bounds.getNorthWest().equals(bounds.getSouthEast())) {
        let parent = this._container.parentNode;
        while(parent.clientWidth === 0 && parent.clientHeight === 0) {
          parent = parent.parentNode;
        }
        
        const southWest = this.map.layerPointToLatLng(L.point(parent.clientWidth/2 * -1, parent.clientHeight/2 * -1));
        const northEast = this.map.layerPointToLatLng(L.point(parent.clientWidth/2, parent.clientHeight/2));
        bounds = L.latLngBounds(southWest, northEast);
      }
      return bounds;
    };
github tyrasd / overpass-turbo / js / ide.js View on Github external
select: function(event, ui) {
            if (ui.item.boundingbox && ui.item.boundingbox instanceof Array)
              ide.map.fitBounds(
                L.latLngBounds([
                  [ui.item.boundingbox[1], ui.item.boundingbox[0]],
                  [ui.item.boundingbox[3], ui.item.boundingbox[2]]
                ]),
                {maxZoom: 18}
              );
            else ide.map.panTo(new L.LatLng(ui.item.lat, ui.item.lon));
            this.value = "";
            return false;
          },
          open: function() {