search

VictorCazanave / vue-svg-map

A set of Vue.js components to display an interactive SVG map
https://victorcazanave.github.io/vue-svg-map/
MIT License
86 stars 18 forks source link

is it possible to have svg map pan zoom? #26

Closed yaman3bd closed 3 years ago

yaman3bd commented 3 years ago

I'm using the map to display the users stats based on their country or region but there are some countries that are too small to be seen so is it possible to have SVG map pan zoom like the same zoom in this map demo? also, thanks for this amazing package saved me lots of time!

yaman3bd commented 3 years ago

Also is it possible to add the Continents as an individual map? Like, in the same way, I get the USA map I can get Europe or Asia or The Arab world, etc and if there is the possibility to make the maps searchable Like when I search for a specific country in the search bar only the map that matched the search shows up I wanted those features because most of the users in my project are placed in The Arab world and there are some countries that are too small! like Lebanon, Qatar, Bahrain they even can not be seen to hover the mouse over them!

VictorCazanave commented 3 years ago

I'm using the map to display the users stats based on their country or region but there are some countries that are too small to be seen so is it possible to have SVG map pan zoom like the same zoom in this map demo?

Since this component generates an SVG, I think you can use a library like panzoom (or its vue version vue-panzoom) to handle it. I've done a quick test which seems to work well.

Also is it possible to add the Continents as an individual map?

You can create and import your own maps. Or you can open an issue in @svg-maps project, but I don't know when I have time to do it. So any contributions are welcome! 👼

and if there is the possibility to make the maps searchable

It's possible but you have to implement it by yourself. Here is a quick example that you can adjust to fit your needs.

also, thanks for this amazing package saved me lots of time!

You're welcome! I'm glad this package is useful to some people 😀

VictorCazanave commented 3 years ago

@yaman3bd if your issue is not fixed, feel free to re-open it.

jswhisperer commented 3 years ago

This is a great demo, what I was looking for also... might be worth adding it as an example?

jswhisperer commented 3 years ago

darn the events seem to get swallowed by vue-pan-zoom and not fire on vue-svg-map, probably not an easy solution?

VictorCazanave commented 3 years ago

This is a great demo, what I was looking for also... might be worth adding it as an example?

Yes, it's a good idea!

darn the events seem to get swallowed by vue-pan-zoom and not fire on vue-svg-map, probably not an easy solution?

Do you mean that vue-svg-map doesn't emit events anymore? I've done a quick test and it seems to work well.

jswhisperer commented 3 years ago

Weird for me none of the clicks were getting through, Thanks for the quick test it's brilliant and I can work off that. cheers