ol-geometry-editor Getting started

html

<!-- map input -->
<input type="text" id="the_geom" class="geometry form-control" name="the_geom"
value='{"type":"Point","coordinates":[2.4249798,48.8445111]}'/>

<!-- features style inputs -->
<div id="style-options" class="card">
    <!-- Point style -->
    <input type="text" id="point-stroke-color" class="form-control" value="rgb(0, 130, 160)" />
    <input type="text" id="point-fill-color" class="form-control" value="rgba(255, 255, 255, 0.5)" />
    <input type="text" id="point-stroke-width" class="form-control" value="2" />
    <input type="text" id="point-radius" class="form-control" value="15" />

    <!-- LineString style -->
    <input type="text" id="linestring-stroke-color" class="form-control" value="rgb(255, 0, 182)" />
    <input type="text" id="linestring-stroke-width" class="form-control" value="4" />

    <!-- Polygon style -->
    <input type="text" id="polygon-stroke-color" class="form-control" value="rgb(36, 156, 70)" />
    <input type="text" id="polygon-fill-color" class="form-control" value="rgba(255, 0, 24, 0.26)" />
    <input type="text" id="polygon-stroke-width" class="form-control" value="3" />
</div>

javascript

var getStyleForPolygon = function () {
    var fillColor = $('#polygon-fill-color').val();
    var strokeColor = $('#polygon-stroke-color').val();
    var strokeWidth = $('#polygon-stroke-width').val();

    var fill = new ol.style.Fill({
        color: fillColor
    });
    var stroke = new ol.style.Stroke({
        color: strokeColor,
        width: strokeWidth
    });

    return [new ol.style.Style({
        stroke: stroke,
        fill: fill
    })];
};

var getStyleForLineString = function () {
    var strokeColor = $('#linestring-stroke-color').val();
    var strokeWidth = $('#linestring-stroke-width').val();

    var stroke = new ol.style.Stroke({
        color: strokeColor,
        width: strokeWidth
    });

    return [new ol.style.Style({
        stroke: stroke
    })];
};

var getStyleForPoint = function () {
    var circleRadius = $('#point-radius').val();
    var fillColor = $('#point-fill-color').val();
    var strokeColor = $('#point-stroke-color').val();
    var strokeWidth = $('#point-stroke-width').val();

    var fill = new ol.style.Fill({
        color: fillColor
    });
    var stroke = new ol.style.Stroke({
        color: strokeColor,
        width: strokeWidth
    });
    var image = new ol.style.Circle({
        fill: fill,
        stroke: stroke,
        radius: circleRadius
    });

    return [new ol.style.Style({
        image: image
    })];
};

var getStyleByGeometryType = function (type) {
    switch (type) {
        case 'Point':
        case 'MultiPoint':
            return getStyleForPoint();
            break;

        case 'LineString':
        case 'MultiLineString':
            return getStyleForLineString();
            break;

        case 'Polygon':
        case 'MultiPolygon':
            return getStyleForPolygon();
            break;
        default:
            break;
    }
    return null;
};

var refreshLayerStyle = function(layer){
    layer.getSource().changed();
};

$(document).ready(function () {

    $('.geometry').geometryEditor({
        'geometryType': "Geometry",
        'style': function (feature, resolution) {
            return getStyleByGeometryType(feature.getGeometry().getType());
        }
    });

    var geometryEditor = $(".geometry").data('editor');
    // force refresh layer style when input change
    $('#style-options input').on('change',function(){
        refreshLayerStyle(geometryEditor.getGeometryLayer());
    })

});