I configured and deployed Mapproxy server on Ubuntu-14.04 and trying to get TMS service from Mapproxy. When I view my map in a web browser by referencing the host server directly(MapProxy Demo), everything is seen appropriately. But, when the same request is processed via Leaflet webpage, the order of tiles is messed up (the tile position is wrong.)
I thought something is wrong with projection so I tried to fix it using Proj4Leaflet API (code included below.) What can be the appropriate projection and CRS to fix this in leaflet? Is there any other solution?
Following is my code in the .yaml file
services:
demo:
tms:
use_grid_names: true
# sets the tile origin to the north west corner, only works for
# tileservice at /tiles. TMS at /tms/1.0.0/ will still use
# south west as defined by the standard
origin: 'nw'
layers:
- name: tms
title: TMS
sources: [osm_cache_in]
caches:
osm_cache_in:
grids: [osm_grid]
# cache will not be stored locally
# disable_storage: true
# a tile source you want to reproject
sources: [osm_source]
sources:
osm_source:
type: tile
grid: osm_grid
url: http://a.tile.openstreetmap.org/%(z)s/%(x)s/%(y)s.png
grids:
osm_grid:
base: GLOBAL_MERCATOR
srs: 'EPSG:3857'
origin: nw
globals:
# cache options
cache:
# where to store the cached images
base_dir: './cache_data'
# where to store lockfiles for concurrent_requests
lock_dir: './cache_data/locks'
# where to store lockfiles for tile creation
tile_lock_dir: './cache_data/tile_locks'
image:
resampling_method: bilinear # nearest/bilinear
format: image/png
HTML - leaflet file code
var crs = new L.Proj.CRS(
'OSGEO:41001','+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs',
{
resolutions: [8192, 4096, 2048, 1024, 512, 256, 128],
origin: [0, 0]})
var map = new L.Map('map',{
crs: crs
}).setView([21.46,78.3084],5);
L.tileLayer('http://localhost/mapproxy/tms/1.0.0/tms/osm_grid/{z}/{x}/{y}.png', {
maxZoom: 20,
minZoom: 0,
continuousWorld: true,
attribution: 'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);
}
initmap();
Here is how the result looks like, against how it should be seen.
Result is looking like this
This is how result is expected and can be seen on MapProxy Demo
