Loading static sources programmatically is very useful, but let's say you want to look at a new GeoJSON file you just found. Opening up your text editor and coding up a quick viewer is pretty easy, but it takes some time, and perhaps, you'll need to check the API documentation (or this chapter!) to recall the exact details. Wouldn't it be nice if you could just drag your new GeoJSON file onto a map and view it without writing any code? Guess what, you can!
Make a copy of the
vector_template.html
file and add aDragAndDrop
interaction after thevectorStyle
is defined:var dragAndDrop = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ol.format.TopoJSON ] });
When a file is dropped on the map, the
DragAndDrop
interaction will fire an event that can be used to actually add the features to the map:dragAndDrop.on('addfeatures', function(event) {...