Develop Reference

Leaflet starting position

I am currently trying to set up a custom map with leaflet using custom tiles. My tile names are the following: (those are all the tiles I have)
Whenever I open my map, I just see a blank space field with the control things. When I open the developer tools I don't see any tiles until I zoom in and out again, the tiles now are e.g. 489,1 etc. which is far from the coordinates of my tiles. The script I currently use for the map is:
var map = L.map('map', { center: [0, 0], zoom: 13 }).setView([0, 0], 0);
L.tileLayer('https://map.******.net/tiles/{x},{y}.png',
{
attribution: 'Tiles by ******',
maxZoom: 17,
minZoom: 9
}).addTo(map);

Leaflet: misalignment of tiles and negative y coordinates

I am trying to generate a custom non-geographical map with Leaflet using my own tiles.
For the moment I created 10x10 dummy tiles of size 256x256px each with a random solid color using imagemagick.
They are placed in public/map-tiles/1/map_x_y.png where x takes values from 0 to 9 (resp. y).
Since this is a non-geographical map, I paid attention to change crs to L.CRS.Simple (see http://leafletjs.com/examples/crs-simple/crs-simple.html):
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
center: [0, 0],
crs: L.CRS.Simple
}).setView([0, 0], 1);
L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', {
bounds: [[0, 0], [2560, 2560]],
tms: true
}).addTo(map);
However this produces tiles slightly shifted and thus misaligned:
Also, tiles with negative y coordinates are fetched, which results in 404d requests, as seen in the console.
What can be the cause of this behavior?
EDIT 1: as IvanSanchez pointed out, the misalignment was caused by the missing leaflet.css stylesheet.
I still have the problem with negative coordinates. As suggested, I added bounds (see updated code above). Observations:
with bounds [[0, 0], [2560, 2560]]: no tiles displayed altogether, blank screen.
with bounds [[-1280, -1280], [1280, 1280]]: all tiles displayed, but negative tiles fetched (eg (5,-1)) resulting in 404s.
EDIT 2: after several tests it looks like the negative tiles are indeed the product of the y-axis handling (http://leafletjs.com/examples/wms/wms.html). The origin is top left, y going downward. I expected the tiles below the origin to be fetched, not above.
What I tried in order to keep my convention with x and y both increasing (that is x increases to the right, y increases downward, tiles with positive coordinate components are fetched from 0 to 9):
setting tms: true for tileLayer. No success, tiles with negative y are still fetched .
changing {y} to {-y} in the tileLayer source path. Results in Error: No value provided for variable {-y}. My script is using Leaflet 1.3.1.

In a map with L.CRS.Simple, all TileLayers have infinite bounds by default.
If you want a TileLayer to request tiles only in a given area, read the Leaflet API documentation, specifically a TileLayer option named bounds (inherited from GridLayer options). Let me quote:
bounds
type LatLngBounds
default undefined
If set, tiles will only be loaded inside the set LatLngBounds.
You also mention:
Weirdly enough, it tries to fetch tiles with negative coordinates [...]
That's not weird, it's behaviour as designed. There is nothing inherently wrong (nor weird) with negative coordinates, and negative tile coordinates are valid and documented in some tile standards
So if you have 10x10 tiles of 256px in size ranging from [0, 0] to [10, 10], you might want something like
L.tileLayer('/map-tiles/map_{x}_{y}.png', {
bounds: [[0, 0], [2560, 2560]]
}).addTo(map);
If the center of your data is the [0, 0] point and your tiles span from [-5, -5] to [5, 5] you might instead want something like
L.tileLayer('/map-tiles/map_{x}_{y}.png', {
bounds: [[-1280, -1280], [1280, 1280]]
}).addTo(map);

The problem boils down to two aspects:
misalignment: the leaflet.css stylesheet was missing and simply needed to be linked to in the HTML of the page.
negative tiles fetched: for Leaflet the y-axis goes downward. I expected tiles to be fetched from left to right, top to bottom with an origin set to the top left corner. Instead, negative y's were fetched. Since my tiles' names are map_x_y.png where x and y take values in {0:9}, this resulted in 404d requests. Setting negative bounds fixed the issue with bounds: [[0,0],[-1230,1230]] (notice the minus sign). 1230 corresponds to the number of tiles at zoom 0 times the size in pixel of one tile.

How to make a google map not to leave world bounds?

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.

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