ngx-leaflet icon indicating copy to clipboard operation
ngx-leaflet copied to clipboard

ngx-leaflet doesn't zoom to geoJSON polygon on getBounds (point works fine)

Open Siedlerchr opened this issue 6 years ago • 1 comments

First of all thanks for the library integration, however when I add a geoJSON polygon layer and set the map's bounds to the layer's bounds, it's not zooming to the polygon. It is showing me the whole world

Whenever my geoJSON is of type Point it works fine and it correclty zooms to the point. The polygon, however is shown as a little blue dot in the North of Germany. When I manually zoom in, it's fine.

geoJson

I also tested it with leaflet.js directly in a simple html page and there it correclty zooms to the polygon bounds.

My setup is ionic 4, "@ionic/angular": "^4.4.2, with angular 7.2.2 , @asymmetrik/ngx-leaflet": "^5.0.2", "leaflet": "^1.5.1",

sample:

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        })
    ],
    zoom: 10,
    center: [51.71905, 8.75439]
  };

  showLocationOnMap(value: GeoJsonObject): void {
  let geoLayer = L.geoJSON(value); 
  geoLayer.addTo(this.map);
    this.fitBounds = geoLayer.getBounds();

    setTimeout(() => {
      this.map.invalidateSize();
    }, 1000)
}

 onMapReady(leafletMap: Map) {
    // Do stuff with map
    this.map = leafletMap; 
    let geojson = {
      "type": "Polygon",
      "coordinates": [
        [
          [
            8.797849,
            51.703248
          ],
          [
            8.79838,
            51.703121
          ],
          [
            8.797918,
            51.702988
          ],
          [
            8.797849,
            51.703248
          ]
        ]
      ]
    }

this.showLocationOnMap( geojson).
  }

Siedlerchr avatar Jun 18 '19 12:06 Siedlerchr

This probably has to do with what is being returned by 'getBounds()'. I'd probably start by inspecting the values in the two examples. Get bounds should define a bounding box. If it's not returning what you expect, you will probably need to dig into leaflet's docs to figure out what's going on.

reblace avatar Nov 04 '19 23:11 reblace