WFS with EPSG:3301 projection using Leaflet

Question

I am adding WFS points to Leaflet map, but don't see them on the map, however in console I see that all points I wanted is here with all properties and geometries. But the problem here is in projection I think.

So I define a projection like this

var crs = new L.Proj.CRS('EPSG:3301',
    '+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',
    {
        resolutions: [
            1024, 512, 256, 128,
            64, 32, 16, 8, 4, 2, 1, 0.5
        ],
        transformation: new L.Transformation(1, -40500, -1, 7017000)
    });

Then define a map

var map = L.map('map', {
        layers: [hybrid,base,satellite],
        continuousWorld: true,
        maxZoom: 13,
        minZoom: 1,
        maxBounds: new L.latLngBounds([
            [56.42, 20.87],
            [60.9, 29.23]
        ]),
        crs: crs
    }
);

And then ask Geoserver for points

    var geojsonLayer = new L.GeoJSON();

function getJson(data) {
    console.log(data)
    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

});

This is what I get in console:

Object {type: "FeatureCollection", totalFeatures: 36458, features: Array[50], crs: Object}

Could someone help me please?

Answer 1

You have missed out two parts from your code. To add the GeoJSON layer, you have to call the addTo() method within the L.geoJson object.

var geojsonLayer = new L.geoJson().addTo(map);

The second part is the most vital. Even though you have defined a custom projection with L.Proj.CRS, your map will be in the Leaflet-native WGS 84 projection (EPSG:4326). The projection you defined is only used to reproject the map data to WGS 84. Since you have already included Proj4JS in your code, you can use it to reproject your vector data to WGS 84. First define the two projections:

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 ';

Then include the coordinate conversion in your getJson() function:

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);
}

The for cycle iterates through the GeoJSON array of features, while the proj4() function reprojects the coordinates from EPSG:3301 to WGS 84.

You can see the full process in the following fiddle: http://jsfiddle.net/GFarkas/rkhzfguz/2/.