stopopol stopopol - 2 years ago 98
Javascript Question

Saving the coordinates of multiple points in OL3

I'm using OpenLayers3 and would like to have map where a user can draw 1 or more points.
I already implemented that. However, I'd also like to save the coordinates of every point.

But I don't really know how to do that, since OpenLayers3 is rather new and I'm having a hard time finding examples online.

This is what I have so far:

var modeSelect = document.getElementById('type');
var draw; // global so we can remove it later

var featureOverlay = new ol.FeatureOverlay({
style: new{
fill: new{
color: 'rgba(255, 255, 255, 0.2)'
stroke: new{
color: '#ffcc33',
width: 2
image: new{
radius: 7,
fill: new{
color: '#ffcc33'
// modify end

function addInteraction() {
var value = modeSelect.value;
if (value == 'Point') {
draw = new ol.interaction.Draw({
//source: source,
features: featureOverlay.getFeatures(),
type: /** @type {ol.geom.GeometryType} */ (value)
// modify
if (value == 'Modify') {
var modify = new ol.interaction.Modify({
features: featureOverlay.getFeatures(),
// the SHIFT key must be pressed to delete vertices, so
// that new vertices can be drawn at the same position
// of existing vertices
deleteCondition: function(event) {
return &&;

Answer Source

Ok. I came up with a solution that is at least a step in the right direction. I rearranged the code in general and implemented this function:

function saveData() {
    // save it as geojson
    var format = new ol.format['GeoJSON']();
    // this will be the data in the chosen format
    var data;

    try {
    // convert the data of the vector_layer into the chosen format
    data = format.writeFeatures(vector_layer.getSource().getFeatures());
    } catch (e) {
    // at time of creation there is an error in the GPX format (18.7.2014)
    $('#data').val( + ": " + e.message);

    $('#data').val(JSON.stringify(data, null, 4));


I'm still struggling to write it to an actual .json-file on the server though, but I'm pretty confident I'll find a solution.


It was pretty simple actually. Just wrote this piece of php that does all the work:


    include 'dbconnection.php';

        $str="INSERT INTO multipoint_tabelle (id, geom) VALUES (1,(SELECT ST_Multi(ST_Union(geom)) FROM punkttabelle));";
        $test_str=pg_query($conn, $str);

    // write GeoJSON 

        $json = $_POST['json'];
        //$points_coords = $_POST['coords'];

        if (json_decode($json) != null) { /* sanity check */

        // w+ Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist
            $file = fopen('points.json','w+');
            fwrite($file, $json);
        } else {

        // handle error 

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download