ol-geometry-editor Getting started

Supported geometry types

Code

Point
html

<div id="point" class="geometry">
    {"type":"Point","coordinates":[2.424059808254242,48.844580316300906]}
</div>

javscript

$('#point').geometryEditor({
    geometryType: 'Point',
    height: 300,
    maxZoom: 18
});


LineString
html

<div id="linestring" class="geometry">
    {"type":"LineString","coordinates":[[2.379196286419756,48.85665404926806],[2.379775643566972,48.8575575912777],[2.3801404239929975,48.857684650564835],[2.380473017910844,48.85759994440923],[2.3811274769104784,48.85664699028189]]}
</div>

javscript

$('#linestring').geometryEditor({
    geometryType: 'LineString',
    height: 300
});


Polygon
html

<div id="polygon" class="geometry">
    {"type":"Polygon","coordinates":[[[2.47467041015625,49.0796231770863],[1.95831298828125,48.97156360565644],[2.10113525390625,48.68225690458381],[2.57904052734375,48.55879557208034],[2.83172607421875,48.78732358929034],[2.68341064453125,48.97516937226341],[2.47467041015625,49.0796231770863]]]}
</div>

javscript

$('#polygon').geometryEditor({
    geometryType: 'Polygon',
    height: 300
});


MultiPoint
html

<div id="multipoint" class="geometry">
    {"type":"GeometryCollection","geometries":[{"type":"Point","coordinates":[2.4240598082542424,48.84458031630089]},{"type":"Point","coordinates":[6.130371093749999,43.51668853502909]},{"type":"Point","coordinates":[5.69091796875,47.010225655683485]},{"type":"MultiPoint","coordinates":[[-1.38427734375,43.229195113965034]]}]}
</div>

javscript

$('#multipoint').geometryEditor({
    geometryType: 'MultiPoint',
    height: 300
});


MultiLineString
html

<div id="multilinestring" class="geometry">
    {"type":"MultiLineString","coordinates":[[[2.044830322265625,48.88928134706652],[2.344207763671875,48.85857124408756],[2.6930236816406246,48.8712188636798]],[[2.5138092041015625,48.9338677246169],[2.424545288085937,48.88964252469111],[2.3297882080078125,48.89686563951971]],[[2.2693634033203125,48.93025894405523],[2.3448944091796875,48.8670635367441]]]}
</div>

javscript

$('#multilinestring').geometryEditor({
    geometryType: 'MultiLineString',
    height: 300
});


MultiPolygon
html

<div id="multipolygon" class="geometry">
    {"type":"MultiPolygon","coordinates":[[[[2.350797951221466,48.853348923101066],[2.350679934024811,48.85320773386766],[2.351146638393402,48.853045365757026],[2.3512284457683563,48.85321267547607],[2.350797951221466,48.853348923101066]]],[[[2.3507979512214665,48.853347687675466],[2.35094279050827,48.853558588356464],[2.350996434688568,48.853553646782245],[2.351133227348327,48.853482699510806],[2.3512431979179382,48.853286799865884],[2.3512324690818787,48.853225382543656],[2.3512271046638484,48.85321444034372],[2.3507979512214665,48.853347687675466]]]]}
</div>

javscript

$('#multipolygon').geometryEditor({
    geometryType: 'MultiPolygon',
    height: 300
});


Rectangle (bounding box)
html

<div id="rectangle" class="geometry">
    [-5.5,41.2,10.4,51.6]
</div>

javscript

$('#rectangle').geometryEditor({
    geometryType: 'Rectangle',
    height: 300
});


GeometryCollection
html

<div id="geometry" class="geometry">
    {"type":"GeometryCollection","geometries":[{"type":"MultiPoint","coordinates":[[2.968574166516191,48.38543506596059]]},{"type":"MultiPolygon","coordinates":[[[[2.9694324734009565,48.38572719810722],[2.969614863613969,48.385670196844416],[2.969174981335527,48.385007552479664],[2.969003319958574,48.385050303989374],[2.9694324734009565,48.38572719810722]]]]},{"type":"MultiLineString","coordinates":[[[2.9690882564682393,48.38537093916736],[2.9694369436401753,48.385891076382165],[2.970617115606728,48.38558113224349]]]}]}
</div>

javscript

$('#geometry').geometryEditor({
    geometryType: 'Geometry',
    height: 300
});