Develop Reference

Handle JavaScript map framework - fix bounds or deny to swipe the map out of the view

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!

Global map tiles disappear past zoom level 19

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/

Creating a circle with Leaflet (using a positive radius)

Making a circle in Leaflet seems pretty straight forward according to the documentation, you just supply coordinates, a radius and optionally an options object:
L.circle( <LatLng> latlng, <Number> radius, <Path options> options? )
I tried doing this on a map I was working on but only managed to produce a dot instead of a circle, no matter how large of a radius I specified. I let this drive me nuts for a while and then stepped away from the code to work on other projects. I recently came back to it and on a whim I tried using a negative value for the radius:
"use strict";
var theMap = L.map("map", {
minZoom: 0,
maxZoom: 7,
crs: L.CRS.Simple
}).setView([0, 0], 0),
eventsLayer = new L.LayerGroup(),
unproject = function (coord) {
return theMap.unproject(coord, theMap.getMaxZoom());
},
coord = unproject([12057.79, 13661.21]),
southWest = unproject([0, 32768]),
northEast = unproject([32768, 0]),
radius = -8653.18, // Why isn't it working with a positive radius?!?!?
circ = L.circle(coord, radius, {color: '#f00', fillColor: '#00f'});
theMap.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer("https://tiles.guildwars2.com/1/1/{z}/{x}/{y}.jpg", {
minZoom: 2,
maxZoom: 7,
continuousWorld: true
}).addTo(theMap);
eventsLayer.addTo(theMap);
theMap.setView(coord, 7, {animate: true});
circ.addTo(eventsLayer);
For some reason it creates a circle with the negative radius.
This seems like a bug since the documentation uses a positive value for radii. Is there something I did wrong in my code that is causing this buggy behavior, or is it possibly a bug in Leaflet?

After coming across this answer I think it is a bug in Leaflet. I downloaded the current version of the dev master and added into the fiddle.
radius = 1,
The new version does accept positive values and makes a circle. It is however buggy in a different way. 0.7 specifies that the radius to a circle should be set in meters. In the current dev version even a value of 1 covers hundreds of meters.

Leaflet zoom overridden by maxZoom

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.

Display "no map data for this scale" instead of changing zoom when switching map type

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";
}
},
...
}));