I'm using mapbox GL js to display linestrings.
Those linestrings are clickable in order to display various information about the linstring in a popup using :
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(popup)
.addTo(map);
But I have the feeling that the clickable area where the popup is displayed is very narrow. It can even manage to display the popup everytime on the first clic...
Is there a way to enlarge this zone ?
Thanks
A common work around I use is to create a second line layer underneath, with a line-opacity of 0.01 and a line-width of 10. Add the click handler onto that line instead.
Related
I am using react leaflet tooltip for a mapbox map.
I'm having a lot of trouble trying to keep react leaflet tooltip open when the mouse is over either the marker or the tooltip itself? I want to be able to open on hover and then click on something inside the tooltip, and I want to close when the mouse leaves the marker or the tooltip.
So if the mouse is in the red then the tooltip is open, and if it is not, then the tooltip is closed.
Any pointers appreciated
I tried what was available in the api https://leafletjs.com/SlavaUkraini/reference.html#tooltip, but I think there may be more customization I don't have the expertise to build may be needed to pull off this behavior.
One way to do it is to not set it to close when the mouse leaves.
Then it will be up to the user to either click on the map or click "close" to close the popup.
If any other markers are hovered that show popups then the original one will be automatically closed.
I drew a simplified svg map of Europe and now I want to add "layers" to it. Like if you click on Spain, it will zoom in on it, change the fill color of the path and reveal before hidden subnational borders (I also have drawn paths for these already), which are clickable again and show a pop-up with some image and text on click. I thought about using leaflet for this and using the svg as the base map, it's easy to zoom, change color and open pop-ups on click, but I have no idea how I would "reveal" new paths.
Any ideas? Thanks in advance!
I have one question. In past we just used open layers 2 and it used svg and we had some GIF markups on map (fire animations etc). Now we have open layers 3 map which use canvas to render the map. Is it now possible to still add GIF markups to the new map?
Now when I add a GIF, I just get only one "slide" from the GIF - it doesn't have animations.
What is the best way to do it? Render some SVG in canvas (how) or "refresh" the GIF element?
Thanks!
OK, I have completed this task :-) YES - it's possible to add a GIF with motion as icon to the point on map, but it requires some JS code.
I've done it with Overlays. And the hint is precompose event, which is fired on every time when something on map has been changed (very very often).
On this event we check which Feature has an icon with .gif extension (we can flag features before when we create Features).
If has, we check that overlay with this id exist:
if YES - just only change position of this overlay (coordinates of
feature)
if NOT - create new overlay with parameters like
coordinates, id of feature. Of course also create element on map
And remember to remove redundant overlays (when points are not visible in extent, or when we change the map or hide the layer).
I replaced marker shadow for background image of icon, so it will look like a frame of the image. And it looks fine. The problem is that somehow shadows has the same z-index so if two markers are together we can't see the frame (other image covers it). Because every icon has grater value of z-index than shadow. How can I change this?
The marker-shadows are always placed inside a different overlay(overlayShadow) , so you will not have any chance to move a shadow in front of any marker.
There may be different options, for example you can ommit the shadow and create a second marker using the shadow-image.
I'm overlaying a (mostly transparent) PNG on Google Maps using CSS, but it's creating a large dead spot on the map where the user can't drag the map.
Could anyone suggest how to get round this?
The obvious solution would be to use a marker overlay, but I can't do this - see Keep Google Maps marker in centre of map while dragged?
Thanks!
Try adding pointer-events:none; to the CSS for the overlay image, and see if this allows you to click through the image to the map. I tested this in Mozilla Firefox 6. You can click through the semi-transparent image and select the text:
http://jsfiddle.net/tJQWx/