Position of tiles using MapProxy server is wrong

Question

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

Answer 1

Let me quote the Leaflet documentation about L.TileLayer options:

tms Boolean false If true, inverses Y axis numbering for tiles (turn this on for TMS services).

See also the section on TMS in the Leaflet WMS & TMS tutorial.