CODEWITHSUNDEEP
javascriptecharts
esion
esion

Reputation: 238

eCharts 3 - zoom on geo map onclick

Does anyone know how to click on a country, then have it zoom in on that country/area in a 2D geo world map?

I am using the world 2D map that is provided in eCharts 3. So my options look like this:

geo: {
      name: '2D Global Map',
      type: 'map',
      map: 'world',
      roam: true,
      label: {
          emphasis: {
              show: false
          }
      },
...

Here is what I have thus far. When I click it just zooms straight in to 4 rather than where I clicked.

myChart.on('click', function (params) {
  myChart.setOption({
    geo: {
        zoom: 4
      }
  });
});
    myChart.setOption(option);

I have tried to find ways to zoom in on the x and y offsets, but that doesn't work.

I also tried to center the map first like this but you need the latitude and longitude of where to center the map inside the array. The map uses JSON for the coordinates, and I can see them, but I can't get them to pull into the array.

myChart.on('click', function (params) {
  myChart.setOption({
    geo: {
        center: [(need to get lat/long of where clicked)],
        zoom: 4
      }
  });
});
    myChart.setOption(option);

Any thoughts on ways to do this?

Upvotes: 5

Views: 3442

Answers (1)

esion
esion

Reputation: 238

Just in case anyone else is having this same problem, I was able to solve it in this manner:

myChart.on('click', function(params) {
            if (params.data) {
                myChart.setOption({
                    geo: {
                        center: params.data.value,
                        zoom: 6
                    }
                });
              } else {
                myChart.setOption({
                    geo: {
                        center: [0,0],
                        zoom: 1
                    }
                });
              }
            myChart.setOption(option);
        });

It doesn't fully solve the problem where I wanted to be able to zoom in on any country, but it does solve the problem in the fact that I can zoom into a data point inside a country.

If anyone else has suggestions on how to do the country part please let me know.

Upvotes: 3

Related Questions