svelte: map stuff and observatorypage

sinnwerkstatt · Mar 22, 2022 · 0f5c42b · 0f5c42b
1 parent 72dbaca
commit 0f5c42b
Show file tree

Hide file tree

Showing 22 changed files with 2,830 additions and 178 deletions.
diff --git a/newfront/package-lock.json b/newfront/package-lock.json
diff --git a/newfront/package.json b/newfront/package.json
@@ -16,6 +16,9 @@
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@types/js-cookie": "^3.0.1",
+    "@types/leaflet": "^1.7.8",
+    "@types/leaflet.markercluster": "^1.4.6",
+    "@types/svelte-leafletjs": "^0.8.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "autoprefixer": "^10.4.2",
@@ -26,6 +29,9 @@
     "graphql": "^16.3.0",
     "graphql-request": "^4.0.0",
     "js-cookie": "^3.0.1",
+    "leaflet": "^1.7.1",
+    "leaflet-gesture-handling": "^1.2.2",
+    "leaflet.markercluster": "^1.5.3",
     "postcss": "^8.4.5",
     "postcss-load-config": "^3.1.1",
     "prettier": "^2.5.1",

diff --git a/newfront/src/components/Map/BigMap.svelte b/newfront/src/components/Map/BigMap.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import LeafletMap from "$components/Map/LeafletMap.svelte";
+  import { baseLayers } from "$components/Map/layers";
+  import { TileLayer } from "leaflet";
+  // import iconRetinaUrl from "static/images/marker-icon-2x.png";
+  // import iconUrl from "$static/images/marker-icon.png";
+  // import shadowUrl from "$static/images/marker-shadow.png";
+
+  const dispatch = createEventDispatcher();
+
+  let lmap;
+  function mapReady(map) {
+    lmap = map.detail;
+    dispatch("ready", lmap);
+    console.log(lmap);
+    baseLayers.forEach((lay) => {
+      new TileLayer(lay.url, {
+        attribution: lay.attribution,
+      }).addTo(lmap);
+    });
+  }
+
+  // import { Icon, Map } from "leaflet";
+  // import { GestureHandling } from "leaflet-gesture-handling";
+  // import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";
+  // import "leaflet/dist/leaflet.css";
+
+  // Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
+
+  // @ts-ignore
+  // delete Icon.Default.prototype._getIconUrl;
+  // let shadowSize = [0, 0];
+  // Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl, shadowSize });
+
+  export let options = {};
+  export let containerClass = "";
+  export let hideLayerSwitcher = false;
+
+  let LMap;
+
+  // computed: {
+
+  //   visibleLayer() {
+  //     return this.$store.state.visibleLayer;
+  //   },
+  let mapOptions = {
+    zoomSnap: 0.5,
+    minZoom: 1,
+    zoom: 3,
+    zoomControl: true,
+    gestureHandling: true,
+    ...options,
+  };
+</script>
+
+<div class="mx-auto relative {containerClass}">
+  <LeafletMap options={mapOptions} on:ready={mapReady} />
+  <!--    <BigMapStandaloneLayerSwitcher v-if="!hideLayerSwitcher" />-->
+</div>