Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to set bounds for leaflet map?

See original GitHub issue

What problem does this feature solve?

I’m using echarts-leaflet extension in my project. I want to set bounds and making map bounce back if moved away. I can get _map through this.echart.getModel().getComponent(‘leaflet’).__map, but how can I get L and how to setMaxBounds() ?

What does the proposed API look like?

I can set bounds using Leaflet library by using below code :

const southWest = Leaflet.latLng(-89.98155760646617, -180), northEast = Leaflet.latLng(89.99346179538875, 180); const bounds = Leaflet.latLngBounds(southWest, northEast); map.setMaxBounds(bounds);

How can I achieve the same thing using ‘echarts-leaflet’?

I tried using below code with echarts-leaflet extension but it’s not working.

    this.option = {
        leaflet: {
        roam: true,
        maxBounds: [[-89.98155760646617, -180],[89.99346179538875, 180]],
        maxBoundsViscosity: 1,
        center: [4.9,-1.766667],
        zoom: 2,
        tiles: [{
            urlTemplate: 'assets/{z}/{x}/{y}.jpg',
            options: {
                minZoom: 2,
                maxZoom: 6,
                attribution: ''
             }
         }]
      }

Thanks in advance for any help.

Issue Analytics

State:
Created 2 years ago
Comments:37 (16 by maintainers)

Top GitHub Comments

1reaction

plainheartcommented, Dec 2, 2021

Yes. The files suffixed with .min.js were compressed and cleaned by the minimizer. You need to do similar thing before the comparison.

1reaction

plainheartcommented, Jul 1, 2021

You’re welcome. Glad to see your issues solved.

Top Results From Across the Web

Setting bounds and making map bounce back if moved away

[Final Answer]. I bet you can easily resolve this by setting the map's maxBounds equal to its initial bounds immediately upon loading. :)....

Get the bounding box of the visible leaflet map? - Stack Overflow

If you want to get the bounds after panning and zooming, use events, like map.on('moveend', function() { alert(map.getBounds()); });.

Documentation - a JavaScript library for interactive maps

To set the restriction dynamically, use setMaxBounds method. renderer, Renderer, *, The default method for drawing vector layers on the map. L.SVG ...

View bounds - React Leaflet

Click a rectangle to fit the map to its bounds. ... const [bounds, setBounds] = useState(outerBounds). const map = useMap(). const innerHandlers =...

L.LatLngBounds

Method Returns Description getSouthWest() LatLng Returns the south‑west point of the bounds. getNorthEast() LatLng Returns the north‑east point of the bounds. getNorthWest() LatLng Returns the north‑west...