Time for action – using ol.interaction.Draw to share new information on the Web

To be able to do a basic save, we have developed a server-side script based on Node.js, a software platform for scalable server-side and networking applications. For the client side, the code will be more classical.

Install Node and NPM, an executable to manage Node.js library dependencies if you don't already have it, using https://github.com/joyent/node/wiki/installation#installing-without-building.
Next, retrieve the index.js and package.json files from the code from upcoming_url and put them in the ol3_samples directory.
Install the dependencies from the command line firing from the ol3_samples folder path, as follows:
```
npm install
```
Download also the file features.geojson into ol3_samples/assets/data/.
Try if the server side works by firing the node index.js and opening http://localhost:3000/features.geojson. You should see something like the following:
```
{type: "FeatureCollection", features: [ ]}
```
Create a new file 2360_08_07_create_new_content.html in the usual sandbox folder by copying 2360_08_01_simple_select.html.

Empty the HTML body to replace the HTML content to create a <div> tag for the map and a form to enable you to choose future drawing types (point, line string, and polygon) with the following code:

<div id="map" class="map">
</div>
<form class="form-inline">
  <label>Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
  </select>
</form>
<script src="../assets/ol3/ol.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Start <script> without forgetting to close it at the end, and copy the following code into it:

var raster = new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
});

var source = new ol.source.GeoJSON({
  url: '/features.geojson'
});

var vector = new ol.layer.Vector({
  id: 'vector',
  source: source,
  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 map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4
  })
});

You can already open your browser at http://localhost:3000/sandbox/2360_08_07_create_new_content.html to see the definitive sample look.

After the previous added code, add the following content:

var typeSelect = document.getElementById('type');
function addInteraction() {
  draw = new ol.interaction.Draw({
    source: source,
    type: typeSelect.value
  });
  map.addInteraction(draw);
}

typeSelect.onchange = function(e) {
  map.removeInteraction(draw);
  addInteraction();
};

addInteraction();

Reload the sample, choose the type you want to draw, and click on the map to try out componentReload on the page to see that you can draw but there is no persistency.

At the end of the addInteraction function, copy the following code:

draw.on('drawend',
function(evt) {
  console.log(evt.feature);
  var parser = new ol.format.GeoJSON();
  var features = source.getFeatures();
  var featuresGeoJSON = parser.writeFeatures(features);
  $.ajax({
    url: '/features.geojson',
    type: 'POST',
    data: featuresGeoJSON
  }).then(function(response) {
    console.log(response);
  });
},
this);

Reload the sample, and try to draw and reload to see persistency working:

What just happened?

We created a map that uses a drawing component.

Each time you choose a Geometry type, it removes the ol.interaction.Draw component and adds again a new one using the code in typeSelect.onchange.

In the called function, the key feature is the drawend event bound to the draw component. Each time the user finishes drawing, it fires an event that send a feature.

In our case, we chose to get features from the source as GeoJSON using ol.format.GeoJSON and send them via an Ajax post call.

Depending on your backend, or for client storage, you can change what you want to send. The sample sends all features using a GeoJSON format, but you can customize the URL call, change the format to let's say GML, or only send the added feature and not all the features.

For this last case, you can see the log returned from console.log(evt.feature);.

Modifying features on the map

After feature creation, another requirement is to make modification on geometries to existing content.

Previous Chapter

Time for action – using ol.Overlay dynamically with layers information

Next Chapter

Time for action – using ol.interaction.Modify to update drawing

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – using ol.interaction.Draw to share new information on the Web

What just happened?

Modifying features on the map

Table of Contents for
OpenLayers 3 : Beginner's Guide