Issue:
So my issue is that maxZoom seems to over ride the zoom in Leaflet.
From the docs, zoom description is: Initial map zoom.
The code I am using is as follows.
Code:
var map = L.map('map', {
maxZoom: 18,
zoom: 17,
zoomControl: false
}).locate({
setView: true,
}); // set default location to current GPS location
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}).addTo(map);
Result:
The result is that the initial zoom is 18 instead of 17.
Expected Behavior:
What I want is the max zoom to go no more than 18 but start out initially as 17.
Try adding the maxzoom and minzoom to your tilelayer.
I have the starting zoom set in setView (13 there is the starting zoom).
Hope it helps a bit, because i'm not sure how it works when u get your location by gps.
var map = L.map('map').setView([8.939, 3.541], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom:7,
attribution: 'OpenStreetMap'
}).addTo(map);
Kristjan
I raised this topic a bit late and don't know if you already managed to fix the issue. I hit the same problem on a project I am currently working on and I found a solution by using setZoom() method.
On my specific case I am using Leaflet version 0.7.x and to me it was enough to concatenate the method to fitBounds() like in the example below:
map.fitBounds(group.getBounds(), {
padding: [30, 30]
}).setZoom(settings.zoom.initialZoom);
As I didn't find that much documentation regarding this specific issue, I post my solution here with the hope it can help anyone else should face the same problem.
I guess that the .locate() function resets the zoom to a level that is appropriate for the supplied user location. If you don't want this, you can set a separate maxZoom for this, too.
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!
I use OpenStreetMap with Leaflet.js.
I have a map with an indoor picture on it. The problem is when I zoom in, streets disapears. Do you know anything that can solve this plz? Tricks or tips!
EDIT:
// Load the Map
this.map_ = L.map($(selector)[0], {
center: [
48.8459382,
2.2863024,
],
maxZoom: 24,
zoom: 20,
});
I guess you have used map.options.maxZoom at a high number to let the user zoom to see your indoor image details.
However, OSM tiles are not available past zoom level 19, so the server returns 404 errors and your tiles are replaced by the Error Tile (or just a grey tile if not specified).
In that case, you would simply need to use these 2 options (together) on Tile Layer to tell Leaflet to re-use tiles from a lower zoom and to expand them:
maxNativeZoom set at 19.
maxZoom set at whatever you need, and equal to map.options.maxZoom if specified.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxNativeZoom: 19, // OSM max available zoom is at 19.
maxZoom: 22 // Match the map maxZoom, or leave map.options.maxZoom undefined.
}).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/68/
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";
}
},
...
}));
My current OpenLayers looks like the following:
a wrong map http://i1179.photobucket.com/albums/x384/yoyomyo/Picture2.png
It has twice as many continents as there should be.
I was trying to set Bounds to my map, but the entire map just refuses to render:
var map = new OpenLayers.Map('map', {restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)});
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayers([layer]);
map.setCenter(
new OpenLayers.LonLat(-71.147, -42.472).transform( new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()),
12);
Does any Map guru know what I did wrong?
WrapDateLine
Try wrapDateLine:false
It sounds like you want to set maxExtent.
http://trac.osgeo.org/openlayers/wiki/SettingZoomLevels
Otherwise I have no clue. :)
It would be easier to answer with an example to work off of. I would zoom in 12 is pretty far out. And yes you can zoom in on OSM http://www.openstreetmap.org/
In that site, they use these values
var centre = new OpenLayers.LonLat(-0.1, 51.5);
var zoom = 5;
setMapCenter(centre, zoom); //It calls map.setCenter()
Okay I give up. I think this is just the way OpenStreetMap displays its map.
I have seen many demos and they are all like the one above.