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
Related
Here's our map
We're working on a map, trying to have different renderings depending on the zoom level.
at low zoom level, display circles
at high zoom level, display map pins with SVG logos inside
Is there any way to have them displayed at the same time at the edge zoom level?
Thanks so much for your help :)
Nothing particular to add there :)
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.
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.
I am using the Bing map version 7 for the displaying the events and its details on map. For that i have added the following reference js file "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de"
I have implemented the displaying the event pin on map and displaying the event details in infobox. I am stuck up with displaying event details in infobox which are on the boundary of the map. This infobox goes outside the map.
I have found on solution in the post
Cool Infobox and plot polygons through xml ....in bing maps , pure javascript
But even after implementing the solution mentioned(CustomInfoboxModule) in above link, i am facing the issue for the events having more details.
Check for the
Not 100% sure if I understand the question. Is your issue that the infobox falls outside of the map? If so, if you make your Infobox big enough this is bound to happen. There are a couple of solutions:
Limit the size of your description area (i.e. give it a max-height) and make it scrollable (i.e. overflow-y: auto). This will ensure that your infobox never exceeds a certain height. The custom infobox control you are using, positions the infobox based on which quadrant the pushpin is in. If the pushpin is in the top left corner the infobox is shown to the right and down. If the pushpin is in the bottom right corner the infobox is shown to the left and up. This means that if you ensure that the max height of the infobox is half the height of the map, that it should always be displayed within the map.
Alternatively, if you know the infobox will never be bigger than the height of the map, you could simply reposition the map so that the pushpin is higher and then open the infobox.
I want to use map.fitBounds to fit points on a google map. It works good, as soon as I use a taler icon for my point. my icon is 95px tall.
you can see how it looks like if I have 2 points in the map:
http://jsfiddle.net/EwQW5/4/
What I need is to calculate a point that is (95 px translated to decimal coordinates) north from the actual center of the marker markerLatlng, so that the whole icon is visible.
Any ideas on how to do this? Is there a better way?