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!
Related
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'm trying to add an image overlay on top a Leaflet map, but I want it to be drawn only in the area that a geo-json multipolygon closes (so treat the geo-json layer as a mask for the image). The image I want to display is rectangular, with no transparent areas.
By using a SVG mask, I achieve my purpose. As the geo-json is put in a SVG element, I'm able to fill it with my image.
https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e
But the problem arises when I start zooming in. The SVG where the geo-json is placed changes its size and shape. It becomes smaller than it should be (because areas that are outside the map are removed from the SVG), so the image is not centered on its exact position anymore.
https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b
As you can see, both when zooming and when panning the map, the image moves, and that's because the SVG where the geo-json is displayed changes its width and height.
Here is a fiddle with the code I came up at the moment: https://jsfiddle.net/8n3m6t51/
I can think for several solutions:
Force Leaflet to always draw the full geo-json area, even those polygons or areas that are out of the screen.
Use a ImageOverlay and set it a mask (but I think this one would be impossible).
But at the moment I haven't figured out what to do to get this issue fixed.
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 am having trouble in developing mobile-web application. I want to allow users to upload map as an image of any location and other will tag or add marker on different position of it. I want want this functionality with zoom in and zoom out. I am able to do this without zoom in and zoom out. Can any body help me to achieve this by adding zoom in and zoom out on image with tags.
Have a look here https://github.com/can3p/iviewer/wiki. it is jquery component that you can use and has examples of zooming -in and -out with the coordinates and markers.
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.