How can I create this page ?
http://www.kiwicollection.com/search/map
icon loading marker
sidebar
popup dialog
button on map
How can I learn how to do.
This is a simple jquery work.
for popup dialog you can check the custom popup link that work on mouse over on marker.
Button on map is just some images in background and numbers are show on above of that.
check change marker image tutorial
sidebar is just trick that work on mouse over on map and hide the side div and increase the length of map.
Examples are here
similarly i think icon loading marker is also a image the loading is showing on mouseover event.
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.
Currently I'm using drawing functionality of mapbox, but the button of start drawing is like other controls (like gps) are mapbox built in control buttons on the corner of the map.
Is there anyway that I can put the functionality to my cusomized button outside of the map component?
inspect the button and check the class name of them.
then put your map box in a div with {position: relative}, with your desired width and height
then give absolute position to your buttons..
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.
I have a Leaflet map that I resize to full screen when user clicks on provided icon and compress it to original size on second click.
I am using the invalidateSize() method after the resize is done but I have noticed that marker that I have on the map loses it's position.
The issue was that I was updating marker position on click and I think clicking on resize button caused the marker coordinates to be set to wrong position. So the leaflet works fine. I fixed it by using event.stopPropagation() on the enlargement icon instead of only event.preventDefault().
try set timeOut on that validate
setTimeout(function(){map.invalidateSize()},500)
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).