[GIS] How to add drawing over an OpenLayers 3 map

openlayersopenlayers-2polygon

I am new to OpenLayers 3. I am trying to learn how to draw and save data over an OpenLayers map. Following an example, I am trying to learn about drawing and saving data. However, I am unable to draw anything over the map. I am posting the code below.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="js/ol.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
    <body>
    <div id="map" class="map"></div>
    <div>
      <label>Interaction type:  &nbsp;</label>
      <label>draw</label>
      <input type="radio" id="interaction_type_draw" name="interaction_type" value="draw" checked>
      <label>modify</label>
      <input type="radio" id="interaction_type_modify" name="interaction_type" value="modify">
    </div>
    <div>
      <label>Geometry type</label>
      <select id="geom_type">
        <option value="Point" selected>Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>
      </select>
    </div>
    <div>
      <label>Data type</label>
      <select id="data_type">
        <option value="GeoJSON" selected>GeoJSON</option>
        <option value="KML">KML</option>
        <option value="GPX">GPX</option>
      </select>
    </div>
    <div id="delete" style="text-decoration:underline;cursor:pointer">
      Delete all features
    </div>
    <label>Data:</label>
    <textarea id="data" rows="12" style="width:100%"></textarea>
    <script>
            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'
      })
    })
  })
});
// Create a map
var map = new ol.Map({
  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 {ol.geom.GeometryType} */ (geom_type)
    });

    draw.on('drawend', function(evt) {
      saveData();
    });

    map.addInteraction(draw);
  }
}

function saveData() {
  var allFeatures = vector.getSource().getFeatures(),
      format = new ol.format[dataTypeSelect.value](),
      data;
  try {
    data = format.writeFeatures(allFeatures);
  } catch (e) {
    // at time of creation there is an error in the GPX format (18.7.2014)
    document.getElementById('data').value = e.name + ": " + e.message;
    return;
  }
  if (dataTypeSelect.value === 'GeoJSON') {
    // format is JSON
    document.getElementById('data').value = JSON.stringify(data, null, 4);
  } else {
    // format is XML (GPX or KML)
    var serializer = new XMLSerializer();
    document.getElementById('data').value = serializer.serializeToString(data);
  }
}

// add the interaction when the page is first shown
addInteraction();

// clear map when user clicks on 'Delete all features'
$("#delete").click(function() {
  clearMap();
});

// clears the map and the output of the data
function clearMap() {
  vector.getSource().clear();
  document.getElementById('data').value = '';
}


</script>
  </body>
</html>

Why am I not able to see any drawings over the map?

However, the example that I am looking at works just fine. I am unable to find out the problem.

Best Answer

One of the problems might be this:

// creat a select to choose geometry type
var typeSelect = document.getElementById('type');

There is no DOM element with id "type", I think that should be:

var typeSelect = document.getElementById('geom_type');

More general: the line gives a clear error. Most browsers will show this somewhere. You'll need to learn how to find and interpret these errors.

Related Question