OpenLayers-2 – How to Use Custom Map Projection on Leaflet

javascriptleafletopenlayers-2

I have an application displaying a EPSG:3414 map running on Openlayers – jsfiddle working sample that works.

I am trying to implement the same on Leaflet – jsfiddle non-working, it is not working as I may have left out something or may have gotten some concept wrong.

Unfortunately, I am quite unfamiliar and am in the process of figuring out how to get this to work.

Any help would be welcome. Thanks!

Updates:

  1. map is ESRI type using ZYX and SVY21 projection):
  2. updated code here (JS fiddle not updated)

Leaflet Sample:

var proj = new L.Proj.CRS.TMS('EPSG:3414', "+proj=tmerc +lat_0=1.366666666666667 +lon_0=103.8333333333333 +k=1 +x_0=28001.642 +y_0=38744.572 +ellps=WGS84 +units=m +no_defs",
    [4257.9355, 11470.3186, 64359.3062, 49067.5413], 
    {
        resolutions:[76.4372195411057,38.2186097705529,19.1093048852764,9.55465244263822,4.77732622131911,2.38866311065955,1.19433155532978,0.597165777664889,0.298450596901194]
    }
);

var map = L.map('my_map', {
    crs: proj,
    continuousWorld: true,
    worldCopyJump: false
});

map.addLayer(new L.Proj.TileLayer.TMS('http://{s}.onemap.sg/ArcGIS/rest/services/basemap/MapServer/tile/{z}/{y}/{x}', proj, {
    subdomains: ['t1', 't2'],
    tms: true,
    continuousWorld: true
}));

Update, more information to help. I used openlayers to implement, have not had time to try out leaflet.

Spatial Reference: PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]

Single Fused Map Cache: true

Tile Info:

    Height: 128
    Width: 128
    DPI: 96
    Levels of Detail: (# Levels: 9)
        Level ID: 0 [Start Tile, End Tile]
            Resolution: 76.4372195411057
            Scale: 288896 
        Level ID: 1 [Start Tile, End Tile]
            Resolution: 38.2186097705529
            Scale: 144448 
        Level ID: 2 [Start Tile, End Tile]
            Resolution: 19.1093048852764
            Scale: 72224 
        Level ID: 3 [Start Tile, End Tile]
            Resolution: 9.55465244263822
            Scale: 36112 
        Level ID: 4 [Start Tile, End Tile]
            Resolution: 4.77732622131911
            Scale: 18056 
        Level ID: 5 [Start Tile, End Tile]
            Resolution: 2.38866311065955
            Scale: 9028 
        Level ID: 6 [Start Tile, End Tile]
            Resolution: 1.19433155532978
            Scale: 4514 
        Level ID: 7 [Start Tile, End Tile]
            Resolution: 0.597165777664889
            Scale: 2257 
        Level ID: 8 [Start Tile, End Tile]
            Resolution: 0.298450596901194
            Scale: 1128 
    Format: JPEG
    Compression Quality: 80
    Origin:
        X: -5878011.89743302
        Y: 10172511.897433
    Spatial Reference: PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]

Initial Extent:

    XMin: -3250
    YMin: 13872.0314312493
    XMax: 68250
    YMax: 56958.47469375
    Spatial Reference: PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]

Full Extent:

    XMin: -3250
    YMin: 13872.0314312493
    XMax: 68250
    YMax: 56958.47469375
    Spatial Reference: PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]

Units: esriMeters

Supported Image Format Types: PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP

Best Answer

This problem has been solved based on the solution provided in this link

What I have derived from there which works is the complete html file contents below:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<style>
#map { width:640px; height:480px; }
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<div id="map"></div>
<script type="text/javascript">
var basemap;
var center = [1.355,103.840];    
var map2015 = L.tileLayer('http://e1.onemap.sg/arcgis/rest/services/SM256WGS84/MapServer/tile/{z}/{y}/{x}');
var basemap = L.map('map', {
center: center,
zoom: 15,
minZoom: 12,
maxZoom: 18,  
//fullscreenControl: true,
layers: [map2015]
});
basemap.attributionControl.setPrefix('<a href="http://www.onemap.sg" target="_blank">www.onemap.sg</a>');
</script>
Related Question