How to set bounds for leaflet map?

eapatel commented 3 years ago

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.

echarts-bot[bot] commented 3 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

plainheart commented 3 years ago

L is in your global context, it will be window when running in the browser. To set max bounds, you could get the leaflet instance after initializing ECharts, and then invoke its method setMaxBounds.

This is a plugin contributed by a community developer, it's better to ask the original author.

eapatel commented 3 years ago

Thanks for your quick response. As mentioned earlier in my query, I've already tried setting maxBounds but it doesn't work. It seems that no such property exists.

I had already raised an issue in echarts-leaflet a few months ago (https://github.com/gnijuohz/echarts-leaflet/issues/34) but no one respond back. It's really a blocker for my project. Couldn't find any other way to solve this issue.

plainheart commented 3 years ago

@eapatel It seems buggy in setMaxBounds method. Maybe we need to do some modification.

eapatel commented 3 years ago

@plainheart I would really appreciate if you look further and update this.

plainheart commented 3 years ago

@eapatel Sure.

eapatel commented 3 years ago

Thank you @plainheart. Please update me whenever this issue get fixed.

plainheart commented 3 years ago

@eapatel Here is the new extension plugin for Leaflet. Feel free to take it a try. The following zip contains the built files and an example page.

echarts-extension-leaflet.zip

eapatel commented 3 years ago

@plainheart the provided new extension plugin for leaflet works fine. It solved my issue. Thank you so much :)

I'm using angular and I installed echarts-leaflet extension using npm. Now how can I include this new plugin?

plainheart commented 3 years ago

You could put .esm file to your project and import it.

eapatel commented 3 years ago

@plainheart I added .esm file to my project. I'm getting below errors in console this.echartsInstance is undefined this.echartsInstance.getModel() is undefined

Here is my ts code

import { EChartOption } from 'echarts'; import L from 'leaflet'; import '../../dist/echarts-extension-leaflet.esm.js';

echartsInstance: any; option: EChartOption = {};

ngAfterViewInit(): void { this.setOptions(); }

setOptions() { this.option = { leaflet: { roam: true, center: [4.9,-1.766667], zoom: 2, renderOnMoving: true, largeMode: false, }, series: [ this.getData() ] }; }

initMap() { var map = this.echartsInstance.getModel().getComponent("leaflet").getMap(); var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180); var bounds = L.latLngBounds(southWest, northEast); map.setMaxBounds(bounds);

L.tileLayer('assets/tiles/{z}/{x}/{y}.jpg', {
        minZoom: 2,
        MaxZoom: 6,
        attribution: ''
      }).addTo(map);
}

onChartInit(echarts: any) { this.echartsInstance = echarts; this.setOptions();
this.initMap(); this.resizeChart(); }

resizeChart() { if (this.echartsInstance) { this.echartsInstance.resize(); } }

And here is my template code

<div echarts
    [options]="option"
    (chartInit)="onChartInit($event)">
</div>

Can you please help me to figure out why it says instance is undefined?

plainheart commented 3 years ago

Please ensure that you have called echartsInstance.setOption() before getting the leaflet map instance. I just saw the value assignment but didn't see where the echartsInstance.setOption was invoked.

eapatel commented 3 years ago

I called this.setOption() in onChartInit() and after that getting the leaflet map instance.

onChartInit(echarts: any) {
    this.echartsInstance = echarts;
    // setting echarts option
    this.setOptions();
   // getting leaflet instance and setting options (e.g. setMaxBounds, tileLayers etc)
    this.initMap();
}

<div echarts
    [options]="option" 
    (chartInit)="onChartInit($event)"  // called when chart is initialized
>
</div>

plainheart commented 3 years ago

I'm not sure, but it seems you should call like this

echartsInstance.setOption(this.option)

eapatel commented 3 years ago

Solved all issues. Thank you @plainheart for your all support :)

plainheart commented 3 years ago

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