OpenLayers 2 Guide – How to Use OpenLayers and GeoJSON Together

geojsonopenlayers-2

Recently I started learning Openlayers 2x and I've been struggling for a while now with a GeoJSON and it's projections.

So, here is the deal;

I successfully added wms layers from ( http://geoportal.dgu.hr/podaci-i-servisi/svi-servisi-i-aplikacije/ ) with a projection HTRS96/TM (EPSG:3765) and then when I try to add vector layer it doesn't render it. Vector layer was created using QGIS software with a projection code:

"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3765" }

Here is the OpenLayers code:

var map;

function init() {
    map = new OpenLayers.Map('map_element', {
        projection: 'EPSG:3765',
        maxExtent: new OpenLayers.Bounds(426906.034398, 5101783.64664,
        468058.881494, 5123976.6968),
        numZoomLevels:15,
        maxResolution: 'auto',
        units: 'm'              
    });
    var wms = new OpenLayers.Layer.WMS(
        'DOF 1:5000',
        'http://geoportal.dgu.hr/wms?layers=DOF',
        {}
    );

    var wms2 = new OpenLayers.Layer.WMS(
        'TK 1:25 000',
        'http://geoportal.dgu.hr/wms?layers=TK25',
        {}
    );

        var wms3 = new OpenLayers.Layer.WMS(
        'HOK',
        'http://geoportal.dgu.hr/wms?layers=HOK',
        {}
    );

    map.addControl(new OpenLayers.Control.LayerSwitcher({}));
    map.addControl(new OpenLayers.Control.MousePosition());


    var KZZ = new OpenLayers.Layer.Vector("KZZ", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "KZZ_JLS.json",
        format: new OpenLayers.Format.GeoJSON()
    }),
    strategies: [
        new OpenLayers.Strategy.Fixed()
    ]
});

    map.addLayers([wms,wms2,wms3,KZZ]);
    map.zoomToMaxExtent();
}

And here is GeoJSON layer (fragment of it, whole file can be downloaded from this link https://dl.dropboxusercontent.com/u/126827789/KZZ_JLS.json):

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3765" } },                                                                         
"features": [
{ "type": "Feature", "properties": { "POVRINA": 27.027842695, "NAZIV": "Stubièke         Toplice" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 457191.01612696185, 5094147.6274271049 ], [ 457199.98992743361, 5094130.2420611409 ], [ 457231.34151837695, 5094112.0906051407 ], [ 457283.71295271069, 5094094.2316290718 ], [ 457310.09355065826,....

How can I render GeoJSON and add it to this file?

This problematic openlayers map can be viewed here htt()p://interaktiva.pregrada.hr/nc/–> to low reputation to add 2nd link on my post, pls remove ()

Best Answer

The final answer is: your vector data is out of range. There were two problems with your map.

The first was, that your dataset contains three coordinate for every point, while OpenLayers 2 can only handle two. To fix this, you have to include an ignoreExtraDims parameter to your format object:

format: new OpenLayers.Format.GeoJSON({
    ignoreExtraDims: true
})

The second problem is, that your data is in the wrong place. Your WMS layers range roughly from 430.000 m to 480.000 m in X axis, and from 5.100.000 m to 5.130.000 m in Y axis. Your data, however ranges from 5.546.000 m to 5.597.000 m in X axis, while the Y range is correct. You have to shift your data to the correct place prior to visualizing.

Related Question