Add popup support

src/lib/components/index.ts

@@ -10,6 +10,7 @@ export { default as MglScaleControl } from './controls/scale.control';
 export { default as MglStyleSwitchControl } from './controls/styleSwitch.control';
 export { default as MglButton } from './button.component';
 export { default as MglMarker } from './marker.component';
+export { default as MglPopup } from './popup.component';
 export { default as MglCanvasSource } from './sources/canvas.source';
 export { default as MglGeoJsonSource } from './sources/geojson.source';
 export { default as MglImageSource } from './sources/image.source';

src/lib/components/marker.component.ts

@@ -1,50 +1,49 @@
-import { defineComponent, inject, onBeforeUnmount, PropType, unref, watch } from 'vue';
+import { defineComponent, inject, provide, onBeforeUnmount, PropType, unref, watch, shallowRef, h } from 'vue';
 import { LngLatLike, Marker, MarkerOptions, PointLike, PositionAnchor } from 'maplibre-gl';
 import { MapLib } from '@/lib/lib/map.lib';
-import { mapSymbol } from '@/lib/types';
+import { mapSymbol, markerSymbol } from '@/lib/types';
 
 export default /*#__PURE__*/ defineComponent({
-	name : 'MglMarker',
-	props: {
-		coordinates: {
-			type    : [ Object, Array ] as unknown as PropType<LngLatLike>,
-			required: true
-		},
-		offset     : [ Object, Array ] as PropType<PointLike>,
-		anchor     : String as PropType<PositionAnchor>,
-		color      : String as PropType<string>,
-		// draggable        : Boolean as PropType<boolean>, todo implement feature
-		clickTolerance   : Number as PropType<number>,
-		rotation         : Number as PropType<number>,
-		rotationAlignment: String as PropType<'map' | 'viewport' | 'auto'>,
-		pitchAlignment   : String as PropType<'map' | 'viewport' | 'auto'>,
-		scale            : Number as PropType<number>
-	},
-	setup(props) {
+  name : 'MglMarker',
+  props: {
+    coordinates: {
+      type    : [ Object, Array ] as unknown as PropType<LngLatLike>,
+      required: true
+    },
+    offset     : [ Object, Array ] as PropType<PointLike>,
+    anchor     : String as PropType<PositionAnchor>,
+    color      : String as PropType<string>,
+    // draggable        : Boolean as PropType<boolean>, todo implement feature
+    clickTolerance   : Number as PropType<number>,
+    rotation         : Number as PropType<number>,
+    rotationAlignment: String as PropType<'map' | 'viewport' | 'auto'>,
+    pitchAlignment   : String as PropType<'map' | 'viewport' | 'auto'>,
+    scale            : Number as PropType<number>
+  },
+  setup(props, { slots }) {
 
-		const map                 = inject(mapSymbol)!,
-			  opts: MarkerOptions = Object.keys(props)
-										  .filter(opt => (props as any)[ opt ] !== undefined && MapLib.MARKER_OPTION_KEYS.indexOf(opt as keyof MarkerOptions) !== -1)
-										  .reduce((obj, opt) => {
-											  (obj as any)[ opt ] = unref((props as any)[ opt ]);
-											  return obj;
-										  }, {});
+    const map                 = inject(mapSymbol)!,
+    opts: MarkerOptions = Object.keys(props)
+      .filter(opt => (props as any)[ opt ] !== undefined && MapLib.MARKER_OPTION_KEYS.indexOf(opt as keyof MarkerOptions) !== -1)
+      .reduce((obj, opt) => {
+	(obj as any)[ opt ] = unref((props as any)[ opt ]);
+	return obj;
+      }, {});
 
-		const marker = new Marker(opts);
-		marker.setLngLat(props.coordinates).addTo(map.value!);
+    const marker = new Marker(opts);
+    marker.setLngLat(props.coordinates).addTo(map.value!);
+    provide(markerSymbol, shallowRef(marker));
 
-		watch(() => props.coordinates, v => marker.setLngLat(v));
-		// watch(() => props.draggable, v => marker.setDraggable(v || false));
-		watch(() => props.offset, v => marker.setOffset(v || [ 0, 0 ]));
-		watch(() => props.pitchAlignment, v => marker.setPitchAlignment(v || 'auto'));
-		watch(() => props.rotationAlignment, v => marker.setRotationAlignment(v || 'auto'));
+    watch(() => props.coordinates, v => marker.setLngLat(v));
+    // watch(() => props.draggable, v => marker.setDraggable(v || false));
+    watch(() => props.offset, v => marker.setOffset(v || [ 0, 0 ]));
+    watch(() => props.pitchAlignment, v => marker.setPitchAlignment(v || 'auto'));
+    watch(() => props.rotationAlignment, v => marker.setRotationAlignment(v || 'auto'));
 
-		onBeforeUnmount(marker.remove.bind(marker));
+    onBeforeUnmount(marker.remove.bind(marker));
 
-		return { marker };
-
-	},
-	render() {
-		// nothing
-	}
+    return () => [
+      h('div', slots.default ? slots.default({}) : undefined)
+    ];
+  }
 });

src/lib/components/popup.component.ts

