From 503401ff57208dc42774528a4824dfefc5d42e9c Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Tue, 15 Jun 2021 00:08:07 +0200
Subject: [PATCH] Rewrite frontend using Vue

---
 frontend/App.vue       | 723 +++++++++++++++++++++++++++++++++++++++++
 frontend/index.js      |   7 +
 package.json           |  22 ++
 snowpack.config.mjs    |  35 ++
 templates/map.html     |  89 +----
 templates/old_map.html |  88 +++++
 web_view.py            |  20 +-
 7 files changed, 908 insertions(+), 76 deletions(-)
 create mode 100644 frontend/App.vue
 create mode 100644 frontend/index.js
 create mode 100644 package.json
 create mode 100644 snowpack.config.mjs
 create mode 100644 templates/old_map.html

diff --git a/frontend/App.vue b/frontend/App.vue
new file mode 100644
index 0000000..0a1923d
--- /dev/null
+++ b/frontend/App.vue
@@ -0,0 +1,723 @@
+<template>
+<div>
+  <div id="map">
+  </div>
+  <button ref="btn" id="load-btn" type="button" class="btn btn-primary btn-lg" @click="load_wikidata_items">
+    <span v-if="!loading">
+      Load Wikidata items
+    </span>
+    <span v-if="loading">
+    <span class="spinner-border spinner-border-sm"></span>
+      Loading ...
+    </span>
+  </button>
+  <div id="sidebar">
+
+    <div v-if="!current_item">
+
+      <div class="card m-2">
+        <div class="card-body">
+          <form id="search-form" class="row row-cols-lg-auto g-3 align-items-center" @submit.prevent="run_search">
+            <div class="col-12">
+              <input class="form-control" id="search-text" v-model.trim="search_text" placeholder="place">
+            </div>
+            <div class="col-12">
+              <button type="submit" id="search-btn" class="btn btn-primary">search</button>
+            </div>
+          </form>
+          <div class="list-group">
+            <a class="list-group-item list-group-item-action"
+                :class="{ active: hit.identifier == this.active_hit }"
+                v-bind:key="hit.identifier"
+                v-for="hit in hits"
+                :href="hit_url(hit)"
+                @click.prevent="visit(hit)">
+              {{ hit.name }} ({{ hit.category }})
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="card m-2" v-if="isa_list.length">
+        <div class="card-body">
+          <div class="h5 card-title">OSM/Wikidata link status</div>
+          <div class="list-group">
+            <label for="linked" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+              <span>
+                <input class="form-check-input me-1" id="linked" type="checkbox" v-model="linked">
+                Wikidata items tagged in OSM
+              </span>
+              <span class="badge bg-primary rounded-pill">{{ tagged_count }}</span>
+            </label><br>
+            <label for="not-linked" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+              <span>
+                <input class="form-check-input me-1" id="not-linked" type="checkbox" v-model="not_linked">
+                Wikidata items not tagged in OSM
+              </span>
+              <span class="badge bg-primary rounded-pill">{{ not_tagged_count }}</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="card m-2" v-if="isa_list.length" id="isa-card">
+        <div class="card-body">
+          <div class="h5 card-title">item types</div>
+          <div><a href="#" @click.prevent="isa_tick_all">show all</a></div>
+
+          <div class="list-group" @mouseout="this.hover_isa=undefined">
+            <label class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" v-for="isa in isa_list" @mouseenter="this.hover_isa=isa">
+              <span>
+              <input class="form-check-input me-1" type="checkbox" :id="'isa-' + isa.qid" :value="isa.qid" v-model="isa_ticked"> 
+              {{ isa.label }} ({{ isa.qid }})
+              <a href="#" @click.stop="isa_ticked=[isa.qid]">only</a>
+              </span>
+              <span class="badge bg-primary rounded-pill">{{ isa.count }}</span>
+            </label>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="card m-2" id="detail-card" v-if="current_item">
+      <div class="card-body">
+        <div class="h4 card-title">
+          <span id="detail-header">item detail</span>
+          <button type="button" class="btn-close float-end" id="close-detail" @click="close_item()"></button>
+        </div>
+        <div id="detail">
+          <div class="row"><div class="col">
+          <strong>Wikidata item</strong><br>
+          <a :href="qid_url(wd_item.qid)" target="_blank">{{ wd_item.label }}</a> ({{ wd_item.qid }})
+
+          <span v-if="wd_item.description">
+            <br><strong>description</strong><br>{{ wd_item.description }}
+          </span>
+
+          <br><strong>item type</strong>
+          <span v-bind:key="`isa-${wd_item.qid}-${isa_qid}`" v-for="isa_qid in wd_item.isa_list">
+            <br><a :href="qid_url(isa_qid)" target="_blank">{{isa_labels[isa_qid]}}</a> ({{isa_qid}})
+          </span>
+
+          <span v-if="wd_item.street_address.length">
+            <br><strong>street address</strong>
+            <br>{{wd_item.street_address[0]}}
+          </span>
+
+          </div><div class="col">
+
+          <span v-if="current_item.tag_or_key_list && current_item.tag_or_key_list.length">
+            <strong>OSM tags/keys to search for</strong>
+            <span v-for="v in current_item.tag_or_key_list">
+              <br>{{ v }}
+            </span>
+          </span>
+
+          <span v-if="wd_item.image_list.length">
+            <img class="w-100" :src="api_base_url + '/commons/' + wd_item.image_list[0]">
+          </span>
+
+        </div></div>
+        </div>
+
+        <div v-if="current_item.nearby && current_item.nearby.length">
+          <strong>Possible OSM matches</strong><br>
+          <table class="table table-sm table-hover" @mouseout="this.current_osm = undefined">
+            <tbody>
+              <tr
+                  v-for="osm in current_item.nearby"
+                  class="osm-candidate"
+                  @mouseenter="this.current_osm=osm">
+                <td class="text-end text-nowrap">
+                  {{ osm.distance.toFixed(0) }}m
+                  <a :href="'https://www.openstreetmap.org/' + osm.identifier" target="_blank"><i class="fa fa-map-o"></i></a>
+                </td>
+                <td>
+                {{ osm.name || "no name" }}
+                <span v-for="(p, index) in osm.presets">
+                  <span v-if="index != 0">, </span>
+                  <a
+                    :href="'http://wiki.openstreetmap.org/wiki/' + p.tag_or_key"
+                    class="osm-wiki-link"
+                    target="_blank">{{p.name}} <i class="fa fa-external-link"></i></a>
+                </span>
+
+                <span v-if="osm.address_list.length">
+                    <br>address nodes: {{ osm.address_list.join("; ") }}
+                </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import L from "leaflet";
+import { ExtraMarkers } from "leaflet-extra-markers";
+import axios from "redaxios";
+
+var redMarker = ExtraMarkers.icon({
+  icon: "fa-wikidata",
+  markerColor: "red",
+  shape: "circle",
+  prefix: "fa",
+});
+
+var greenMarker = ExtraMarkers.icon({
+  icon: "fa-wikidata",
+  markerColor: "green",
+  shape: "circle",
+  prefix: "fa",
+});
+
+var blueMarker = ExtraMarkers.icon({
+  icon: "fa-wikidata",
+  markerColor: "blue",
+  shape: "circle",
+  prefix: "fa",
+});
+
+var osmYellowMarker = ExtraMarkers.icon({
+  icon: "fa-map",
+  markerColor: "yellow",
+  shape: "square",
+  prefix: "fa",
+});
+
+export default {
+  props: {
+    startLat: Number,
+    startLon: Number,
+    startZoom: Number,
+  },
+  data() {
+    return {
+      api_base_url: "https://alpha.osm.wikidata.link",
+      tag_or_key_list: [],
+      search_text: "",
+      load_button_pressed: false,
+      hits: [],
+      center: undefined,
+      zoom: undefined,
+      isa_ticked: [],
+      isa_list: [],
+      isa_lookup: {},
+      items: {},
+      yellowMarker: osmYellowMarker,
+      osm_loaded: false,
+      wikidata_loaded: false,
+      osm_loading: false,
+      wikidata_loading: false,
+      current_item: undefined,
+      current_osm: undefined,
+      hover_qid: undefined,
+      isa_labels: {},
+      linked: true,
+      not_linked: true,
+      map: undefined,
+      hover_circles: [],
+      candidate_outline: undefined,
+      check_for_missing_done: false,
+      selected_circles: [],
+      hover_isa: undefined,
+    };
+  },
+  computed: {
+    loading() {
+      return this.osm_loading || this.wikidata_loading;
+    },
+    wd_item() {
+      return this.current_item ? this.current_item.wikidata : undefined;
+    },
+    tagged_count() {
+      var count = 0;
+      for (const qid in this.items) {
+        var item = this.items[qid];
+        if (item.wikidata && item.osm) {
+          count += 1;
+        }
+      }
+      return count;
+    },
+    not_tagged_count() {
+      var count = 0;
+      for (const qid in this.items) {
+        var item = this.items[qid];
+        if (item.wikidata && !item.osm) {
+          count += 1;
+        }
+      }
+      return count;
+    },
+    selected_items() {
+      var ret = {};
+      for (const qid in this.items) {
+        var item = this.items[qid];
+        if (!item.wikidata) continue;
+
+        if (!this.linked && item.osm) continue;
+        if (!this.not_linked && !item.osm) continue;
+
+        if (item.wikidata.isa_list.some(isa => this.isa_ticked.includes(isa))) {
+          ret[qid] = item;
+        }
+      }
+      return ret;
+    }
+  },
+  watch: {
+    selected_items(new_items, old_items) {
+      for (const qid of Object.keys(new_items)) {
+        if (!old_items[qid])
+          this.items[qid].group.addTo(this.map);
+      }
+
+      for (const qid of Object.keys(old_items)) {
+        if (!new_items[qid])
+          this.items[qid].group.removeFrom(this.map);
+      }
+    },
+    current_osm(osm) {
+      if (this.candidate_outline !== undefined) {
+        this.candidate_outline.removeFrom(this.map);
+      }
+
+      if (osm === undefined) return;
+
+      var mapStyle = { fillOpacity: 0, color: "red" };
+      var geojson = L.geoJSON(null, { style: mapStyle });
+      geojson.addData(osm.geojson);
+      geojson.addTo(this.map);
+
+      this.candidate_outline = geojson;
+    },
+    current_item(item, old_item) {
+      if (old_item) {
+        this.selected_circles.forEach((circle) => {
+          circle.removeFrom(this.map);
+        });
+      }
+
+      this.selected_circles = [];
+
+      if (!item) return;
+
+      item.markers.forEach((marker) => {
+        var coords = marker.getLatLng();
+        var circle = L.circle(coords, { radius: 20, color: "orange" }).addTo(this.map);
+        this.selected_circles.push(circle);
+      });
+
+    },
+    hover_isa(highlight_isa) {
+      this.drop_hover_circles();
+
+      for(const item of Object.values(this.selected_items)) {
+        var opacity = 0.9;
+        if (highlight_isa) {
+          var match = item.wikidata.isa_list.some(isa => isa == highlight_isa.qid);
+          opacity = match ? 1 : 0.2;
+          if (match) {
+            this.add_hover_circles(item);
+          }
+        }
+        this.set_item_opacity(item, opacity);
+
+      }
+    }
+  },
+  methods: {
+    isa_tick_all() {
+      this.isa_ticked = Object.keys(this.isa_labels);
+    },
+    build_map_path() {
+      var zoom = this.map.getZoom();
+      var c = this.map.getCenter();
+      var lat = c.lat.toFixed(5);
+      var lng = c.lng.toFixed(5);
+      var path = `/map/${zoom}/${lat}/${lng}`;
+      if (this.current_item) {
+        path += `?item=${this.wd_item.qid}`;
+      }
+      return path;
+    },
+
+    mouse_events(marker, qid) {
+      marker.on("mouseover", () => { this.add_highlight(qid); });
+      marker.on("mouseout", () => { this.drop_highlight(qid); });
+      marker.on("click", () => { this.open_item(qid); });
+
+      var item = this.items[qid];
+
+      item.markers ||= [];
+      item.markers.push(marker);
+    },
+
+    set_item_opacity(item, opacity) {
+      if (item.outline) {
+        item.outline.setStyle({ opacity: opacity });
+      }
+      if (item.lines) {
+        item.lines.forEach((line) => {
+          line.setStyle({ opacity: opacity });
+        });
+      }
+
+      item.markers.forEach((marker) => {
+        marker.setOpacity(opacity);
+      })
+
+    },
+
+    add_hover_circles(item) {
+      item.markers.forEach((marker) => {
+        var coords = marker.getLatLng();
+        var circle = L.circle(coords, { radius: 20 }).addTo(this.map);
+        this.hover_circles.push(circle);
+      });
+    },
+    drop_hover_circles() {
+      this.hover_circles.forEach((circle) => {
+        circle.removeFrom(this.map);
+      });
+      this.hover_circles = [];
+    },
+    add_highlight(qid) {
+      var item = this.items[qid];
+
+      if (item.outline) {
+        item.outline.setStyle({ fillOpacity: 0.2, weight: 6 });
+      }
+      if (item.lines) {
+        item.lines.forEach((line) => {
+          line.setStyle({ weight: 6 });
+        });
+      }
+      this.add_hover_circles(item);
+    },
+    drop_highlight(qid) {
+      var item = this.items[qid];
+
+      if (item.outline) {
+        item.outline.setStyle({ fillOpacity: 0, weight: 3 });
+      }
+      if (item.lines) {
+        item.lines.forEach((line) => {
+          line.setStyle({ weight: 3 });
+        });
+      }
+      this.drop_hover_circles();
+    },
+    update_map_path() {
+      history.replaceState(null, null, this.build_map_path());
+    },
+    open_item(qid) {
+      var item = this.items[qid];
+      this.current_osm = undefined;
+      this.current_item = item;
+      this.update_map_path();
+
+      if (item.detail_requested !== undefined) return;
+      item.detail_requested = true;
+
+      var item_tags_url = `${this.api_base_url}/api/1/item/${qid}/tags`;
+      axios.get(item_tags_url).then((response) => {
+        var qid = response.data.qid;
+        this.items[qid].tag_or_key_list = response.data.tag_or_key_list;
+      });
+
+      var item_osm_candidates_url = `${this.api_base_url}/api/1/item/${qid}/candidates`;
+      var bounds = this.map.getBounds();
+      var params = { bounds: bounds.toBBoxString() };
+
+      axios.get(item_osm_candidates_url, { params: params }).then((response) => {
+        var qid = response.data.qid;
+        this.items[qid].nearby = response.data.nearby;
+      });
+    },
+    close_item() {
+      this.current_osm = undefined;
+      this.current_item = undefined;
+      this.update_map_path();
+    },
+    qid_url(qid) {
+      return "https://www.wikidata.org/wiki/" + qid;
+    },
+    getMarker(item) {
+      if (!this.osm_loaded) return blueMarker;
+      return item.osm ? greenMarker : redMarker;
+    },
+    hit_url(hit) {
+      var lat = parseFloat(hit.lat).toFixed(5);
+      var lon = parseFloat(hit.lon).toFixed(5);
+      return `/map/16/${lat}/${lon}`
+    },
+    visit(hit) {
+      var lat = parseFloat(hit.lat).toFixed(5);
+      var lon = parseFloat(hit.lon).toFixed(5);
+
+      this.map.setView([lat, lon], 16);
+    },
+
+    process_wikidata_items(load_items) {
+      load_items.forEach(item => {
+        var qid = item.qid;
+        this.items[qid] ||= {};
+        if (this.items[qid].wikidata) return;
+        this.items[qid].wikidata = item;
+        var group = this.items[qid].group ||= L.featureGroup();
+
+        var icon = blueMarker;
+        var label = `${item.label} (${item.qid})`;
+        item.markers.forEach((marker_data) => {
+          var marker = L.marker(marker_data, { opacity: 0.9, icon: icon });
+          marker.addTo(group);
+          this.mouse_events(marker, qid);
+          marker_data.marker = marker;
+        });
+        // group.addTo(this.map);
+      });
+
+    },
+
+    clear_items() {
+
+      for (const qid of Object.keys(this.items)) {
+        this.items[qid].group.removeFrom(this.map);
+      }
+
+      this.items = {};
+      this.isa_list = [];
+      this.isa_ticked = [];
+      this.isa_labels = {};
+      this.isa_lookup = {};
+    },
+
+    load_wikidata_items() {
+      this.load_button_pressed = true;
+      this.wikidata_loaded = false;
+      this.osm_loaded = false;
+      this.check_for_missing_done = false;
+
+      this.clear_items();
+
+      this.close_item();
+
+      this.wikidata_loading = true;
+      this.osm_loading = true;
+
+      var bounds = this.map.getBounds();
+
+      var items_url = this.api_base_url + "/api/1/items";
+      var osm_objects_url = this.api_base_url + "/api/1/osm";
+
+      var params = { bounds: bounds.toBBoxString() };
+
+      axios.get(items_url, { params: params }).then((response) => {
+        this.isa_list = response.data.isa_count;
+        this.isa_list.forEach(isa => {
+          this.isa_ticked.push(isa.qid);
+          this.isa_labels[isa.qid] = isa.label;
+          this.isa_lookup[isa.qid] = isa;
+        });
+        this.process_wikidata_items(response.data.items);
+        this.wikidata_loaded = true;
+        this.wikidata_loading = false;
+
+        this.check_for_missing();
+      });
+
+      axios.get(osm_objects_url, { params: params }).then((response) => {
+        response.data.objects.forEach((osm) => {
+          var qid = osm.wikidata;
+          this.items[qid] ||= {};
+          this.items[qid].osm ||= [];
+          this.items[qid].osm.push(osm);
+          var group = this.items[qid].group ||= L.featureGroup();
+          var icon = osmYellowMarker;
+          var marker = L.marker(osm.centroid, { opacity: 0.9, title: osm.name, icon: icon });
+          osm.marker = marker;
+          marker.addTo(group);
+          this.mouse_events(marker, qid);
+
+          if (osm.type != "node" && osm.geojson) {
+            var mapStyle = { fillOpacity: 0 };
+            var geojson = L.geoJSON(null, { style: mapStyle });
+            geojson.addData(osm.geojson);
+            geojson.addTo(group);
+            this.items[qid].outline = geojson;
+          }
+        });
+        this.osm_loaded = true;
+        this.osm_loading = false;
+
+        this.check_for_missing();
+      });
+    },
+    run_search() {
+      if (!this.search_text) return;
+      var params = { q: this.search_text };
+      var search_url = this.api_base_url + "/api/1/search";
+      axios.get(search_url, { params: params }).then((response) => {
+        this.hits = response.data.hits;
+      });
+
+    },
+    check_for_missing() {
+      if (this.check_for_missing_done) return;
+      if (!this.osm_loaded || !this.wikidata_loaded) return;
+
+
+      var missing_qids = [];
+      for (const [qid, item] of Object.entries(this.items)) {
+        if (!item.wikidata) missing_qids.push(qid);
+      }
+
+      console.log('missing:', missing_qids);
+      if (missing_qids.length == 0) {
+        this.update_wikidata();
+        return;
+      }
+
+      var c = this.map.getCenter();
+      var params = {
+        qids: missing_qids.join(","),
+        lat: c.lat.toFixed(5),
+        lon: c.lng.toFixed(5),
+      };
+      var missing_url = this.api_base_url + "/api/1/missing";
+      axios.get(missing_url, { params: params }).then((response) => {
+        response.data.isa_count.forEach((isa) => {
+          this.isa_labels[isa.qid] = isa.label;
+          if (this.isa_lookup[isa.qid] === undefined) {
+            this.isa_lookup[isa.qid] = isa;
+            this.isa_list.push(isa);
+            this.isa_ticked.push(isa.qid);
+          } else {
+            this.isa_lookup[isa.qid].count += 1;
+          }
+        });
+
+        this.process_wikidata_items(response.data.items);
+        this.update_wikidata();
+      });
+    },
+    update_wikidata() {
+      for (const qid in this.items) {
+        var item = this.items[qid];
+        if (!item.osm) continue
+
+        var wd_item = item.wikidata;
+
+        item.osm.forEach((osm) => {
+          osm.marker.setIcon(wd_item ? osmYellowMarker : osmOrangeMarker);
+        });
+
+        if (!wd_item) continue;
+
+        wd_item.markers.forEach((marker_data) => {
+          marker_data.marker.setIcon(greenMarker);
+          item.lines ||= [];
+          item.osm.forEach((osm) => {
+            var path = [osm.centroid, marker_data];
+            var polyline = L.polyline(path, { color: "green" });
+            polyline.addTo(item.group)
+            this.items[qid].lines.push(polyline);
+          });
+        });
+      }
+
+      for (const qid in this.items) {
+        var item = this.items[qid];
+        if (item.osm) continue;
+        item.wikidata.markers.forEach((marker_data) => {
+          marker_data.marker.setIcon(redMarker);
+        });
+      }
+    }
+  },
+  created() {
+    var lat = this.startLat ?? 52.19679;
+    var lon = this.startLon ?? 0.15224;
+    this.center = [lat, lon];
+    this.zoom = this.startZoom || 16;
+  },
+  mounted() {
+    this.$nextTick(function () {
+      var options = {
+        center: this.center,
+        zoom: this.zoom,
+      };
+
+      var map = L.map("map", options);
+      var osm_url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+      var tile_url = "https://tile-c.openstreetmap.fr/hot/{z}/{x}/{y}.png";
+      var osm = L.tileLayer(osm_url, {
+        maxZoom: 19,
+      });
+      osm.addTo(map);
+
+      map.on("moveend", this.update_map_path);
+      this.map = map;
+    });
+
+  },
+};
+</script>
+
+<style>
+
+#map {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 35%;
+  width: 65%;
+  z-index: -1; 
+}
+
+#load-btn {
+  position: absolute;
+  top: 20px;
+  left: 62.5%;
+  transform: translate(-50%, 0);
+}
+
+#search {
+  position: absolute;
+  overflow: auto;
+  top: 20px;
+  left: 20px;
+  bottom: 20px;
+  width: 25%;
+  background: lightgray;
+}
+
+.bg-highlight {
+  background: lightgray !important;
+}
+
+#load-btn {
+  position: absolute;
+  top: 20px;
+  left: 62.5%;
+  transform: translate(-50%, 0);
+}
+
+#sidebar {
+  position: absolute;
+  background: #eee;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  overflow: auto;
+  width: 35%;
+}
+
+</style>
diff --git a/frontend/index.js b/frontend/index.js
new file mode 100644
index 0000000..c3a35df
--- /dev/null
+++ b/frontend/index.js
@@ -0,0 +1,7 @@
+import {createApp} from 'vue';
+import App from './App.vue';
+
+export default function(props) {
+  const app = createApp(App, props).mount('#app');
+  return app;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2e463cc
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "type": "module",
+  "scripts": {
+    "start": "NODE_OPTIONS='--experimental-json-modules' snowpack dev",
+    "build": "NODE_OPTIONS='--experimental-json-modules' snowpack build",
+    "test": "echo \"This template does not include a test runner by default.\" && exit 1"
+  },
+  "dependencies": {
+    "bootstrap": "^5.0.1",
+    "fork-awesome": "^1.1.7",
+    "leaflet": "^1.7.1",
+    "leaflet-extra-markers": "^1.2.1",
+    "redaxios": "^0.4.1",
+    "vue": "^3.0.11"
+  },
+  "devDependencies": {
+    "@snowpack/plugin-dotenv": "^2.1.0",
+    "@snowpack/plugin-vue": "^2.4.0",
+    "snowpack": "^3.3.7",
+    "snowpack-plugin-cdn-import": "^1.0.0"
+  }
+}
diff --git a/snowpack.config.mjs b/snowpack.config.mjs
new file mode 100644
index 0000000..f92da73
--- /dev/null
+++ b/snowpack.config.mjs
@@ -0,0 +1,35 @@
+import pkg from './package.json';
+
+/** @type {import("snowpack").SnowpackUserConfig } */
+export default {
+  mount: {
+    // public: {url: '/', static: true},
+    frontend: {url: '/dist'},
+  },
+  plugins: [
+    '@snowpack/plugin-vue',
+    '@snowpack/plugin-dotenv',
+    ['snowpack-plugin-cdn-import', {
+        dependencies: pkg.dependencies,
+        enableInDevMode: true,
+        // baseUrl: 'https://unpkg.com',
+    }]
+  ],
+  routes: [
+    /* Enable an SPA Fallback in development: */
+    // {"match": "routes", "src": ".*", "dest": "/index.html"},
+  ],
+  optimize: {
+    /* Example: Bundle your final build: */
+    // "bundle": true,
+  },
+  packageOptions: {
+    /* ... */
+  },
+  devOptions: {
+    /* ... */
+  },
+  buildOptions: {
+    /* ... */
+  },
+};
diff --git a/templates/map.html b/templates/map.html
index c23d12d..8ff72cd 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -2,87 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Map showing Wikidata items linked to OSM</title>
-		<link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome/css/fork-awesome.css')}}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/map.css') }}?time={{time}}" type="text/css" media="all" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Wikidata items linked to OSM</title>
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.1/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='Leaflet.ExtraMarkers/leaflet.extra-markers.min.css') }}" type="text/css" media="all" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.2.1/dist/css/leaflet.extra-markers.min.css">
   </head>
   <body>
