O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – a drag and drop viewer for vector files

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!

  1. Make a copy of the vector_template.html file and add a DragAndDrop interaction after the vectorStyle is defined:
    var dragAndDrop = new ol.interaction.DragAndDrop({ formatConstructors: [ ol.format.GPX, ol.format.GeoJSON, ol.format.IGC, ol.format.KML, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required