JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js"></script>
<script src="https://rawgit.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js"></script>
<div id="map" class="map"></div>
CSS
.map {
width: 400px;
height: 400px;
}
JavaScript
var wmsMap= L.tileLayer.wms('http://kaart.maaamet.ee/wms/alus', {
layers: 'MA-ALUS',
format: 'image/png',
maxZoom: 14,
minZoom: 3,
continuousWorld: true,
transparent:true
});
var proj1 = '+proj=lcc +lat_1=59.33333333333334 +lat_2=58 +lat_0=57.51755393055556 +lon_0=24 +x_0=500000 +y_0=6375000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
proj2 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs ';
var crs = new L.Proj.CRS('EPSG:3301',
proj1,
{
resolutions: [
1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5
],
transformation: new L.Transformation(1, -40500, -1, 7017000)
});
var map = L.map('map', {
layers:[wmsMap],
continuousWorld: true,
maxZoom: 13,
minZoom: 1,
maxBounds: new L.latLngBounds([
[56.42, 20.87],
[60.9, 29.23]
]),
crs: crs
}
);
map.setView([58.66, 25.05], 3);
var geojsonLayer = new L.geoJson().addTo(map);
function getJson(data) {
for (var i=0;i<data.features.length;i++) {
var convert = proj4(proj1, proj2, data.features[i].geometry.coordinates);
data.features[i].geometry.coordinates = convert;
}
geojsonLayer.addData(data);
}
$.ajax({
url: "http://loom-gis.geo.ut.ee:8040/geoserver/ermas/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ermas:testdata_geopnt&maxFeatures=50&outputFormat=text/javascript",
dataType: 'jsonp',
jsonpCallback: 'parseResponse',
success: getJson
});