diff --git a/package.json b/package.json
index 554ea6b..82fb32b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ulb-darmstadt/shacl-form",
- "version": "1.1.4",
+ "version": "1.1.5",
"description": "SHACL form generator",
"main": "dist/index.js",
"module": "dist/index.js",
diff --git a/src/plugins/mapbox.ts b/src/plugins/mapbox.ts
index 43f52b5..f9f2154 100644
--- a/src/plugins/mapbox.ts
+++ b/src/plugins/mapbox.ts
@@ -5,13 +5,42 @@ import { createTextEditor, Editor } from '../editors'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
-const dialogTemplate = ''
+const dialogTemplate = ''
export class MapBoxPlugin extends Plugin {
+ map: mapboxgl.Map
+ dialog: HTMLDialogElement
+ currentEditor: Editor | undefined
+ currentMarker: mapboxgl.Marker | undefined
constructor(predicate: string, apiKey: string) {
super(predicate)
mapboxgl.accessToken = apiKey
+
+ document.body.insertAdjacentHTML('beforeend', dialogTemplate)
+ this.dialog = document.querySelector('#mapDialog') as HTMLDialogElement
+ this.dialog.addEventListener('close', () => {
+ const scrollY = document.body.style.top
+ document.body.style.position = ''
+ document.body.style.top = ''
+ window.scrollTo(0, parseInt(scrollY || '0') * -1)
+ })
+ this.map = new mapboxgl.Map({
+ container: 'mapDialog',
+ // style: 'mapbox://styles/mapbox/outdoors-v11',
+ style: 'mapbox://styles/mapbox/satellite-streets-v11',
+ zoom: 5,
+ center: { lng: 8.657238961696038, lat: 49.87627570549512 }
+ })
+ this.map.addControl(new mapboxgl.NavigationControl())
+ this.map.on('idle', () => {
+ // this fixes wrong size of canvas
+ this.map.resize()
+ })
+ this.map.on('click', (e: mapboxgl.MapLayerTouchEvent) => {
+ this.setMarker(e.lngLat)
+ })
+ this.dialog.querySelector('#closeButton')?.addEventListener('click', () => { this.dialog.close() })
}
createInstance(template: ShaclPropertyTemplate, value?: Term): HTMLElement {
@@ -19,53 +48,38 @@ export class MapBoxPlugin extends Plugin {
const button = document.createElement('button')
button.type = 'button'
button.innerHTML = 'Open map...'
- button.style.marginLeft = '1em'
+ button.style.marginLeft = '5px'
button.onclick = () => {
- let initialLocation = { lng: 8.657238961696038, lat: 49.87627570549512 }
+ this.currentEditor = instance.querySelector('.editor') as Editor
let markerPos: mapboxgl.LngLat | undefined
- const editor = instance.querySelector('.editor') as Editor
- const matches = editor.value.match(/^POINT\(([+\-]?[0-9]*[.]?[0-9]+),([+\-]?[0-9]*[.]?[0-9]+)\)$/)
+ const matches = this.currentEditor.value.match(/^POINT\(([+\-]?[0-9]*[.]?[0-9]+),([+\-]?[0-9]*[.]?[0-9]+)\)$/)
if (matches?.length == 3) {
markerPos = { lng: parseFloat(matches[1]), lat: parseFloat(matches[2]) }
}
-
- let dialog = instance.querySelector('#mapDialog') as HTMLDialogElement
- if (!dialog) {
- instance.insertAdjacentHTML('beforeend', dialogTemplate)
- dialog = instance.querySelector('#mapDialog') as HTMLDialogElement
- instance['map'] = new mapboxgl.Map({
- container: 'mapDialog',
- style: 'mapbox://styles/mapbox/outdoors-v11',
- zoom: 5,
- center: markerPos || initialLocation
- })
- instance['map'].addControl(new mapboxgl.NavigationControl())
- instance['map'].on('idle', () => {
- // this fixes wrong size of canvas
- instance['map'].resize()
- })
- instance['map'].on('click', (e: mapboxgl.MapLayerTouchEvent) => {
- this.setMarker(instance, e.lngLat)
- })
- dialog.querySelector('#closeButton')?.addEventListener('click', () => { dialog.close() })
+
+ this.setMarker(markerPos)
+ if (markerPos) {
+ this.map.setZoom(15)
+ this.map.setCenter(markerPos)
+ } else {
+ this.map.setZoom(5)
}
-
- this.setMarker(instance, markerPos)
- dialog.showModal()
+ document.body.style.top = `-${window.scrollY}px`
+ document.body.style.position = 'fixed'
+ this.dialog.showModal()
}
instance.appendChild(button)
return instance
}
- setMarker(instance: HTMLElement, pos: mapboxgl.LngLat | undefined) {
- if (instance['currentMarker']) {
- instance['currentMarker'].remove()
+ setMarker(pos: mapboxgl.LngLat | undefined) {
+ if (this.currentMarker) {
+ this.currentMarker.remove()
}
- if (pos) {
- instance['currentMarker'] = new mapboxgl.Marker().setLngLat(pos).addTo(instance['map'])
- const editor = instance.querySelector('.editor') as Editor
- editor.value = `POINT(${pos.lng},${pos.lat})`
+ if (this.currentEditor && pos) {
+ this.currentMarker = new mapboxgl.Marker().setLngLat(pos).addTo(this.map)
+ this.currentEditor.value = `POINT(${pos.lng},${pos.lat})`
}
}
}