consulting and development

maps, GIS and geospatial software

Demo – Draw and Modify – OpenLayers 3

So, I decided to make a demo of draw and modify functionality in OpenLayers 3. Again, it is very different from ol2, where that functionality comes with a default button and is found in the OpenLayers.Control sub classes. In ol3, drawing is a sub class of ol.interaction and there seem to be no default buttons – so I went ahead and made my own, which is by no means new to me, as I built a whole framework for OpenLayers with mapping tools, buttons, icons and other GUI components in my previous job. See also demo videos of my previous work with OpenLayers: 3 Videos of Advanced OpenLayers Functionality

For convenience, I have the basic map app and layer switcher in separate scripts, while I created the drawing functionality in the script specific to this demo, added as a prototype function the app class. With the help of jQuery, first create the buttons and a panel to nest them in:

While I would use an OpenLayers.Layer.Vector before, in ol3 I use an ol.FeatureOverlay for the features to be drawn on:

Now, create the ol.interaction.Draw instances and an ol.interaction.Modify instance, add them to the map and keep the buttons in sync with their status by binding a handler to the ‘change:active’ event:

Next step is to add handlers to the buttons, the method .draw.activate will toggle one draw interaction and deactivate the others. I created my own method for removing all features as ol3 appears to have no such method while ol2 did.

Finally instantiate the app and the drawing controls:

If you wish, take a look at the source code for the demo.