More

OpenLayers 3 displaying a vector layer

OpenLayers 3 displaying a vector layer


I have GeoJSON that happily displays on GeoJson.IO that I am trying to display on a vector layer in an OpenLayers 3 map.

The GeoJSON is in EPSG:4326, the map is in EPSG:3857.

My code is:

view = new ol.View( { // make sure the view doesn't go beyond the 19 zoom levels maxZoom: 10, projection: "EPSG:3857" }); map = new ol.Map( { layers: layers, controls: ol.control.defaults(), interactions: ol.interaction.defaults( { altShiftDragRotate: false, dragPan: true, rotate: false }) .extend([new ol.interaction.DragPan( { kinetic: null })]), // renderer: CANVAS, // Improve user experience by loading tiles while dragging/zooming. Will make // zooming choppy on mobile or slow devices. loadTilesWhileInteracting: true, target: 'map', view: view }); activationvectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), projection: "EPSG:4326" }); activationLayer = new ol.layer.Vector( { title: 'Activation Boundary', source: activationvectorSource, style: new ol.style.Style( { stroke: new ol.style.Stroke( { color: 'red', width: 2 }) }) }); map.addLayer(activationLayer); activationvectorSource.addFeatures(data);

I know I am missing something obvious, but I simply cannot get it to display

What am I missing?

GeoJSON (if needed):

{ "type":"FeatureCollection", "features":[ { "type":"Feature", "geometry":{ "type":"Polygon", "coordinates":[ [ [ 34.628906243797, -3.3379539608193 ], [ -69.477539050055, -1.4061088351833 ], [ -70.00488279996, -1.3182430566259 ], [ -71.191406237248, 0.043945308183483 ], [ -71.191406237248, 0.30761570958881 ], [ 44.824218741971, 34.813803311646 ], [ 45.527343741845, 34.813803311646 ], [ 90.354309065846, 23.762723177664 ], [ 125.3814697041, 12.280966403201 ], [ 125.51330564158, 12.189703801854 ], [ 125.51879880564, 12.184334433131 ], [ 125.51879880564, 12.17359536978 ], [ 125.4968261494, 12.033948161512 ], [ 125.45837400096, 11.990965148066 ], [ 34.980468743734, -3.3379539608193 ], [ 34.628906243797, -3.3379539608193 ] ] ] }, "properties":{ "extent":"POLYGON((-71.28123776566 -3.42762895713832,-71.28123776566 34.8875230280736,125.608630334052 34.8875230280736,125.608630334052 -3.42762895713832,-71.28123776566 -3.42762895713832))", "activationid":"HOT-0013" } } ] }

I think you need to read features usingformat.

data=' your GeoJSON goes here '; var activationLayer = new ol.layer.Vector( { title: 'Activation Boundary', source: new ol.source.GeoJSON(), style: new ol.style.Style( { stroke: new ol.style.Stroke( { color: 'red', width: 2 }) }) }); map.addLayer(activationLayer); var format = new ol.format.GeoJSON(); activationLayer.getSource().addFeatures( format.readFeatures( data, { featureProjection: 'EPSG:3857' } ) );

Additionally, I had to set center and zoom for the view. See this JSFiddle, which displays your sample data.


Watch the video: OpenLayers + GEOJSON