Skip to content

Commit

Permalink
added layer events
Browse files Browse the repository at this point in the history
  • Loading branch information
@razorness
razorness committed Aug 26, 2021
1 parent 05e2833 commit 5d10455
Show file tree
Hide file tree
Showing 9 changed files with 62 additions and 37 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-maplibre-gl",
"version": "1.0.0-beta.18",
"version": "1.0.0-beta.19",
"description": "Vue 3 plugin for maplibre-gl",
"keywords": [
"vue",
Expand Down
12 changes: 7 additions & 5 deletions src/components/layers/circle.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CircleLayer, CircleLayout, CirclePaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,24 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<CircleLayer>(props.layerId, 'circle', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
});


},
render() {
return createCommentVNode('Circle Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/fill.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FillLayer, FillLayout, FillPaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<FillLayer>(props.layerId, 'fill', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Fill Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/fillExtrusion.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FillExtrusionLayout, FillExtrusionPaint, LineLayer } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<LineLayer>(props.layerId, 'fill-extrusion', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Fill Extrusion Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/heatmap.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { HeatmapLayer, HeatmapLayout, HeatmapPaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<HeatmapLayer>(props.layerId, 'heatmap', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Heatmap Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/hillshade.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { HillshadeLayer, HillshadeLayout, HillshadePaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<HillshadeLayer>(props.layerId, 'hillshade', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Hillshade Layer');
Expand Down
1 change: 0 additions & 1 deletion src/components/layers/line.layer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export default defineComponent({
}
});


},
render() {
return createCommentVNode('Line Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/raster.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { RasterLayer, RasterLayout, RasterPaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<RasterLayer>(props.layerId, 'raster', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Raster Layer');
Expand Down
14 changes: 9 additions & 5 deletions src/components/layers/smybol.layer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { SymbolLayer, SymbolLayout, SymbolPaint } from 'maplibre-gl';
import { genLayerOpts, Shared } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
import { getSourceRef } from '@/components/sources/shared';

Expand All @@ -20,22 +20,26 @@ export default defineComponent({
return;
}

const map = inject(mapSymbol)!,
const ci = getCurrentInstance()!,
map = inject(mapSymbol)!,
isLoaded = inject(isLoadedSymbol)!,
cid = inject(componentIdSymbol)!,
sourceRef = getSourceRef(cid, props.source || sourceId);

watch([ isLoaded, sourceRef ], ([ il, src ]) => {
if (il && (src || src === undefined)) {
map.value.addLayer(genLayerOpts<SymbolLayer>(props.layerId, 'symbol', props, sourceId), props.before || undefined);
registerLayerEvents(map.value, props.layerId, ci.vnode);
}
}, { immediate: true });

onBeforeUnmount(() => {
if (isLoaded.value) map.value.removeLayer(props.layerId);
if (isLoaded.value) {
map.value.removeLayer(props.layerId);
unregisterLayerEvents(map.value, props.layerId, ci.vnode);
}
});


},
render() {
return createCommentVNode('Symbol Layer');
Expand Down

0 comments on commit 5d10455

Please sign in to comment.