Using Proj4Leaflet with a GeoJSON layer and a projection definition
1.0.0b2 version
HTML
<script src="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="//rawgit.com/kartena/Proj4Leaflet/leaflet-proj-refactor/lib/proj4-compressed.js"></script>
<script src="//rawgit.com/kartena/Proj4Leaflet/leaflet-proj-refactor/src/proj4leaflet.js"></script>
<script src="//scs14004.geog2510.uconn.edu/seabeds.json"></script>
<div id="map" class="map"></div>
CSS
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
}
.map {
height: 100%;
width: 100%;
}
JavaScript
var map = L.map('map', {
center: [41, -73],
zoom: 9
});
var lDarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png');
map.addLayer(lDarkMatter);
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
proj4.defs("EPSG:102656", "+proj=lcc +lat_1=41.2 +lat_2=41.86666666666667 +lat_0=40.83333333333334 +lon_0=-72.75 +x_0=304800.6096 +y_0=152400.3048 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs");
var crs = {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::102656"
}
};
seabeds.crs = crs;
var seabeds_layer = L.Proj.geoJson(seabeds, {
style: style
}).addTo(map);
map.fitBounds(seabeds_layer.getBounds());