@@ -0,0 +1,97 @@
+import { defineComponent, inject, onMounted, onBeforeUnmount, PropType, unref, watch, ref, h } from 'vue';
+import { LngLatLike, Popup, Offset, PositionAnchor, PopupOptions, PointLike } from 'maplibre-gl';
+import { MapLib } from '@/lib/lib/map.lib';
+import { mapSymbol, markerSymbol } from '@/lib/types';
+
+export default /*#__PURE__*/ defineComponent({
+  name : 'MglPopup',
+  emits: ['open', 'close'],
+  props: {
+    coordinates: {
+      type: [ Object, Array ] as unknown as PropType<LngLatLike>,
+      required: false
+    },
+    closeButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    closeOnClick: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    closeOnMove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    focusAfterOpen: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    anchor: {
+      type: String as PropType<PositionAnchor>,
+      required: false
+    },
+    offset: {
+      type: [Number, Object, Array] as PropType<Offset>,
+      required: false,
+    },
+    className: {
+      type: String,
+      required: false,
+    },
+    maxWidth: {
+      type: String,
+      default: '240px',
+    },
+    text: {
+      type: String,
+      required: false
+    }
+  },
+  async setup(props, { slots, emit }) {
+    const map = inject(mapSymbol);
+    const marker = inject(markerSymbol);
+    const root = ref();
+
+    const opts: PopupOptions = Object.keys(props)
+      .filter(opt => (props as any)[ opt ] !== undefined && MapLib.POPUP_OPTION_KEYS.indexOf(opt as keyof PopupOptions) !== -1)
+      .reduce((obj, opt) => {
+	(obj as any)[ opt ] = unref((props as any)[ opt ]);
+	return obj;
+      }, {});
+
+    const popup = new Popup(opts);
+
+    if (marker && marker.value) {
+      marker.value.setPopup(popup);
+    } else if (props.coordinates && map) {
+      popup.setLngLat(props.coordinates).addTo(map.value!);
+    }
+
+    if (props.text) {
+      popup.setText(props.text);
+    }
+
+    popup.on('open', () => emit('open'));
+    popup.on('close', () => emit('close'));
+
+    watch(() => props.coordinates, (v) => { if (v) { popup.setLngLat(v) } });
+    watch(() => props.text, v => popup.setText(v || ''));
+    watch(() => props.offset, v => popup.setOffset(v));
+    watch(() => props.maxWidth, v => popup.setMaxWidth(v));
+
+    onMounted(() => {
+      if (root.value && !props.text) {
+        popup.setDOMContent(root.value!);
+      }
+    });
+
+    return () => [
+      h('div', {ref: root}, slots.default ? slots.default() : undefined)
+    ];
+  },
+});

src/lib/lib/map.lib.ts

@@ -1,4 +1,4 @@
-import { Map, MapOptions, MarkerOptions } from 'maplibre-gl';
+import { Map, MapOptions, MarkerOptions, PopupOptions } from 'maplibre-gl';
 import { MglMap } from '@/lib/components';
 import { MglEvent } from '@/lib/types';
 
@@ -19,6 +19,10 @@ export class MapLib {
 		'element', 'offset', 'anchor', 'color', 'draggable', 'clickTolerance', 'rotation', 'rotationAlignment', 'pitchAlignment', 'scale'
 	];
 
+	static readonly POPUP_OPTION_KEYS: Array<keyof PopupOptions> = [
+          'closeButton', 'closeOnClick', 'closeOnMove', 'focusAfterOpen', 'anchor', 'offset', 'className', 'maxWidth'
+	];
+
 	static readonly MAP_EVENT_TYPES = [
 		'error', 'load', 'idle', 'remove', 'render', 'resize', 'webglcontextlost', 'webglcontextrestored', 'dataloading', 'data', 'tiledataloading',
 		'sourcedataloading', 'styledataloading', 'sourcedata', 'styledata', 'boxzoomcancel', 'boxzoomstart', 'boxzoomend', 'touchcancel', 'touchmove',

src/lib/types.ts

@@ -1,16 +1,17 @@
 import { InjectionKey, Ref, ShallowRef } from 'vue';
-import { Map, SourceSpecification, StyleSpecification } from 'maplibre-gl';
+import { Map, Marker, SourceSpecification, StyleSpecification } from 'maplibre-gl';
 import { MglMap } from '@/lib/components';
 import { Emitter } from 'mitt';
 import { SourceLayerRegistry } from '@/lib/lib/sourceLayer.registry';
 
-export const mapSymbol           = Symbol('map') as InjectionKey<ShallowRef<Map | undefined>>,
-			 isLoadedSymbol      = Symbol('isLoaded') as InjectionKey<Ref<boolean>>,
-			 isInitializedSymbol = Symbol('isInitialized') as InjectionKey<Ref<boolean>>,
-			 componentIdSymbol   = Symbol('componentId') as InjectionKey<number>,
-			 sourceIdSymbol      = Symbol('sourceId') as InjectionKey<string>,
-			 sourceLayerRegistry = Symbol('sourceLayerRegistry') as InjectionKey<SourceLayerRegistry>,
-			 emitterSymbol       = Symbol('emitter') as InjectionKey<Emitter<MglEvents>>;
+export const mapSymbol          = Symbol('map') as InjectionKey<ShallowRef<Map | undefined>>,
+            isLoadedSymbol      = Symbol('isLoaded') as InjectionKey<Ref<boolean>>,
+            isInitializedSymbol = Symbol('isInitialized') as InjectionKey<Ref<boolean>>,
+            componentIdSymbol   = Symbol('componentId') as InjectionKey<number>,
+            sourceIdSymbol      = Symbol('sourceId') as InjectionKey<string>,
+            sourceLayerRegistry = Symbol('sourceLayerRegistry') as InjectionKey<SourceLayerRegistry>,
+            emitterSymbol       = Symbol('emitter') as InjectionKey<Emitter<MglEvents>>,
+            markerSymbol        = Symbol('marker') as InjectionKey<ShallowRef<Marker | undefined>>;
 
 export interface MglEvent<T = any> {
 	type: string;