OpenLayers Example

Attempt to save drawn features to localStorage

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v3.0.0/css/ol.css">
<script src="https://github.com/grantm/jquery-udraggable/blob/master/jquery.udraggable.js"></script>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<div id="map" class="map"></div>
    <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="None">None</option>
        <option value="Point">Point</option>
        <option value="LineString" selected>LineString</option>
        <option value="Polygon">Polygon</option>
      </select>
    <label>Data type &nbsp;</label>
    <select id="data_type">
        <option value="GeoJSON" selected>GeoJSON</option>
        <option value="KML">KML</option>
        <option value="GPX">GPX</option>
    </select>
    <div id="delete" style="text-decoration:underline;cursor:pointer">
      Delete all features
    </div>
    <button onclick="saveFeatures();">Save Features</button>
    <label>Data: &nbsp;</label>
    <textarea id="data" rows="10" style="width:100%"></textarea>

CSS

html {
    width:100%;
    height:100%;
}
body {
    width:100%;
    height:100%;
    background-color: #aaa;
    font-family: Arial, Helvetica, sans-serif;
}
#map {
    height: 90%;
    width: 100%;
    background-color: #b5d0d0;
    margin: .2em auto;
    border: 1px solid #ccc;
}
.half-map {
    float:left;
    width:48%!important;
    margin:1em;
    background-color: #b5d0d0;
    margin: 1em;
    border: 1px solid #ccc;
}
#map p, .half-map p {
    text-align: center!important;
    position:fixed;
    top:auto;
    left: auto;
}
#bMap {
    height: 500px;
    width: 80%;
    background-color: #b5d0d0;
    margin: 1em auto;
    border: 1px solid #ccc;
    clear: both;
}
.bMap p {
    text-align: center!important;
    position:fixed;
    top:auto;
    left: auto;
}
#controls {
    position:absolute;
    top:0em;
    right:0em;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 2em;
    z-index: 100;
}
#controls h2 {
    font-size: 90%;
}
#controls p {
    font-size: 70%;
}
#controls ul {
    list-style-type: none;
    margin-left: 0;
    padding:0;
}
#controls ul li {
    margin:.5em 0em;
    padding:0;
}
#controls ul li button {
    width:100%;
}
.marker {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 24px;
}
.red {
    color: red;
}
.minimised {
    height:3em;
    height:3em;
    padding:.2em!important;
    box-sizing:border-box;
    overflow: hidden;
}
.minimised ul li {
    padding:0;
    margin:0;
}

JavaScript

// create a vector layer used for editing
var source = new ol.source.Vector();



var vector = new ol.layer.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'
      })
    })
  })
});

// Interactions
var style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 7,
            fill: new ol.style.Fill({
            color: [0, 153, 255, 1]
          }),
          stroke: new ol.style.Stroke({
            color: [255, 255, 255, 0.75],
            width: 1.5
          })
        }),
        zIndex: 100000
      });
      var select = new ol.interaction.Select({style: style});
      var modify = new ol.interaction.Modify({
        features: select.getFeatures()
      });

// Create a map
var map = new ol.Map({
	interactions: ol.interaction.defaults().extend([select, modify]),
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vector
  ],
  view: new ol.View({
    zoom: 2,
    center: [0, 0]
  })
});

// make draw global so it can later be removed
var draw;

// creat a select to choose geometry type
var typeSelect = document.getElementById('type');
// rebuild interaction when changed
typeSelect.onchange = function(e) {
  map.removeInteraction(draw);
  addInteraction();
};

// create a select to choose a data type to save in
dataTypeSelect = document.getElementById('data_type');
// clear map and rebuild interaction when changed
dataTypeSelect.onchange = function(e) {
  clearMap();
  map.removeInteraction(draw);
  addInteraction();
};

// add draw interaction
function addInteraction() {
  var geom_type = typeSelect.value;
  if (geom_type !== 'None') {
    draw = new ol.interaction.Draw({
      source: source,
      type: /** @type...