Advertisements

An original point of view

GIS

Saving Openlayers custom drawings as the .geoJSON file

OpenLayers drawing features export as GeoJSON and import to QGIS

Drawing features in the OpenLayers map immported to QGIS later

In this short post, I would like to demonstrate to you the programmatic method of saving the custom shapes in OpenLayers as the .geoJSON file. Drawing own features on the OpenLayers map canvas equipped with some existing layers, like it takes place in case of the map rendered by the QGIS2Web plugin can be a really beneficial feature. We can use it for displaying some changes on the field against the moment when the layers were exported from QGIS. Moving away from the QGIS2Web example, a user is simply eligible to plot its own data onto a blank OpenLayers map. There is a lot of sources, where you can read about drawing your own features in OpenLayers maps and obviously get the ready, full working codes for adoption into your own map. Find them in the links below. The step of my explanation covers one of the ways of exporting these drawings into the .GeoJSON file, which can be imported i.e. to QGIS later.
Our process will include 2 steps only. The first step covers the export button equipped with the export function defined in the code. Another step is to download the result as the .geoJSON file.

Before we attend to writing or copying the code, we should remember about the jQuery link in our index.html document, where I am convinced, your map is stored. This JQuery link should be at the top of the other script sources (Pic. 1), otherwise, the console won’t recognize our jQuery selector.

JQuery link index.html

Pic. 1 The place of the JQuery link in the index.html section (it can be also in the section. The <button> has been also included just beneath the drawing selection.

In our index.html we should start from the <button> property defining the place, where we will export our drawings as the .geoJSON file.

<select id="draw">

            <option value="select">Select to draw…</option>

            <option value="point">Point</option>

            <option value="line">Line</option>

            <option value="polygon">Polygon</option>

            <option value="circle">Circle</option>

            <option value="rectangle">Rectangle</option>

            <option value="star">Star</option>

          </select>

          <button type="button" class="exportBtn"><span>geoJSON</span></button>

Next in our JavaScript code, we should allocate the function for this button, making it running.

$(".exportBtn").click(function(){

    var json = new ol.format.GeoJSON().writeFeatures(vectorLayer.getSource().getFeatures(), { 

      dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'

    });

    console.log(json);
});

Having proper feature projection, we will receive the correct coordinates. It should match your task purpose. In my example, I used EPSG:3857 (Pseudo-Mercator).

Since the console returns proper .geoJSON content, we are on the right track to get our layer properly (Pic. 2).

OpenLayers drawing features GeoJSON export

Pic. 2 Export new features drew in OpenLayers as the .geoJSON file – the .geoJSON content in the Google Chrome console.

Our second step includes export this .geoJSON content to the local directory. For this purpose, we should expand our JavaScript bode by adding the function of exporting the content as the pure .txt file.

function download(content, fileName, contentType) {

      var a = document.createElement("a");

      var file = new Blob([content], {type: contentType});

      a.href = URL.createObjectURL(file);

      a.download = fileName;

      a.click();

  }

  download(json, 'json.txt', 'text/plain');

Important here is the last line highlighted, which defines both file name and its extension. Because the console shows us the content written in  .geoJSON format, we shouldn’t worry about losing it when saved as the .txt file. On the other hand, the text file seems to be universal enough to be saved in the different extensions. In this case, we should already define both file name and its extension by changing it straight to .geojson, like below:

download(json, 'your_layer.geojson', 'text/plain');

Finally, the full code will look as per below:

$(".exportBtn").click(function(){

    var json = new ol.format.GeoJSON().writeFeatures(vectorLayer.getSource().getFeatures(), { 

      dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'

    });

    console.log(json);

    function download(content, fileName, contentType) {

      var a = document.createElement("a");

      var file = new Blob([content], {type: contentType});

      a.href = URL.createObjectURL(file);

      a.download = fileName;

      a.click();

  }

  download(json, 'your_layer.geojson', 'text/plain');

});

Now, by clicking our button we should be able both get the .geoJSON data displayed in the console as well as saved them under the your_layer.geoJSON file.

OpenLayers drawing features and export as GeoJSONQGIS Add vector layer (GeoJSON)

OpenLayers GeoJSON layer in QGIS

Pic. 3 – 5 Saving the OpenLayers drawing features as the .geoJSON layer and its import to QGIS.

When you save the .geoJSON file from your OpenLayers map, you can import it to QGIS or other GIS software. Remember, that this file will always come with separate layers, as we used various geometries during our drawing. Basically, our file will come as the layer group, from where we can extract all layers with varied geometry: Points – PointLayer; Line – LineString; Polygon – Polygon.
It’s a quick and quite easy way to export our own drawings from OpenLayers map and use it in various GIS platforms thereafter.

OpenLayers drawing features export as GeoJSON and import to QGIS

Mariusz Krukar

Links:

  1. https://openlayers.org/en/latest/examples/draw-freehand.html
  2. https://dolmenweb.it/viewers/openlayer/examples/draw-shapes.html
  3. OpenLayers – draw & edit tools
  4. OpenLayers – features to GeoJSON export

 

Forums:

  1. https://stackoverflow.com/questions/50449105/saving-layer-from-openlayer-3-map-created-by-user
  2. https://stackoverflow.com/questions/54313855/converting-openlayers-polygon-to-geojson-with-different-projection
  3. https://gis.stackexchange.com/questions/263787/taking-draw-features-as-geojson-after-completed-drawing
  4. https://stackoverflow.com/questions/18740345/how-to-save-features-layer-in-openlayers
  5. https://stackoverflow.com/questions/35917225/save-interaction-draw-openlayers
  6. https://gis.stackexchange.com/questions/179907/openlayers-3-geojson-save-and-load
  7. https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined
  8. https://stackoverflow.com/questions/34156282/how-do-i-save-json-to-local-text-file

 

Advertisements
%d bloggers like this: