Merge branch 'feature/leaflet' into main

.gitignore

@@ -3,4 +3,6 @@ node_modules
 *.wasm
 public/main.js
 lib/nostr-relay-inspector
-geo.yaml #generated by prebuild
+geo.yaml
+geo.yml
+dist

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@2alheure/vue-safe-mail": "1.0.3",
+    "@vue-leaflet/vue-leaflet": "0.6.1",
     "core-js": "^3.8.3",
     "country-code-emoji": "2.3.0",
     "cross-fetch": "3.1.5",

src/components/LeafletComponent.vue

@@ -0,0 +1,107 @@
+<template>
+
+  <l-map
+    ref="map"
+    v-model:zoom="zoom"
+    :center="[47.41322, -1.219482]"
+    :minZoom="zoom"
+    :maxZoom="zoom"
+    :zoomControl="false"
+    style="height:50vh"
+    >
+
+    <l-tile-layer
+      url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+      layer-type="base"
+      name="OpenStreetMap"
+    />
+
+    <!-- <l-marker v-for="([relay, result]) in Object.entries(geo)" :lat-lng="getLatLng(result)" :key="relay">
+      <l-popup>
+        {{ relay }}
+      </l-popup>
+    </l-marker> -->
+
+    <l-circle-marker
+      v-for="([relay, entry]) in Object.entries(geo)"
+      :lat-lng="getLatLng(entry)"
+      :key="relay"
+      :radius="3"
+      :weight="6"
+      :color="getCircleColor(relay)"
+      :fillOpacity="1"
+      :class="relay"
+      >
+      <l-popup>
+        {{ relay }}
+        meopw
+      </l-popup>
+    </l-circle-marker>
+  </l-map>
+
+</template>
+<script>
+import "leaflet/dist/leaflet.css"
+import { LMap, LTileLayer, LCircleMarker } from "@vue-leaflet/vue-leaflet";
+export default {
+  components: {
+    LMap,
+    LTileLayer,
+    LCircleMarker,
+  },
+  methods: {
+    getLatLng(geo){
+      console.log('meow', [geo.lat, geo.lon])
+      return [geo.lat, geo.lon]
+    },
+    getCircleColor(relay){
+
+      if(this.result[relay]?.aggregate == 'public') {
+        console.log('woof', relay, this.result[relay]?.aggregate)
+        return '#00AA00'
+      }
+      else if(this.result[relay]?.aggregate == 'restricted') {
+        console.log('woof', relay, this.result[relay]?.aggregate)
+        return '#FFA500'
+      }
+      else if(this.result[relay]?.aggregate == 'offline') {
+        console.log('woof', relay, this.result[relay]?.aggregate)
+        return '#FF0000'
+      }
+      return 'transparent'
+    }
+  },
+  async mounted() {
+    console.log('GEO', Object.entries(this.geo))
+  },
+  props: {
+    geo: {
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+    result: {
+      type: Object,
+      default(){
+        return {}
+      }
+    },
+  },
+  data() {
+    return {
+      zoom: 2
+    };
+  },
+};
+</script>
+
+<style>
+.leaflet-container {
+  margin-top:37px;
+  height:250px !important;
+}
+.leaflet-control-zoom {
+  display: none !important;
+}
+</style>

src/components/RelayTableComponent.vue

@@ -8,6 +8,15 @@
       </column>
     </row>
 
+    <row container :gutter="12">
+      <column :xs="12" :md="12" :lg="12">
+        <LeafletComponent
+          :geo="geo"
+          :result="result"
+        />
+      </column>
+    </row>
+
     <row container :gutter="12">
       <column :xs="12" :md="12" :lg="12">
         <div class="block">
@@ -72,6 +81,7 @@
 <script>
 import { defineComponent} from 'vue'
 import RelayListComponent from './RelayListComponent.vue'
+import LeafletComponent from './LeafletComponent.vue'
 // import NavComponent from './NavComponent.vue'
 
 import { Row, Column } from 'vue-grid-responsive';
@@ -94,6 +104,7 @@ export default defineComponent({
     Row,
     Column,
     RelayListComponent,
+    LeafletComponent
     // NavComponent
   },