OpenLayers Drawing Features Plugin
Welcome !! DrawFeatures is an OpenLayers 3 plugin for drawing new features, edit or delete feature from map. See usage for demo. In progress: compatibility with NPM and Openlayers 4
Requirements
- Openlayers 3
Getting started
- Clone the repository :
git clone [email protected]:HamHamFonFon/ol3-drawFeatures.git ol3-drawFeatures - Adding script JS and style CSS on your HTML code
Getting started with NPM
npm install --save ol3-draw-features
Demo examples
This exemples is showing how to use the plugin with Openlayers 3
-
Basic usage : you can add new features to the map, then editing or deleting them
-
Use Locale Storage : use localStorage to store features
Use with NPM : in progress...
API
new ol.control.ControlDrawButtons(vector_layer, opt_options)
vector_layer
Layer you will adding, edit or delete features
var vector_draw = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});Options parameters
| Option name | Type | Description |
|---|---|---|
style_buttons |
String |
Use bootstrap glyphicon or default CSS. Values : `glyphicon |
local_storage |
Boolean |
(in progress) Possibility to record Layer in Local Storage |
draw |
Array |
Select buttons to show |
| - Point | Boolean |
Show point button |
| - LineString | Boolean |
Show line button |
| - Square | Boolean |
Show square button |
| - Circle | Boolean |
Show circle button |
| - Polygon | Boolean |
Show polygon button |
Exemple usage with Openlayers 3
var optionsControlDraw = {
"style_buttons" : (undefined !== typeof style_buttons)? "glyphicon" : "default",
"local_storage": true,
"draw": {
"Point": true,
"LineString": true,
"Square": true,
"Circle": true,
"Polygon": true
}
};
var buttonsDrawControls = new ol.control.ControlDrawFeatures(myVectorLayer, optionsControlDraw);Exemple usage with NPM modules and Openlayers 4
In progress...
Extends
ol.control.Control
Methods
setSelectedLayer()
Set a layer who may be different tha the one in options array
buttonsDrawControls.setSelectedLayer(otherVectorLayer);Author(s)
Stéphane MÉAUDRE [email protected] [email protected]
Licence
MIT Licence - 2016
See also
My POC based on Kuzzle : Kurtography
README.md edited by StackEdit