Skip to content

Instantly share code, notes, and snippets.

@alamsal

alamsal/index.html

Last active April 26, 2016 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alamsal/69cb58d519d031b3900d09af657926ca to your computer and use it in GitHub Desktop.
Save alamsal/69cb58d519d031b3900d09af657926ca to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet custom projection
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet custom projection example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>
<script src="//mapserv.utah.gov/cdn/examples/proj4leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<br/>
<div id="map2" style="width: 600px; height: 400px"></div>
<script>
/** UTM Albers equal area projection in leaflet **/
// create new Proj4Leaflet CRS
var crs = new L.Proj.CRS('EPSG:3085', '+proj=aea +lat_1=27.5 +lat_2=35 +lat_0=18 +lon_0=-100 +x_0=1500000 +y_0=6000000 +ellps=GRS80 +units=m +no_defs', {
origin: [416729.617118, 412156.942963],
bounds: [
[-2410329.835748, 13545805.10653],
[-10850237.174162, 3977377.378424]
],
resolutions: [
4891.96999883583 * 8,
4891.96999883583 * 4,
4891.96999883583 * 2,
4891.96999883583,
2445.98499994708,
1222.99250010583,
611.496250052917,
305.748124894166,
152.8740625,
76.4370312632292,
38.2185156316146,
19.1092578131615,
9.55462890525781,
4.77731445262891,
2.38865722657904,
1.19432861315723,
0.597164306578613,
0.298582153289307,
0.298582153289307 / 2,
0.298582153289307 / 4,
0.298582153289307 / 8,
0.298582153289307 / 16
]
});
// pass crs into map constructor
var map = window.map = new L.Map('map', {
crs: crs
}).setView([39.84, -98.58], 1);
var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {
transparent: true,
format: 'image/png',
layers: '0',
tiles: true,
continuousWorld: true
}).addTo(map)
/** UTM Zone 13 projection in leaflet **/
// create new Proj4Leaflet CRS
var crs = new L.Proj.CRS('EPSG:26913', '+proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m +no_defs', {
origin: [656736.237411, 3423829.249531],
bounds: [
[500000, 9997964.94294],
[500000, -9997964.94294]
],
resolutions: [
4891.96999883583 * 8,
4891.96999883583 * 4,
4891.96999883583 * 2,
4891.96999883583,
2445.98499994708,
1222.99250010583,
611.496250052917,
305.748124894166,
152.8740625,
76.4370312632292,
38.2185156316146,
19.1092578131615,
9.55462890525781,
4.77731445262891,
2.38865722657904,
1.19432861315723,
0.597164306578613,
0.298582153289307,
0.298582153289307 / 2,
0.298582153289307 / 4,
0.298582153289307 / 8,
0.298582153289307 / 16]
});
// pass crs into map constructor
var map2 = window.map = new L.Map('map2', {
crs: crs
}).setView([39.84, -98.58], 2);
var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {
transparent: true,
format: 'image/png',
layers: '0',
tiles: true,
continuousWorld: true
}).addTo(map2)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment