Merge pull request #29 from camptocamp/maplibre

Add Maplibre package

Author: fgravin

.eslintrc.json

@@ -26,7 +26,8 @@
   },
   "plugins": ["@typescript-eslint", "vue"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": 1
+    "@typescript-eslint/no-explicit-any": 1,
+    "no-prototype-builtins": "off"
   },
   "ignorePatterns": ["**/*.test.ts", "apps", "**/mocks", "**/dist/**"]
 }

apps/examples/src/App.vue

@@ -11,6 +11,8 @@ import ExampleZoomToLayerRaw from '@/examples/Example-ZoomToLayer.vue?raw'
 import ExampleMapEvents from '@/examples/Example-MapEvents.vue'
 import ExampleMapEventsRaw from '@/examples/Example-MapEvents.vue?raw'
 import ExampleCustomElementsHtml from '@/examples/Example-CustomElements.html?raw'
+import ExampleMaplibreRaw from '@/examples/Example-Maplibre.vue?raw'
+import ExampleMaplibre from '@/examples/Example-Maplibre.vue'
 import { onMounted, ref } from 'vue'
 import hljs from 'highlight.js'
 import '@geospatial-sdk/elements'
@@ -29,7 +31,9 @@ function loadHtmlExample(html: string, root: HTMLElement) {
 
 const example06_root = ref<HTMLElement>()
 onMounted(() => {
-  loadHtmlExample(ExampleCustomElementsHtml as string, example06_root.value!)
+  if (example06_root.value) {
+    loadHtmlExample(ExampleCustomElementsHtml as string, example06_root.value)    
+  }
   hljs.highlightAll()
 })
 </script>
@@ -85,6 +89,13 @@ onMounted(() => {
     >
       <div class="w-full h-full" ref="example06_root"></div>
     </ExampleContainer>
+    <ExampleContainer
+      example-name="Example 7: Maplibre"
+      example-id="example07"
+      :source-code="ExampleMaplibreRaw"
+    >
+     <ExampleMaplibre></ExampleMaplibre>
+    </ExampleContainer>
   </div>
 </template>
 

apps/examples/src/examples/Example-Maplibre.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { createMapFromContext } from '@geospatial-sdk/maplibre'
+import { type MapContext, type MapContextLayerWms } from '@geospatial-sdk/core'
+
+const Layers = {
+  maplibre: {
+    type: 'maplibre-style',
+    styleUrl: 'https://demo.baremaps.com/style.json',
+    accessToken: 'abcdefgh'
+  },
+  wms: {
+    type: 'wms',
+    url: 'https://data.geopf.fr/wms-r/wms',
+    name: 'INSEE.FILOSOFI.POPULATION'
+  } as MapContextLayerWms,
+  wfs: {
+    type: 'wfs',
+    url: 'https://data.lillemetropole.fr/geoserver/dsp_ilevia/ows?REQUEST=GetCapabilities&SERVICE=WFS&VERSION=2.0.0',
+    featureType: 'ilevia_traceslignes',
+    label: 'Tracé des lignes de bus',
+    visibility: true,
+    attributions: 'camptocamp',
+    opacity: 0.5
+  },
+  geojson: {
+    id: 'geojson',
+    type: 'geojson',
+    url: 'https://data.lillemetropole.fr/data/ogcapi/collections/roubaix:implantation_des_arceaux_velos_a_roubaix/items?f=geojson&limit=-1'
+  },
+  ogcapi: {
+    type: 'ogcapi',
+    url: 'https://data.lillemetropole.fr/data/ogcapi/collections/ilevia:abris_velo/items?f=json&limit=-1',
+    collection: 'ilevia:abris_velo'
+  }
+}
+
+const mapRoot = ref<HTMLElement>()
+let context = {
+  view: {
+    zoom: 10,
+    center: [3.1626248124366176, 50.67829080457065]
+  },
+  layers: Object.keys(Layers).map(key => Layers[key as keyof typeof Layers])
+}
+
+onMounted(async () => {
+  await createMapFromContext(<MapContext>context, {
+    container: <HTMLElement>mapRoot.value
+  })
+})
+
+</script>
+
+<template>
+  <div ref="mapRoot" class="w-full h-full relative">
+    <div class="absolute inset-x-4 bottom-4 flex flex-row gap-4 z-50">
+    </div>
+  </div>
+</template>

apps/examples/src/style.css

@@ -1,5 +1,5 @@
 @import 'ol/ol.css';
-
+@import 'maplibre-gl/dist/maplibre-gl.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;