I wonder how to make a google map not to leave world bounds, like on google maps site itself.
I am using javascript google map api v3, here is my map options:
mapOptions = {
center: new google.maps.LatLng(20, 0),
zoom: 3,
minZoom: 3,
zoomControl: true,
I've restricted map zoom, but user still can drag out of world bounds and even select region there.
How can I prevent this behavior?
You have to make a general check using some conditional statement like if...else and comparing if the current Lat/Lng is falling out of a specified boundary (which is a world bound in your case).
I would recommend you to look at this SO question that may provide you some leads of how to proceed.
Found a nice solution I'd like to share:
if (!allowedBounds.intersects(map.getBounds())) {
map.panToBounds(allowedBounds);
}
it will return to the initial set bounds (minimum way) when the whole screen left the bounds.
Related
I'm creating a map using leaflet js, which has several markers.
The question is, how can I get riseOnHover property to work?
As mentioned in docs:
If true, the marker will get on top of others when you hover the mouse
over it.
So I got a simple code like:
let map = L.map('map').setView([0, 0], 2);
let tile = L.tileLayer('map/{z}/{x}/{y}.png', {
minZoom: 2,
maxZoom: 5,
noWrap: true,
});
tile.addTo(map);
let options = {
riseOnHover: true,
};
let marker = L.marker([0, 0], options);
marker.addTo(map);
But nothing happens. I also tried it with serveral markers at once, in case maybe there should be more than one marker to get riseOnHover to work, but that didn't work either.
I found the solution. Unfortunately, the docs explain riseOnHover property in a way which the reader thinks it is used to rise markers a little in y axis, but in real use, it increases the z-index of the marker which we are hovering.
It will work well if you have several markers which are overlapping each other. Just hover on one of them and you see the magic!
I just work on a JavaScript based map (leaflet is the framework).
The problem is I do not have much experience with maps in HTML and JavaScript.
I want to achieve that the map does not disapper after swiping to the left or right border (or even bot/top). Is there a solution to fix the bounds to the view?
I set it up like this:
var bounds = [[0,0], [750,499]];
var image = L.imageOverlay('map.png', bounds).addTo(map);
map.fitBounds(bounds);
Would be nice if someone has a suggestion to this problem.
Greetings
Tobias
UPDATE:
I found an acceptable solution:
var bounds = [[0,0], [750,499]];
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: -1,
maxBounds: bounds,
});
As u can see in the init process of the map i allocate maxBound. With this solution there are not fixed bounds as i asked for, but the map always swipes to it initial point back!
In the Google Maps API it allows you to set the bounds of a map given a list of coordinates. That's awesome. My issue is that it gives a little bit of breathing room on the sides. I'm trying to get the bounding box I'm looking at to be barely containing the bounds.
For example, I want to view California so I set the bounds to be the Northeast and Southwest corners. Instead of showing just California though, I get all of Oregon and half of Mexico.
Here's what I'm currently doing:
var geo_region = {
northeast: {
lat: 42.0095169
lng: -114.131211
}
southwest: {
lat: 32.528832
lng: -124.482003
}
}
var map_bounds = new google.maps.LatLngBounds();
map_bounds.extend(new google.maps.LatLng(geo_region.northeast.lat, geo_region.northeast.lng));
map_bounds.extend(new google.maps.LatLng(geo_region.southwest.lat, geo_region.southwest.lng));
var plot_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
plot_map.fitBounds(map_bounds);
EDIT:
A clearer example might be Wyoming since it's such a nice rectangle. If my map dimensions are the same ratio as Wyoming, I only want it to show me Wyoming.
EDIT:
Somebody suggested that I offset the bounds manually so I grabbed some data on the offsets that Google is using but I can't figure out what their formula is for deciding those offsets so I'm a long ways away from being able to do that. I even used the viewport coordinates from Google's Geocoding API but those didn't help much either.
Here's my data: https://docs.google.com/a/dovidev.com/spreadsheets/d/1HZLdDt5uiGwEtY0NbX0pfkmYVuUDndptm_-kzq0vh_w/edit?usp=sharing
This cannot be done EXACTLY because of the way google's zoom level's work. Google sets the bounds of the area but zooms in as closely as possible without cutting anything out. Because the zoom levels are incremental and their increments are so large, this often means that you'll end up with a lot of extra space.
When I tried to zoom in even once from what I thought was grossly oversized, I found that parts of the bounds had been cut off.
And thus we see that Google is already getting it as tight as it can be.
In google maps API v3, I'm creating my own custom map types by calling
map.mapTypes.set('my map', new google.maps.ImageMapType({
getTileUrl: ...
minZoom: 12,
maxZoom: 20,
...
}));
The layers have of course limited zoom range (12-20 in this example). Now the problem is the default behaviour of google maps. When I see map in scale 7 for example and switch to my map, the map automatically zooms in to zoom 12.
Instead, when I am in zoom 7 and switch to my map, I would like to see tiles with text "No map data in this scale, please zoom in".
Is there some standard option / way how to do this within API v3?
Is there some commonly used solution to this problem?
If not, what would be the easiest way to do it?
Thanks in advance.
Avoid minZoom and maxZoom options and try something like this:
map.mapTypes.set('my map', new google.maps.ImageMapType({
getTileUrl: function( position, zoom ){
if( zoom >= 12 && zoom <= 20 ){
return "http://example.com/tileservice?x="+position.x+"&y="+position.y+"&zoom="+zoom;
}else{
return "http://example.com/no_map_data_in_this_scale_please_zoom_in.png";
}
},
...
}));
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.