Im struggling to make possible zooming the map when hovering a marker.
https://codesandbox.io/s/my2p15knj8 - example with marker
However, it is possible but only if I use feature instead of a marker.
https://codesandbox.io/s/l42n3np7xm
Unfortunately - feature is almost unstylable, cant pass children to it nor cant style them independently.
Looking for some solution how to make able to zoom map even if hovering marker. As you can see, my markers are kinda big so it will be hard for user to avoid them while scrolling :)
Thank you!
I think that might be a bug in react-map-gl since the vanilla JS Marker example doesn't suffer the same issue.
Related
Overlapping markers are unspiderfied when I click the map even though I have {keepSpiderfied: true}, how can I always keep all markers spiderfied?
Hitbox on my custom markers are also buggy when I have more than 2 markers overlapping, any solution to this would be insanely helpful.
Thx!
The sole purpose of keepSpiderfied is to avoid unspiderfying when you click on a marker.
Clicking on the map will call unspiderfy regardless of that setting, and so does changing zoom or mapType.
So I guess your only choice here is to fork the repo, or just download the library and add it to version control making your own modifications.
In my Cordova project, I have a slider with multiple zoomable images (by iScroll) and I would like to use map to highlight some area always. But I have tried many libraries like imagemapster.js, maphilight.js but these libraries prevent images' zooming feature. Is there any library that I can use to highlight area only.
Any help or idea. Thanks in advance!
I got figured it out. For someone like me, here is my solution.
I used imagemapster.js for highlighting map areas. But I applied imagemapster first and then I grab those whole element and then applied iScroll(version 4) for zooming. First, i was doing backward, that's why I can't zoom in or out anymore. Cheer!
So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.