I am using the DragAndDrop functionality of OpenLayers6 in order to load GeoJSON data in the browser. Once I load the data, I get the map.

Now I am interested in using the same functionality for filling up also other elements in the page (e.g. charts).

Below part of the code:

var my_DragAndDrop = map.addInteraction(new DragAndDrop({
  source: source,
  formatConstructors: [GeoJSON]

//! [json data outside the map]
source.on('addfeature', function(evt) {

I am trying to acquire the JSON values after the map is loaded. I am not sure, which event listener to use but it seems like that addfeature does the trick. Do you know what would be the proper way to retrieve the JSON values inside this event listener?


Based on Mike's comments I have managed to retrieve the geoJSON for the layer as below

var listenerKey = source.on('change', function(e) {
  values = new GeoJSON().writeFeatures(source.getFeatures());

However this code returns all the geojson along with the coordinates etc. How can I retrieve only the properties of the geojson? For example something like:

var id = source.getFeatures('id');
  • 1
    You could use new GeoJSON.writeFeatures(source.getFeatures()) for the whole collection or new GeoJSON.writeFeature(evt.feature) for individual feature – Mike Mar 24 '20 at 10:07
  • Thanks. When I try this I get: ol_format_GeoJSON__WEBPACK_IMPORTED_MODULE_3__.default.writeFeatures is not a constructor – user1919 Mar 24 '20 at 11:20
  • It should have been new GeoJSON().writeFeatures(.... – Mike Mar 24 '20 at 11:49

You could use a javascript array map to extract the id and properties collection from the features in a json

console.log(JSON.parse(values).features.map(function(value){ return { id: value.id, properties: value.properties }; }));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.