diff --git a/c2cgeoform/static/src/controls.js b/c2cgeoform/static/src/controls.js
index 5d748474..acf3bdf2 100644
--- a/c2cgeoform/static/src/controls.js
+++ b/c2cgeoform/static/src/controls.js
@@ -15,7 +15,7 @@ function createButton(container, options) {
}
export function addControls(options) {
- const { target, i18n, interactions, source } = options
+ const { target, type, interactions, source } = options
const { draw, modify } = interactions
const container = document.createElement('div')
container.classList.add(
@@ -24,16 +24,18 @@ export function addControls(options) {
'c2cgeoform-controls'
)
- createButton(container, {
- content: '',
- title: options.drawTooltip,
- callback: () => draw.setActive(true) && modify.setActive(false),
- })
- createButton(container, {
- content: '',
- title: options.modifyTooltip,
- callback: () => modify.setActive(true) && draw.setActive(false),
- })
+ if (type !== 'Point') {
+ createButton(container, {
+ content: '',
+ title: options.drawTooltip,
+ callback: () => draw.setActive(true) && modify.setActive(false),
+ })
+ createButton(container, {
+ content: '',
+ title: options.modifyTooltip,
+ callback: () => modify.setActive(true) && draw.setActive(false),
+ })
+ }
createButton(container, {
content: '',
title: options.clearTooltip,
diff --git a/c2cgeoform/static/src/index.js b/c2cgeoform/static/src/index.js
index 3582abb1..7eaa678e 100644
--- a/c2cgeoform/static/src/index.js
+++ b/c2cgeoform/static/src/index.js
@@ -13,7 +13,7 @@ import { getStyleFunction } from './styles'
import { defaults as controlDefaults } from 'ol/control'
const format = new GeoJSONFormat()
-const widgets = []
+const widgets = {}
let itemIcon
export function initMap(target, options) {
@@ -85,6 +85,8 @@ export function initMapWidget(oid, options) {
zoomOptions: options,
}),
})
+ //Store map for oid
+ widgets[oid] = map
if (options.onFocusOnly) map.getTargetElement().setAttribute('tabindex', '0')
@@ -106,6 +108,7 @@ export function initMapWidget(oid, options) {
interactions,
drawTooltip: options[`draw${type}Tooltip`],
source,
+ type,
})
)
}
@@ -116,9 +119,19 @@ export function initMapWidget(oid, options) {
}
export function checkInitialized(oid) {
- const initialized = widgets.includes(oid)
- widgets.push(oid)
- return initialized
+ return oid in widgets
+}
+
+export function getObjectMap(oid) {
+ return widgets[oid]
+}
+
+export function setReadOnly(oid) {
+ const map = getObjectMap(oid)
+ map.getControls().clear()
+ map.getInteractions().clear()
+ map.getTargetElement().classList.add('c2cgeoform-readonly')
+ map.updateSize()
}
export function registerProjection(epsg, def) {
diff --git a/c2cgeoform/static/src/interactions.js b/c2cgeoform/static/src/interactions.js
index 1ddaeb05..cf2d0b91 100644
--- a/c2cgeoform/static/src/interactions.js
+++ b/c2cgeoform/static/src/interactions.js
@@ -1,6 +1,7 @@
import Draw from 'ol/interaction/Draw'
import Modify from 'ol/interaction/Modify'
import GeoJSON from 'ol/format/GeoJSON'
+import Point from 'ol/geom/Point'
import MultiPoint from 'ol/geom/MultiPoint'
import MultiLineString from 'ol/geom/MultiLineString'
import MultiPolygon from 'ol/geom/MultiPolygon'
@@ -9,20 +10,28 @@ const format = new GeoJSON()
export function addInteractions(options) {
const { input, multi, ...interactionOptions } = options
+ const store = geometry => {
+ input.value = geometry ? getGeometryJSON(geometry, multi) : ''
+ input.dispatchEvent(new Event('input', { bubbles: true }))
+ }
const draw = addDrawInteraction(interactionOptions)
const modify = addModifyInteraction(interactionOptions)
modify.setActive(false)
- options.source.on(
- 'change',
- e =>
- (input.value =
- options.source.getFeatures().length > 0
- ? getGeometryJSON(
- options.source.getFeatures()[0].getGeometry(),
- multi
- )
- : '')
+ options.source.on('change', () =>
+ store(options.source.getFeatures()[0]?.getGeometry())
)
+ // Mobile drawing
+ if (
+ window.matchMedia('(max-width: 767px)').matches &&
+ interactionOptions.type === 'Point'
+ ) {
+ let map = options.map
+ draw.setActive(false)
+ modify.setActive(false)
+ map.getTargetElement().classList.add('cross')
+ map.updateSize()
+ map.on('moveend', () => store(new Point(map.getView().getCenter())))
+ }
return { draw, modify }
}
@@ -30,7 +39,7 @@ export function addDrawInteraction(options) {
const { map, source, type } = options
const draw = new Draw({ type })
map.addInteraction(draw)
- draw.on('drawstart', e => source.clear())
+ draw.on('drawstart', () => source.clear())
draw.on('drawend', e => source.addFeature(e.feature))
return draw
}
diff --git a/c2cgeoform/static/src/main.scss b/c2cgeoform/static/src/main.scss
index e74ae76f..7d16594b 100644
--- a/c2cgeoform/static/src/main.scss
+++ b/c2cgeoform/static/src/main.scss
@@ -7,7 +7,30 @@
&.hovering:hover {
cursor: pointer;
}
+ &.cross {
+ &:before,
+ &:after {
+ position: absolute;
+ content: '';
+ background: red;
+ display: block;
+ width: 40%;
+ height: 1px;
+ transform: rotate(-90deg);
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ z-index: 100;
+ }
+ &:after {
+ transform: rotate(0deg);
+ }
+ height: 60vw;
+ }
}
+
.c2cgeoform-locate-me-btn {
top: 4.5em;
left: 0.5em;
@@ -18,6 +41,9 @@
.c2cgeoform-locate-me-btn .glyphicon {
top: 0;
}
+.c2cgeoform-readonly .c2cgeoform-locate-me-btn {
+ display: none;
+}
.c2cgeoform-controls {
bottom: 0.5em;