-    <div id="map">
-    </div>
-    <button id="load-btn" type="button" class="btn btn-primary btn-lg">
-      <span id="loading" class="d-none">
-      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-      Loading ...
-      </span>
-      <span id="load-text">
-      Load Wikidata items
-      </span>
-    </button>
+    <div id="app"></div>
 
-    <div id="sidebar">
-      <div id="search-and-isa">
-        <div class="card m-2" id="search-card">
-          <div class="card-body">
-            <form id="search-form">
-            <div>
-              <input id="search-text" placeholder="place">
-              <button type="submit" id="search-btn" class="btn btn-primary">search</button>
-            </div>
-            </form>
-            <div id="search-results">
-            </div>
-          </div>
-        </div>
+    <script type="module">
+      import { createApp } from "https://cdn.skypack.dev/vue@^3.0.11";
+      import App from {{ url_for('static', filename='snowpack/App.vue.js') | tojson }};
 
-        <div class="card d-none m-2" id="link-status-card">
-          <div class="card-body">
-            <div class="h5 card-title">OSM/Wikidata link status</div>
-            <div>
-              <input type="checkbox" id="linked" checked>
-              <label for="linked">Wikidata items tagged in OSM: <span id="linked-count"></span></label><br>
-              <input type="checkbox" id="not-linked" checked>
-              <label for="not-linked">Wikidata items not tagged in OSM: <span id="not-linked-count"></span></label>
-            </div>
-          </div>
-        </div>
+      const props = {
+        startLat: {{ lat }},
+        startLon: {{ lon }},
+        startZoom: {{ zoom }},
+      };
 
