1

I'm trying to display a polygon over a city using GeoJSON, I validated the file using http://www.mapshaper.org/ and the polygon displays just fine, but when I try to display this layer over an OpenStreetMap (OSM) layer I don't see anything.

This is my code:

var data = '{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::2039" } }, "features": [ { "type": "Feature", "properties": { "id": null }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 179029.98345868432, 667951.77896603046 ], [ 179242.5448687863, 667376.61279751919 ], [ 179417.59544181143, 667201.56222449406 ], [ 181343.15174508799, 667551.66337054444 ], [ 181718.26011585613, 667714.21033121063 ], [ 181418.17341924162, 666526.36715711141 ], [ 181243.12284621646, 665576.09261783212 ], [ 181155.59755970389, 665288.50953357643 ], [ 181443.18064395949, 665025.93367403874 ], [ 181280.63368329327, 664375.74583137396 ], [ 181118.08672262708, 663713.05437635025 ], [ 181193.10839678071, 663400.4640673768 ], [ 181405.66980688268, 663450.47851681255 ], [ 181555.71315518994, 663412.96767973574 ], [ 181768.27456529188, 663200.40626963368 ], [ 182043.35403718855, 662962.83763481386 ], [ 181893.31068888129, 662662.75093819934 ], [ 182468.47685739247, 662212.62089327758 ], [ 182518.49130682822, 661349.87164051086 ], [ 182455.97324503353, 660874.7343708711 ], [ 181843.29623944554, 659786.92009564349 ], [ 180242.83385750139, 660949.75604502473 ], [ 179830.21464965641, 661387.38247758767 ], [ 179205.03403170948, 660537.13683717977 ], [ 178042.19808232816, 660424.60432594933 ], [ 177767.11861043153, 660599.65489897446 ], [ 177166.94521720248, 660537.13683717977 ], [ 176604.28266105024, 660524.63322482083 ], [ 176144.77490685924, 660612.15851133352 ], [ 176032.2423956288, 660887.23798323015 ], [ 176107.26406978242, 661549.92943825398 ], [ 176344.83270460228, 662362.66424158495 ], [ 176894.99164839557, 662725.26899999415 ], [ 177170.07112029221, 662837.80151122459 ], [ 177482.66142926569, 663162.89543255698 ], [ 177545.17949106038, 663738.06160106824 ], [ 177557.68310341932, 664000.63746060594 ], [ 177732.73367644445, 664113.16997183638 ], [ 178207.87094608412, 665701.12874142162 ], [ 178020.31676070005, 665876.17931444675 ], [ 177982.80592362324, 666151.25878634339 ], [ 178370.41790675034, 666126.25156162551 ], [ 178570.47570449335, 667101.53332562267 ], [ 178958.08768762046, 667826.74284244119 ], [ 179029.98345868432, 667951.77896603046 ] ] ] } } ] }';
var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: new ol.source.Vector({
                object: data,
                format: new ol.format.GeoJSON()
            })
        })
    ]
});
var telAviv = ol.proj.transform([34.81185, 32.04314], 'EPSG:4326', 'EPSG:3857');
map.setView(
    new ol.View({
        center: telAviv,
        zoom: 10
    })
);

Please notice the coordinates the client supplied me, I'm not sure how to project them onto the map over Tel Aviv city.

I'm using OpenLayers version 3.16.0.

Link to JSFiddle.

1

Here is the solution that works (I hope its correct also): https://plnkr.co/edit/2PG4KhH29pv9n2ZHpjvT?p=preview

Notice: you have to define your projection in index.html with proj4.js.

Edit: I have just seen that you are using different version of OpenLayers3. I think it might work with that one also, try changing this version to yours and see if it does.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.