search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

The mapView option on highMaps doesn't work #226

Closed fzc-seaside-villager closed 1 year ago

fzc-seaside-villager commented 1 year ago

I checked the online map demo provided on the readme page https://codesandbox.io/s/highcharts-vue-demo-cop9z

and I edited and added the mapView Option to the chartOption

mapView: {
  zoom: 1,
  maxZoom: 4,
}

here is the link to the edited version https://codesandbox.io/s/highcharts-vue-demo-forked-d7484w?file=/src/components/Chart.vue

but seems the mapView option doesn't work, maxZoom is set to 4, still can zoom in too far, is it an issue/bug here or have I missed anything?

jszuminski commented 1 year ago

Hi, thanks for the question!

You're right, this demo needs to be updated. We'll take care of this in the near future.

However, this is not an issue with the Highcharts Vue wrapper, but with Highcharts Maps.

GeoJSON maps are supported, but not recommended for Highcharts as they may cause a lot of bugs just like the one you've encountered. Here's a reading that you might find useful: https://www.highcharts.com/blog/tutorials/highcharts-now-prefers-topojson-maps/

What I recommend you to do is to use the TopoJSON map. Then, everything should work correctly. Here's a demo: https://codesandbox.io/s/busy-feynman-p73hi5

Let me know if that works for you!

fzc-seaside-villager commented 1 year ago

Thank you for your response.

I did a few fast-checkings on the new demos you provided. The zoom control works with the highcharts & map-collection packages upgraded to the latest versions (at least 10 I think) and the world.geo.json changed to world.topo.json.

I'll check it in my project as well, and then get new feedback back to you soon.