Initial commit

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "leaflet": "^1.8.0",
+    "vue": "^2.6.14",
+    "vue2-leaflet": "^2.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,28 +1,48 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <button @click="search">Search</button>
+    <div class="results">
+      <SearchResult
+        v-for="(result, i) in results"
+        :key="'result' + i"
+        :result="result"
+        :resultIndex="i"
+        :mode="mode"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import SearchResult from "./components/SearchResult.vue";
 
 export default {
   name: "App",
   components: {
-    HelloWorld,
+    SearchResult,
+  },
+  data() {
+    return {
+      results: [],
+      mode: "google",
+    };
+  },
+  methods: {
+    search() {
+      fetch(
+        "http://127.0.0.1:5000/intersection?l=-71.9989&b=41&r=-69.5&t=43&buffer=50&point_filter=WHERE (amenity = 'retaurant' OR amenity = 'cafe' OR amenity = 'pub' OR amenity = 'fast_food')&line_filter=WHERE (railway IS NOT null AND bridge IS NOT null)"
+      )
+        .then((d) => d.json())
+        .then((data) => {
+          this.results = data;
+        });
+    },
   },
 };
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+body {
+  font-family: Helvetica, Arial, sans-serif;
 }
 </style>

src/components/SearchResult.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="result">
+    <div class="index">{{ resultIndex + 1 }}</div>
+    <div class="name">
+      {{ result.name }}
+    </div>
+    <div class="map">
+      <l-map
+        :zoom="16"
+        :center="[result.lat, result.lng]"
+        :options="{ zoomControl: false }"
+        style="width: 200px; height: 100px"
+      >
+        <l-tile-layer :url="url" />
+      </l-map>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LMap, LTileLayer } from "vue2-leaflet";
+
+export default {
+  name: "SearchResult",
+  components: {
+    LMap,
+    LTileLayer,
+  },
+  props: {
+    result: Object,
+    resultIndex: Number,
+    mode: String,
+  },
+  computed: {
+    url() {
+      if (this.mode == "google") {
+        return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i70350780!3m12!2sen-US!3sUS!5e18!12m4!1e68!2m2!1sset!2sRoadmap!12m3!1e37!2m1!1ssmartmaps!4e0!23i1379903&key=AIzaSyAo0g0nZh5aOEhMW2S876KMjJ8OqaN-VwQ";
+      } else if (this.mode == "satellite") {
+        return "https://caltopo.com/tile/imagery/{z}/{x}/{y}.png";
+      } else {
+        return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.map {
+  pointer-events: none;
+}
+
+.result {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.leaflet-control-container {
+  display: none;
+}
+
+.index {
+  font-size: 24px;
+  font-weight: bold;
+  width: 30px;
+}
+
+.name {
+  width: 200px;
+}
+</style>

src/main.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import App from "./App.vue";
 
+import "leaflet/dist/leaflet.css";
+
 Vue.config.productionTip = false;
 
 new Vue({

yarn.lock

@@ -3839,6 +3839,11 @@ launch-editor@^2.2.1, launch-editor@^2.6.0:
     picocolors "^1.0.0"
     shell-quote "^1.7.3"
 
+leaflet@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
+  integrity sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -5746,6 +5751,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2-leaflet@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
+  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
+
 vue@^2.6.14:
   version "2.7.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.10.tgz#ae516cc6c88e1c424754468844218fdd5e280f40"