Openlayers vector editing example

This is a sample page written to be used as reference for a php application. It uses geojson to specify items to be displayed on a map, and allows them to be edited or new ones to be created. The changed state of the map can be rewritten back to text boxes, for instance, for saving to a database. Further information is included in the comments with the javascript code; see the page source.

Coordinates for the mouse pointer will appear below.


The source geojson is provided in the first box below. When the update button is clicked, the contents of the vector layer are written back to geojson, and this is shown there, replacing the original content. In addition, it is also converted further into the custom format in the second textarea box below.

The values below are the map centre's location and the map zoom value. They are updated when the update button is clicked.

Latitude Longitude Zoom level

Tested and working successfully with Firefox 3.6 on Mandriva Linux; Firefox 10 on Mageia Linux; Chromium 20 on Mageia; IE8 on Windows XP; Opera 12.1 on Windows XP.

Failed with Konqueror 4.4.5 where it was not possible to complete drawing polygons. Failed with Konqueror 4.8.5 where it was not possible to complete polygons and further, spurious lines appeared that joined all individual points to the top left of the window.