ol-geometry-editor Getting started

Input

Data

Code Options ?

html

<!-- map input -->
<input type="text" id="the_geom" class="geometry form-control" name="the_geom" value='{"type":"Point","coordinates":[2.424573,48.845726]}'/>
<!-- data output -->
<div id="result" class="well"></div>

javascript

var GEOPORTAL_API_KEY = "pratique";

function getGeoportalURL(layerName) {
    var url = "https://wxs.ign.fr/";
    url += GEOPORTAL_API_KEY;
    url += "/geoportail/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile";
    url += "&LAYER=" + layerName;
    url += "&STYLE=normal&FORMAT=image/jpeg";
    url += "&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}";
    return url;
}

$(document).ready(function () {

    $('.geometry').geometryEditor({
        'geometryType': 'Point',
        'editable': true,
        'hide': false,
        'precision': 6,
        'width': '100%',
        'height': '500px',
        'lon': 2.424573,
        'lat': 48.845726,
        'zoom': 17,
        'maxZoom': 18,
        'centerOnResults': false,
        'tileLayers': [
            {
                'title': 'couche 1',
                'url': 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                'attribution': '©OpenStreetMap contributors'
            },
            {
                'url': 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                'title': 'couche 2'
            },
            {
                'title': 'couche 3',
                'url': getGeoportalURL("ORTHOIMAGERY.ORTHOPHOTOS"),
                'attribution': '©IGN'
            },
            {
                'title': 'Fond Blanc'
            }
        ],
        'tileLayerSwitcher': true,
        'defaultSwitchableTile': 1,
        'tileCoordinates': [9, 269, -189], //corse

        'allowCapture': true
    });

    /* Lecture des evenements */
    var geometryEditor = $(".geometry").data('editor');
    var map = geometryEditor.getMap();

    map.on('change:tile', function (e) {
        var tile = e.tile;
        var textTile = "Tile '" + tile.title + "' (position " + tile.position + ") is active.";

        $("#tile").html(textTile);
    });

    map.on('change:geometry', function (e) {
        var geoJSON = e.geometry;
        var textResult;
        if (!geoJSON) {
            textResult = "No geoJSON geometry found";
        } else {
            textResult = "GeoJSON of geometry drawn : " + geoJSON + ".";
        }
        $("#result").html(textResult);
    });
});