Add Deck.gl Layers and Utility Support for vue-maplibre-gl

docs/examples/deck-arc-layer.vue

@@ -0,0 +1,50 @@
+// Deck Arc Layer
+//
+// A Deck.gl Arc Layer Example
+
+<template>
+  <MglMap
+    :map-style="style"
+    :center
+    :zoom
+    :maxZoom
+    :pitch
+    :bearing
+    height="500px"
+  >
+    <MglDeckArcLayer
+      id="ArcLayer"
+      :data
+      :getSourceColor="(d) => [Math.sqrt(d.inbound), 140, 0]"
+      :getSourcePosition="(d) => d.from.coordinates"
+      :getTargetColor="(d) => [Math.sqrt(d.outbound), 140, 0]"
+      :getTargetPosition="(d) => d.to.coordinates"
+      :getTooltip="
+        ({ object }) => object && `${object.from.name} to ${object.to.name}`
+      "
+      :getWidth="12"
+      :pickable="true"
+    />
+  </MglMap>
+</template>
+
+<script setup lang="ts">
+import { MglMap, MglDeckArcLayer } from "@indoorequal/vue-maplibre-gl";
+import { ref } from "vue";
+
+const style = ref(
+  "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+);
+const center = ref([-122.4, 37.74]);
+const zoom = ref(11);
+const maxZoom = ref(20);
+const pitch = ref(30);
+const bearing = ref(0);
+
+const data =
+  "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-segments.json";
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>

docs/examples/deck-geojson-layer.vue

@@ -0,0 +1,54 @@
+// Deck Geojson Layer
+//
+// A Deck.gl Geojson Layer Example
+
+<template>
+  <MglMap :map-style="style" :center :zoom height="500px">
+    <MglDeckGeojsonLayer
+      id="deck-gl-geojson"
+      :data
+      pointType="circle+text"
+      :stroked="false"
+      :filled="true"
+      :extruded="true"
+      :pickable="true"
+      :getElevation="30"
+      :getFillColor="[160, 160, 180, 200]"
+      :getLineColor="
+        (f) => {
+          const hex = f.properties.color;
+          // convert to RGB
+          return hex
+            ? hex.match(/[0-9a-f]{2}/g).map((x) => parseInt(x, 16))
+            : [0, 0, 0];
+        }
+      "
+      :getLineWidth="20"
+      :getPointRadius="4"
+      :getText="(f) => f.properties.name"
+      :getTextSize="12"
+      :getTooltip="
+        ({ object }) =>
+          object && (object.properties.name || object.properties.station)
+      "
+    />
+  </MglMap>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { MglMap, MglDeckGeojsonLayer } from "@indoorequal/vue-maplibre-gl";
+
+const style = ref(
+  "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+);
+const center = ref([-122.4, 37.74]);
+const zoom = ref(11);
+
+const data =
+  "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json";
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>

docs/examples/deck-line-layer.vue

@@ -0,0 +1,101 @@
+// Deck Line Layer
+//
+// A Deck.gl Line Layer Example.
+<template>
+  <MglMap
+    :map-style="mapStyle"
+    :center
+    :zoom
+    :maxZoom
+    :pitch
+    :bearing
+    height="500px"
+  >
+    <MglDeckScatteredPlotLayer
+      id="airports"
+      :data="airports"
+      :radiusScale="20"
+      :getPosition="(d) => d.coordinates"
+      :getFillColor="[255, 140, 0]"
+      :getRadius="
+        (d) => {
+          if (d.type.search('major') >= 0) {
+            return 100;
+          }
+          if (d.type.search('small') >= 0) {
+            return 30;
+          }
+          return 60;
+        }
+      "
+      :pickable="true"
+      :getTooltip="getTooltip"
+    />
+    <MglDeckLineLayer
+      id="flight-paths"
+      :data="flightPaths"
+      :opacity="0.9"
+      :getSourcePosition="(d) => d.start"
+      :getTargetPosition="(d) => d.end"
+      :getColor="
+        (d) => {
+          const z = d.start[2];
+          const r = z / 10000;
+          return [255 * (1 - r * 2), 128 * r, 255 * r, 255 * (1 - r)];
+        }
+      "
+      :getWidth="lineWidth"
+      :pickable="true"
+      :getTooltip="getTooltip"
+    />
+  </MglMap>
+</template>
+
+<script setup lang="ts">
+import {
+  MglMap,
+  MglDeckScatteredPlotLayer,
+  MglDeckLineLayer,
+} from "@indoorequal/vue-maplibre-gl";
+
+// Source data CSV
+const DATA_URL = {
+  AIRPORTS:
+    "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/airports.json",
+  FLIGHT_PATHS:
+    "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/line/heathrow-flights.json",
+};
+
+const INITIAL_VIEW_STATE = {
+  latitude: 47.65,
+  longitude: 7,
+  zoom: 4.5,
+  maxZoom: 16,
+  pitch: 50,
+  bearing: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json";
+
+function getTooltip({ object }) {
+  return (
+    object &&
+    `\
+  ${object.country || object.abbrev || ""}
+  ${object.name.indexOf("0x") >= 0 ? "" : object.name}`
+  );
+}
+
+const airports = DATA_URL.AIRPORTS;
+const flightPaths = DATA_URL.FLIGHT_PATHS;
+const lineWidth = 3;
+
+const mapStyle = MAP_STYLE;
+const { longitude, latitude, zoom, maxZoom, pitch, bearing } = INITIAL_VIEW_STATE;
+const center = [longitude, latitude];
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>

docs/examples/deck-polygon-layer.vue

@@ -0,0 +1,58 @@
+// Deck Polygon Layer
+//
+// A Deck.gl Polygon Layer Example.
+<template>
+  <MglMap
+    :map-style="MAP_STYLE"
+    :center
+    :zoom
+    :maxZoom
+    :pitch
+    :bearing
+    height="500px"
+  >
+    <MglDeckPolygonLayer
+      id="PolygonLayer"
+      :data="DATA_URL"
+      :getElevation="(d) => d.population / d.area / 10"
+      :getFillColor="(d) => [d.population / d.area / 60, 140, 0]"
+      :getLineColor="[255, 255, 255]"
+      :getLineWidth="20"
+      :getPolygon="(d) => d.contour"
+      :lineWidthMinPixels="1"
+      :pickable="true"
+      :getTooltip="
+        ({ object }) =>
+          object && `${object.zipcode} Population: ${object.population}`
+      "
+    />
+  </MglMap>
+</template>
+
+<script setup lang="ts">
+import { MglMap, MglDeckPolygonLayer } from "@indoorequal/vue-maplibre-gl";
+
+// Source data CSV
+const DATA_URL =
+  "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json";
+
+const INITIAL_VIEW_STATE = {
+  longitude: -122.4,
+  latitude: 37.74,
+  zoom: 11,
+  maxZoom: 20,
+  pitch: 30,
+  bearing: 0,
+};
+
+const MAP_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json";
+
+const { longitude, latitude, zoom, maxZoom, pitch, bearing } =
+  INITIAL_VIEW_STATE;
+const center = [longitude, latitude];
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>

docs/examples/deck-scatteredplot-layer.vue

@@ -0,0 +1,45 @@
+// Deck Scattered Plot Layer
+//
+// A Deck.gl Scattered Plot Layer Example
+
+<template>
+  <MglMap :map-style="style" :center :zoom :maxZoom :pitch height="500px">
+    <MglDeckScatteredPlotLayer
+      id="ScatterplotLayer"
+      :data="DATA_URL"
+      :radiusScale="6"
+      :getPosition="(d) => d.coordinates"
+      :getFillColor="[255, 140, 0]"
+      :getLineColor="[0, 0, 0]"
+      :getRadius="(d) => Math.sqrt(d.exits)"
+      :lineWidthMinPixels="1"
+      :radiusMaxPixels="100"
+      :radiusMinPixels="1"
+      :stroked="true"
+      :opacity="0.8"
+      :pickable="true"
+      :getTooltip="({ object }) => object && object.name"
+    />
+  </MglMap>
+</template>
+
+<script setup lang="ts">
+import {
+  MglMap,
+  MglDeckScatteredPlotLayer,
+} from "@indoorequal/vue-maplibre-gl";
+
+const DATA_URL =
+  "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json";
+
+const center = [-122.4, 37.74];
+const zoom = 11;
+const style =
+  "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
+const maxZoom = 20;
+const pitch = 30;
+</script>
+
+<style lang="scss">
+@import "maplibre-gl/dist/maplibre-gl.css";
+</style>

lib/components/deck-layers/arc.layer.ts

@@ -0,0 +1,31 @@
+import { defineComponent } from "vue";
+import { ArcLayer, type ArcLayerProps } from "@deck.gl/layers";
+import { useDeckLayer } from "@/lib/composable/useDeckLayer";
+import { type PickingInfo } from "@deck.gl/core";
+import {
+  arcProps,
+  arcPropsKeys,
+  genDeckLayerOpts,
+  type TooltipContent,
+} from "@/lib/lib/deck.layer.lib";
+
+/**
+ * Deck.gl Arc Layer
+ *
+ * See the [Deck.gl Arc Layer docs ](https://deck.gl/docs/api-reference/layers/arc-layer)
+ */
+export default defineComponent({
+  name: "MglDeckArcLayer",
+  props: {
+    ...arcProps(),
+  },
+  setup(props) {
+    const opts = { ...props } as ArcLayerProps & {
+      getTooltip?: ((info: PickingInfo) => TooltipContent) | null;
+    };
+    return useDeckLayer(
+      opts,
+      new ArcLayer(genDeckLayerOpts({ ...opts }, arcPropsKeys)),
+    );
+  },
+});

lib/components/deck-layers/geojson.layer.ts

@@ -0,0 +1,32 @@
+import { defineComponent } from "vue";
+import { GeoJsonLayer, type GeoJsonLayerProps } from "@deck.gl/layers";
+import { useDeckLayer } from "@/lib/composable/useDeckLayer";
+import { type PickingInfo } from "@deck.gl/core";
+import {
+  genDeckLayerOpts,
+  geojsonProps,
+  geoJsonPropsKeys,
+  type TooltipContent,
+} from "@/lib/lib/deck.layer.lib";
+
+/**
+ * Deck.gl Geojson Layer
+ *
+ * See the [Deck.gl Geojson Layer docs](https://deck.gl/docs/api-reference/layers/geojson-layer)
+ */
+export default defineComponent({
+  name: "MglDeckGeojsonLayer",
+  props: {
+    ...geojsonProps(),
+  },
+  setup(props) {
+    const opts = { ...props } as GeoJsonLayerProps & {
+      getTooltip?: ((info: PickingInfo) => TooltipContent) | null;
+    };
+
+    return useDeckLayer(
+      opts,
+      new GeoJsonLayer(genDeckLayerOpts({ ...opts }, geoJsonPropsKeys)),
+    );
+  },
+});