-        <div class="card d-none m-2" id="isa-card">
-          <div class="card-body">
-            <div class="h5 card-title">item types</div>
-            <div><a href="#" id="show-all-isa">show all</a></div>
-            <div id="isa-list">
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card d-none m-2" id="detail-card">
-        <div class="card-body">
-          <div class="h4 card-title">
-            <span id="detail-header">item detail</span>
-            <button type="button" class="btn-close float-end" id="close-detail"></button>
-          </div>
-            <div id="detail"></div>
-            <div id="candidates"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script>
-    var start_lat = {{ lat | tojson }};
-    var start_lng = {{ lng | tojson }};
-    var zoom = {{ zoom | tojson }};
+      const app = createApp(App, props).mount('#app');
 
     </script>
-  <script src="https://unpkg.com/axios@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='Leaflet.ExtraMarkers/leaflet.extra-markers.min.js') }}"></script>
-    <script type="text/javascript" src="{{ url_for('static', filename='js/map.js') }}?time={{time}}"></script>
   </body>
 </html>
-
diff --git a/templates/old_map.html b/templates/old_map.html
new file mode 100644
index 0000000..c23d12d
--- /dev/null
+++ b/templates/old_map.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Map showing Wikidata items linked to OSM</title>
+		<link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome/css/fork-awesome.css')}}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/map.css') }}?time={{time}}" type="text/css" media="all" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='Leaflet.ExtraMarkers/leaflet.extra-markers.min.css') }}" type="text/css" media="all" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+  </head>
+  <body>
+    <div id="map">
+    </div>
+    <button id="load-btn" type="button" class="btn btn-primary btn-lg">
+      <span id="loading" class="d-none">
+      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      Loading ...
+      </span>
+      <span id="load-text">
+      Load Wikidata items
+      </span>
+    </button>
+
+    <div id="sidebar">
+      <div id="search-and-isa">
+        <div class="card m-2" id="search-card">
+          <div class="card-body">
+            <form id="search-form">
+            <div>
+              <input id="search-text" placeholder="place">
+              <button type="submit" id="search-btn" class="btn btn-primary">search</button>
+            </div>
+            </form>
+            <div id="search-results">
+            </div>
+          </div>
+        </div>
+
+        <div class="card d-none m-2" id="link-status-card">
+          <div class="card-body">
+            <div class="h5 card-title">OSM/Wikidata link status</div>
+            <div>
+              <input type="checkbox" id="linked" checked>
+              <label for="linked">Wikidata items tagged in OSM: <span id="linked-count"></span></label><br>
+              <input type="checkbox" id="not-linked" checked>
+              <label for="not-linked">Wikidata items not tagged in OSM: <span id="not-linked-count"></span></label>
+            </div>
+          </div>
+        </div>
+
+        <div class="card d-none m-2" id="isa-card">
+          <div class="card-body">
+            <div class="h5 card-title">item types</div>
+            <div><a href="#" id="show-all-isa">show all</a></div>
+            <div id="isa-list">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card d-none m-2" id="detail-card">
+        <div class="card-body">
+          <div class="h4 card-title">
+            <span id="detail-header">item detail</span>
+            <button type="button" class="btn-close float-end" id="close-detail"></button>
+          </div>
+            <div id="detail"></div>
+            <div id="candidates"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+    var start_lat = {{ lat | tojson }};
+    var start_lng = {{ lng | tojson }};
+    var zoom = {{ zoom | tojson }};
+
+    </script>
+  <script src="https://unpkg.com/axios@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='Leaflet.ExtraMarkers/leaflet.extra-markers.min.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/map.js') }}?time={{time}}"></script>
+  </body>
+</html>
+
diff --git a/web_view.py b/web_view.py
index f8cf833..ef57dbd 100755
--- a/web_view.py
+++ b/web_view.py
@@ -273,14 +273,30 @@ def identifier_page(pid):
     )
 
 
-@app.route("/map/<int:zoom>/<float(signed=True):lat>/<float(signed=True):lng>")
-def map_location(zoom, lat, lng):
+@app.route("/old_map/<int:zoom>/<float(signed=True):lat>/<float(signed=True):lng>")
+def old_map_location(zoom, lat, lng):
     t = int(time())
     return render_template("map.html", zoom=zoom, lat=lat, lng=lng, time=t)
 
 
 @app.route("/map")
 def map_start_page():
+    location = get_user_location()
+    lat, lon = location
+    return redirect(url_for(
+        'map_location',
+        zoom=16,
+        lat=f'{lat:.5f}',
+        lon=f'{lon:.5f}'
+    ))
+
+@app.route("/map/<int:zoom>/<float(signed=True):lat>/<float(signed=True):lon>")
+def map_location(zoom, lat, lon):
+    return render_template("map.html", zoom=zoom, lat=lat, lon=lon)
+
+
+@app.route("/old_map")
+def old_map_start_page():
     t = int(time())
     location = get_user_location()
     if not location: