title: Saving layer from OpenLayer 3 Map created by user
body: <p>I'm trying to correctly save an <code>OpenLayer 3 Map</code> layer created by a user in order to display it another map using <code>geoJSON</code>, but I'm having troubles with this.</p>
  
  <p>On the <strong>client</strong> side I save the dinamic layer in this function:</p>
  
  <pre><code>function addInteractions() {                
      draw = new ol.interaction.Draw({
        source: source,
        type: typeSelect.value
      });
      draw.on("drawend", function(e) {
        var f = e.feature;
        features.push(f);
        geoJson = format.writeFeatures(features);
        console.log(geoJson);
        document.getElementById('js-textarea').value = geoJson;
      });
      map.addInteraction(draw);
      snap = new ol.interaction.Snap({source: source});
      map.addInteraction(snap);
  }
  </code></pre>
  
  <p>Then the <code>geoJSON</code> object is saved into a <code>.json</code> file, but when I try to display it, it doesn't appear on the map.</p>
  
  <p>Here his my display function:</p>
  
  <pre><code>var geoDataUrl = '/data/' + '{{percorso._id}}' + '.json';
  var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: geoDataUrl,
        format: new ol.format.GeoJSON()
      }),
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#ffcc33'
          })
        })
      })
    });       
    var raster = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    var map = new ol.Map({
      layers: [raster, vectorLayer],
      target: 'map',
      view: new ol.View({
        center: {{#if percorso.mapCenter}}[{{percorso.mapCenter}}] {{else}} ol.proj.transform([9.688053, 45.362760], 'EPSG:4326', 'EPSG:3857'){{/if}},
        zoom: {{#if percorso.zoomLevel}}{{percorso.zoomLevel}} {{else}} 13{{/if}}
      })
    });
  </code></pre>
  
  <p>I also tested the display function with other layers (for example the <a href="https://openlayers.org/en/v4.6.4/examples/data/geojson/countries.geojson" rel="nofollow noreferrer">provided one</a> on the OpenLayer examples website ) and it works fine</p>
  
  <p>On the <strong>server</strong> side I save the <code>geoJSON</code>object with this function, where <code>oggetto_mappa</code> is the dinamic <code>geoJSON</code> object:</p>
  
  <pre><code>var jsonMappa = JSON.stringify(eval("(" + oggetto_mappa + ")"));
  require("fs").writeFile("./public/data/" + id_perc + ".json", jsonMappa, 'utf8', function(f_err) {
       if(f_err)
         console.log(f_err);
  });
  </code></pre>
  
  <p>For refernce this is what my function saves onto the <code>.json</code> file:</p>
  
  <pre><code>{
  "type":"FeatureCollection",
  "features":[
      {
          "type":"Feature",
          "id" : "aa",
          "geometry":
          {
              "type":"LineString",
              "coordinates":[
                  [1073328.751180445,5680150.227413875],
                  [1077857.6451063417,5682481.556776573],
                  [1070385.9255914658,5679156.546046168],
                  [1076825.7452244917,5680226.66444216],
                  [1073328.751180445,5680169.336670946]
              ]
          },
          "properties":null
      },
      {
          "type":"Feature",
          "id" : "ab",
          "geometry":
          {
              "type":"LineString",
              "coordinates":[
                  [1073328.751180445,5680169.336670946],
                  [1071628.0273010998,5677130.96479661]
              ]
          },
          "properties":null}
      ]
  }
  </code></pre>