I'm displaying a custom layer on top of the standard google map (v3). Now the users can pan out of the extents of my custom layer.
Is it possible to constrain the viewable area to a square given by the top-left and bottom right coordinates?
What you could do is prevent the user being able to pan the map at all. Set draggable:false in the mapOptions, and perhaps remove the pan control as well - panControl:false
Another idea; you could allow the user to drag/pan the map, but then if they move it outwith your bounds, you could call the panToBounds function on the map to move it back to where you want it.
Related
I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?
I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
I have a project with google maps. I want to emulate maps.google.com context menu with Zoom in and Zoom out actions.
The google.maps.Map.setZoom() is zooming map to the center point but in maps.google.com when you right click at the specific point and select Zoom In/Out action, map is panning so that this specific point stays at the same place.
For example, if I right click on the point in the left-top corner and select Zoom in in context menu, then this pont stays under cursor after zoom and doesn't go out of the map border.
Is there an easy way to implement this feature?
You could handle it with markers.
I don't know if it's the most efficient way.
So you add a marker where your current mouse position is (you can track your mouse cursor, right? Haven't done anything last time with it)
Then you set the map centre to that marker (i know, that there is a function for it) and just delete the marker.
Edit: oh sorry, i guess i misunderstood your problem. Cuz that would be the same as double clicking a point right?
So you want to have the distance mouse<->top and mouse<->left on the sceen stays as it is with the point under it, but one stage more zoomed in/out?
An equivalent problem was asked and answered at: Zoom toward mouse (eg. Google maps).
My approach to the problem is along the same lines, except that my map pixel coordinates are all calculated relative to the centre of the map (rather than top-left corner):
Determine the pixel offset of your Specific Point relative to the Center of the map. The Map Rectangle dimensions in pixels can be obtained something like map.getDiv().getClientRects()[0] and the Center is just the center of the rectangle.
Calculate what the new pixel offset of the Specific Point will be after zoom in/out. For a Google Maps zoom in all pixel offsets are doubled (for a single zoom step) so if your Specific Point was [30, 40] from the Centre, it will be [60, 80] from the Map Centre after a normal zoom in (or it will be [15, 20] after a normal zoom out.)
Calculate how much you need to adjust the Map Center after zoom, so the Specific Point is back where it began. In the above example, after zoom in we would need to map.panBy(-30, -40), alternatively after zoom out we would need to map.panBy(15, 20).
Apply the normal map.setZoom(zoom) followed by calculated map.panBy(dX, dY) to recenter.
I have a marker on a Google Map using the v3 Javascript API that is beneath another marker. When I click on the topmost marker, I would like to have the click event bubble up (down?) to the bottom-most marker with the goal of providing an optional menu for the user to choose which marker they meant to click.
Is this possible with the google.maps.event.addListener for click events?
Can I query the map for all markers that are contained by a given location, apart from hacking it myself?
As far as I know there isn't a builtin way to cycle through the markers on the click event. You can control the zIndex of each marker via the MarkerOptions which will override the default stacking based on vertical position:
All markers are displayed on the map
in order of their zIndex, with higher
values displaying in front of markers
with lower values. By default, markers
are displayed according to their
vertical position on screen, with
lower markers appearing in front of
markers further up the screen.
It think you will have to code this up yourself. I would love to hear how that goes.
I am creating a google map with some specific requirements.
The map is lets say 800x600 pixels wide.
I need all the markers to show in an area of 400x600px on the left hand side of the map.
The other half is covered with navigation panels (but the map must be visible in the margins behind the panels).
I've been able to set the zoom level according to all the markers using LatLngBounds and fitBounds, but that still fills the entire area.
How do I create a sub bounding area inside the viewport to contain all the markers and adjust zoom accordingly. I show only markers for a specific city.
This is what I need to achieve visually:
+------------------------------------------------+
|..+-----+..+-------+.....+---------------------+|
|..|.nav.|....|..nav..|......|...marker area......||
|..+-----+...+------+.....+---------------------+|
+------------------------------------------------+
The outer block represents the google map, and the spaces between the sub blocks show the map panes. So I need a sub-viewport inside the main viewport somehow.
Any ideas?
(suggestions to enhance the question are welcome as well, use comments for that pls.)
Interesting problem.
My suggestion:
Start with your bounds
Using the Projection, find out what coordinates would extend the bounds to the left by 400px.
Call fitBounds with these new coordinates.