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

  <title>OpenLayers Example</title>
  <script src="../lib/OpenLayers.js"></script>
  <div style="width:100%; height:100%" id="map"></div>
  <script defer='defer' type='text/javascript'>
    var lon = 11.967;
    var lat = 57.7;

    var osm = new OpenLayers.Layer.OSM("Open Street Map");

    var trees = new OpenLayers.Layer.Vector(
        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'
        // 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(),

    map.addLayers([osm, trees]);

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    select = new OpenLayers.Control.SelectFeature(trees);

      "featureselected": onFeatureSelect,
      "featureunselected": onFeatureUnselect


    map.setCenter(new OpenLayers.LonLat(lon, lat).transform(
      new OpenLayers.Projection("EPSG:4326"),
    ), 10);

    function onPopupClose(evt) {

    function onFeatureSelect(event) {
      var feature = event.feature;
      var content = "<strong>" + feature.attributes.art 
        + "</strong> (Id: " + feature.attributes.trädnummer + ")";
      popup = new OpenLayers.Popup.FramedCloud("chicken", 
        new OpenLayers.Size(100,100),
        null, true, onPopupClose);
        feature.popup = popup;

    function onFeatureUnselect(event) {
      var feature = event.feature;
      if(feature.popup) {
        delete feature.popup;

| improve this question | | | | |
  • 1
    like maps.peterrobins.co.uk/files/ol6.html? – Mapperz Mar 10 '13 at 1:28
  • 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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.