Sign up ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I wondered if anyone has some OpenLayers GeoJSON code to read, create, modify and delete features (i.e. instead of using WFS-T)?

This is how far I've come - I've no problem changing the pop-up to a html form to modify attributes, it's more the linking the create button to a pop-up to enter data and then catch the move feature event, and last a 'delete feature' button

  OpenLayers Example

    var lon = 11.967;
    var lat = 57.7;

var osm = new OpenLayers.Layer.OSM("Open Street Map"); var trees = new OpenLayers.Layer.Vector( "Träd",{ protocol: new OpenLayers.Protocol.HTTP({ url: 'postgis2geojson.php?geotable=trad&geomfield=wkb_geometry&fields=ogc_fid,%20plats,%20tr%C3%A4dnummer,%20art', format: new OpenLayers.Format.GeoJSON({ internalProjection: new OpenLayers.Projection("EPSG:3857"), externalProjection: new OpenLayers.Projection("EPSG:4326")}) }), strategies: [new OpenLayers.Strategy.Fixed()] }); var toolbar = new OpenLayers.Control.Panel({ displayClass: 'olControlEditingToolbar' }); toolbar.addControls([ // this control is just there to be able to deactivate the drawing // tools new OpenLayers.Control({ displayClass: 'olControlNavigation' }), new OpenLayers.Control.ModifyFeature(trees, { displayClass: 'olControlModifyFeature' }), new OpenLayers.Control.DrawFeature(trees, OpenLayers.Handler.Point, { displayClass: 'olControlDrawFeaturePoint' }) ]); var map = new OpenLayers.Map("map", { projection: new OpenLayers.Projection("EPSG:3857"), units: "m", displayProjection: new OpenLayers.Projection("EPSG:4326"), controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.KeyboardDefaults(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Scale(), new OpenLayers.Control.Attribution(), toolbar ] }); map.addLayers([osm, trees]); map.addControl(new OpenLayers.Control.LayerSwitcher()); select = new OpenLayers.Control.SelectFeature(trees);{ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(select); select.activate(); map.setCenter(new OpenLayers.LonLat(lon, lat).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 10); function onPopupClose(evt) { select.unselectAll(); } function onFeatureSelect(event) { var feature = event.feature; var content = "<strong>" + + "</strong> (Id: " + feature.attributes.trädnummer + ")"; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(event) { var feature = event.feature; if(feature.popup) { map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; } }

Thanks in advance

share|improve this question
like – Mapperz Mar 10 '13 at 1:28
Thanks Mapperz - that's helping me on the way! – user10895 Mar 10 '13 at 7:59
So when I ADD a feature with the little pencil, what event can I catch to bring up a pop-up to enter data? – user10895 Mar 10 '13 at 8:05
Seem to be getting there - have changed the DrawFeature control to: new OpenLayers.Control.DrawFeature(trees, OpenLayers.Handler.Point, { displayClass: 'olControlDrawFeaturePoint', featureAdded: treesFeatureAdded }) and created the function treesFeatureAdded - will update the code later – user10895 Mar 10 '13 at 9:52

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.