Leaflet Onemap Sample

by aaronjxz

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="https://rawgithub.com/kartena/Proj4Leaflet/master/lib/proj4js-compressed.js"></script>
<script src="https://rawgithub.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<div id="my_map" align="center" style="margin: 0 auto;"></div>

CSS

#my_map { height: 512px; width: 512px; }

JavaScript

var proj = new L.Proj.CRS.TMS('EPSG:24500', "+proj=cass +lat_0=1.287646666666667 +lon_0=103.8530022222222 +x_0=30000 +y_0=30000 +a=6377304.063 +b=6356103.038993155 +towgs84=-11,851,5,0,0,0,0 +units=m +no_defs",
    [-5878011.89743302,-41950.6574510171,96370.1129604966,10172511.897433],
    //[-20037508.3392,-20037508.3392,20037508.3392,20037508.3392],
	//[-20000,10000,100000,60000],
    {
//		origin: [30000, 30000],
		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', {
    center: [30000, 30000],
    //center: [1.25, 103.8],
    zoom: 3,
    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,
maxZoom: 8,
minZoom: 0,
tileSize: 512,
    continuousWorld: true
    //,attribution: attrib
}));

//map.setView([1.25, 103.8], 3);
//map.setView([30000, 30000], 3);