Is there a way to add a polygon which stays the same size during the zoom action?
Currently if you add the polygon circle shape within the radius of 10 meters, when you zoom out, the polygon will get smaller which is correct functionality, but is it possible to add that shape which does not scale within the map and keeps the size no matter the zoom value?
From the documentation I cant find anything. If I create the polygon it always keeps scaling. I cant even find a way to resize manually like we can for the circles on zoom action.
You should probably just create a marker where the marker image is a polygon shape.
Related
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 use hover tooltips in my map. When an area is hovered, I show a tooltip with a small XY shift to the top left corner so that the pointer of the tooltip is not covered by the mouse cursor.
When I move mouse cursor to another area, near its border, like show in the image, the area is highlighted which is under the cursor, not under the square pointer as should be.
What are options to fix this issue? In the ideal way, I would like hover effect to be applied not to the mouse cursor coordinates, but to the coordinates of some other point that is known and changes while mouse is moving.
I once had a similar problem that I tried to solve with a different approach. I wanted to calculate the centroid of the polygon and always place the marker (in your case square pointer) on the calculated position once the user hovers over the polygon.
Main problem I had was that my polygons were concave and had holes in them (you will have the same problem if you are working with country borders) so I found a good algorithm (library) that I used to do this called Polylabel.
You can read more on this topic and how the guys from MapBox used it to solve their label positioning problems on this link.
Although this is not the answer to your question I found that this solution is fast and usable but only if the relation between the zoom level and polygon surface makes sense.
If I wanted to do something like you are suggesting I would first have a default point offset and if that offset goes outside the polygon I would find the nearest point in the polygon coordinates and attach it to that point.
To do these calculations you can use turf.js library. It has the function to return boolean value if the second geometry is completely contained by the first geometry and others that can help you to find the nearest point on the polygon border. I hope this helps!
I am currently trying to build an overlay layer for leaflet. The overlay is supposed to display 3D contents (e.g. buildings). However, I have trouble with keeping the movements on the leaflet map in sync with the ones in the scene in the overlay.
So far the canvas is as large as the map container and it will always overlay the map (like a position: fixed). In order to move around when the user is panning on the map I want to move the camera in the scene (instead of moving all geometries around). For position I use the distance from lat:0, lng:0 as THREE seems to struggle with fractal positions (e.g. when using decimal gps coordinates). Unfortunately I am struggling to find the correct formula to get the correct positions for the camera (x,y,z).
My attempt so far:
https://jsfiddle.net/hg474d6r/7/ (the _handleMove function is the relevant one)
The black dot is the center and for your reference. The red dot should remain static - relative to the map - which it doesn't.
So is there just a small issue in my formula/"calculations" or will this approach not even work at all?
Update: updated fiddle with progress and so on
It looks like that the Camera will points to a fixed Point.
If you move the Camera the Direction of the Camera Vector will be changed.
So You will see this Parallaxe Effekt.
How can I dynamically calculate the zoom that is suitable for my map?
I want to use setZoom(zoom) but I don't want to add a fixed zoom for all maps, as I'm trying around , some zooms are just too zoomed for some cases and perfect for the others.
Any suggestions?
I am using the map.fitbounds to fit all the markers I have set with in the map viewport, but the markers are right up against the sides of the viewport and I want to zoom out just a little.
I have tried
map.setZoom(map.getZoom() - 1);
but is moves out too much and seems to zoom with the viewport to the top.
Ideally I want to emulate what happens when I scroll the mouse wheel 1 click to zoom out just a little.
You can see the sample file with the issue here.
http://dl.dropbox.com/u/1367679/MapLifeEvents.html
As you can see ideally you want to be out just a little to show the markers at the base.
The zoom levels in google maps are not continuous so you can't adjust the level the way you want.What you can do is create a LatLngBounds object and use it's extend method the markers you have and lastly use the panToBounds method of map to make the map fit your markers.
In the description of this last method you will see the following
Pans the map by the minimum amount necessary to contain the given
LatLngBounds.It makes no guarantee where on the map the bounds
will be, except that as much of the bounds as possible will be
visible. The bounds will be positioned inside the area bounded by
the map type and navigation (pan, zoom, and Street View) controls,
if they are present on the map. If the bounds is larger than the
map, the map will be shifted to include the northwest corner of the
bounds. If the change in the map's position is less than both the
width and height of the map, the transition will be smoothly
animated.
Hope it helps