Add Enedis / RTE data

backend/pyproject.toml

@@ -1,5 +1,5 @@
 [tool.poetry]
-name = "ocb-backend"
+name = "avicable-backend"
 version = "0.0.1"
 description = "overhead cables and birdlife - backend"
 authors = ["LPO AuRA <[email protected]>"]

frontend/components/layout/appBar.vue

@@ -1,5 +1,6 @@
 <template>
   <v-app-bar color="light-blue-darken-3" :density="mobile ? 'compact': 'default'">
+    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
     <v-toolbar-title>{{ $t('app.appShortName') }}</v-toolbar-title>
     <v-spacer />
     <div v-if="!mobile">
@@ -14,4 +15,6 @@
 import  {useDisplay} from 'vuetify'
 const {mobile} = useDisplay()
 const router = useRouter()
+const globalStore = useGlobalStore()
+const {drawer} = storeToRefs(globalStore)
 </script>

frontend/components/layout/drawerMenu.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-navigation-drawer v-if="!mobile" v-model="drawer" :rail="rail" class="bg-light-blue-darken-3" @click="rail=false">
+  <v-navigation-drawer v-if="!mobile || mobile" v-model="drawer" :rail="rail" class="bg-light-blue-darken-3"
+    @click="rail=false">
     <v-list class="bg-orange-darken-2">
       <v-list-item
         :prepend-avatar="$auth.loggedIn ? 'https://randomuser.me/api/portraits/lego/7.jpg' : 'https://randomuser.me/api/portraits/lego/1.jpg'"
@@ -19,10 +20,12 @@
       <v-list density="compact" nav>
         <v-list-item v-if="$auth.loggedIn" link href="/api/admin/" prepend-icon="mdi-cogs" :title="t('nav.admin')"
           value="starred" />
+        <v-list-item v-if="mobile"> <v-btn icon="mdi-chevron-left" variant="text"
+            @click.stop="drawer = !drawer" /></v-list-item>
       </v-list>
     </template>
   </v-navigation-drawer>
-  <v-bottom-navigation v-if="mobile" :elevation="5" grow density="default" class="text-light-blue-darken-3"
+  <!-- <v-bottom-navigation v-if="mobile" :elevation="5" grow density="default" class="text-light-blue-darken-3"
     theme="dark">
     <v-btn v-for="[icon, text, url, loggedIn] in links" v-if="$auth.loggedIn" :to="url">
       <v-icon>{{icon}}</v-icon>
@@ -32,7 +35,7 @@
       <v-icon>mdi-account-circle</v-icon>
       <span>{{$auth.user?.username}}</span>
     </v-btn>
-  </v-bottom-navigation>
+  </v-bottom-navigation> -->
 </template>
 <script setup>
 import { useDisplay } from 'vuetify'
@@ -49,6 +52,7 @@ const links = ref([
 ]);
 
 const rail=ref(true)
-const drawer=ref(true)
+const globalStore = useGlobalStore()
+const {drawer} = storeToRefs(globalStore)
 
 </script>

frontend/components/map/search.vue

@@ -2,6 +2,7 @@
   <l-map id="map" ref="map" class="d-flex" :zoom="zoom" :center="center" @ready="hookUpDraw" @zoom="getBbox"
     @moveend="getBbox">
 
+
     <!-- <l-map id="map" ref="map" class="d-flex align-stretch" :zoom="zoom" :center="center" @ready="hookUpDraw"> -->
     <template v-if="mapReady">
       <l-tile-layer v-for="baseLayer in baseLayers" :key="baseLayer.id" :name="baseLayer.name" :url="baseLayer.url"
@@ -20,6 +21,13 @@
         :geojson="operatedLineStringData" :options-style="infrastructureOperatedLineStyle" />
       <l-geo-json v-if="isFeatureCollection(operatedPointData)" name="Supports neutralisés" layer-type="overlay"
         :geojson="operatedPointData" :options="operatedInfrastructureGeoJsonOptions" />
+      <l-geo-json v-if="isFeatureCollection(enedisInfrastructure)" name="Infra enedis" layer-type="overlay"
+        :geojson="enedisInfrastructure" :options="enedisInfrastructureGeoJsonOptions"
+        :options-style="enedisInfrastructureLineStyle" />
+
+      <l-geo-json v-if="isFeatureCollection(rteInfrastructure)" name="Infra RTE" layer-type="overlay"
+        :geojson="rteInfrastructure" :options="rteInfrastructureGeoJsonOptions"
+        :options-style="rteInfrastructureLineStyle" />
       <!-- <l-geo-json v-if="newGeoJSONObject" :geojson="newGeoJSONObject" /> -->
       <l-control-scale position="bottomright" />
       <l-control v-if="zoom < 10" class="leaflet-control" position="bottomright">
@@ -68,13 +76,15 @@ const createLayer: Ref<Layer |null> = ref(null)
 const mapReady : Ref<boolean> = ref(false)
 const opLineRef : Ref<typeof LGeoJson | null> = ref(null)
 const router = useRouter()
+const externalSourceDataZoomTreshold = 13
 // Stores
 const cableStore : StoreGeneric  = useCablesStore()
 const mortalityStore: StoreGeneric = useMortalityStore()
 const mapLayersStore : StoreGeneric = useMapLayersStore()
 const coordinatesStore : StoreGeneric = useCoordinatesStore()
 
 
+
 // Store values
 const {
   zoom,
@@ -83,15 +93,17 @@ const {
   selectedFeature,
   newGeoJSONObject,
   mortalityGetInfrastructure,
-  mortalityInfrastructure
+  mortalityInfrastructure,
 } = storeToRefs(coordinatesStore)
 const {
   infstrData,
   infstrDataLoadingStatus,
   pointData,
   operatedPointData,
   lineStringData,
-  operatedLineStringData
+  operatedLineStringData,
+  enedisInfrastructure,
+  rteInfrastructure,
 } = storeToRefs(cableStore)
 const {mortalityData} = storeToRefs(mortalityStore)
 const {baseLayers} = storeToRefs(mapLayersStore)
@@ -193,6 +205,12 @@ const infrastructureGeoJsonOptions : GeoJSONOptions = reactive({
   onEachFeature : infrastructureOnEachFeature,
 })
 
+const enedisInfrastructureGeoJsonOptions : GeoJSONOptions = reactive({
+})
+
+const rteInfrastructureGeoJsonOptions : GeoJSONOptions = reactive({
+})
+
 const operatedInfrastructureGeoJsonOptions : GeoJSONOptions = reactive({
   onEachFeature : infrastructureOnEachFeature,
 })
@@ -268,6 +286,27 @@ const selectedFeatureGeoJsonStyle = (_feature: Feature) => {
       // draggable: true,
     }
   }
+
+  const enedisInfrastructureLineStyle = (feature: Feature) => {
+    return  {
+      color:  "black",
+      opacity: 0.8,
+      weight: 2,
+      // draggable: true,
+      dashArray: '7, 3, 3, 3'
+    }
+  }
+
+  const rteInfrastructureLineStyle = (feature: Feature) => {
+    return  {
+      color:  "black",
+      opacity: 0.8,
+      weight: 2,
+      // draggable: true,
+      dashArray: '10, 10'
+    }
+  }
+
 const hookUpDraw = async () => {
   console.log(map.value)
   mapObject.value = map.value?.leafletObject;
@@ -405,6 +444,12 @@ const supportColor = (feature: Feature) => {
   return 'grey'
 }
 
+const reverseBBoxString = (bounds) => {
+  console.log(typeof bounds)
+  const coords : Array<number> = [bounds.getSouth(), bounds.getWest(), bounds.getNorth(), bounds.getEast()]
+  return coords.toString()
+}
+
 watch(bbox, (newVal, _oldVal) => {
   cableStore.cancelRequest();
   mortalityStore.cancelRequest();
@@ -418,6 +463,13 @@ watch(bbox, (newVal, _oldVal) => {
     infstrData.value = {}
     mortalityData.value= {} as FeatureCollection
   }
+  if (zoom.value >= externalSourceDataZoomTreshold) {
+    cableStore.getEnedisInfrastructure(reverseBBoxString(mapObject.value.getBounds()))
+    cableStore.getRteInfrastructure(reverseBBoxString(mapObject.value.getBounds()))
+  } else {
+    enedisInfrastructure.value = {} as FeatureCollection
+    rteInfrastructure.value = {} as FeatureCollection
+  }
 })
 
 onBeforeMount(async () => {
@@ -467,7 +519,6 @@ onBeforeMount(async () => {
   }
 
   deathCasesGeoJsonOptions.pointToLayer = (feature: Feature, latlng : LatLng ) => {
-    console.log('deathCasesGeoJsonOptions', feature, latlng)
       if(latlng){
         const iconDict : {[key: string]: string} = {
           COD_EL: 'lightning-bolt',
@@ -483,6 +534,34 @@ onBeforeMount(async () => {
         return leaflet.marker(latlng, {icon: deathCaseIcon});
       }
     }
+
+    enedisInfrastructureGeoJsonOptions.pointToLayer = (_feature: Feature, latlng : LatLng | null ) => {
+    if (latlng) {
+      return leaflet.circleMarker(latlng, {
+        radius: 3,
+        fillColor: "black",
+        color: 'black',
+        weight: 0.5,
+        opacity: 0.5,
+        fillOpacity: 0.8,
+        // draggable: true,
+      })
+    }
+  }
+
+  rteInfrastructureGeoJsonOptions.pointToLayer = (_feature: Feature, latlng : LatLng | null ) => {
+    if (latlng) {
+      return leaflet.circleMarker(latlng, {
+        radius: 4,
+        fillColor: "grey",
+        color: 'grey',
+        weight: 0.5,
+        opacity: 0.5,
+        fillOpacity: 0,
+        // draggable: true,
+      })
+    }
+  }
 })
 
 </script>

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "aviCable-frontend",
+  "name": "avicable-frontend",
   "version": "0.0.1",
   "description": "Overhead cables and birdlife - frontend",
   "author": "LPO AuRA <[email protected]>",

frontend/pages/test/mapref.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-container fill-height fluid>
+    <l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
+      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" :attribution="attribution" />
+      <l-geo-json ref="layer0" :geojson="geoJsonLayers[0]" :options="geoJsonOptions" @add="bringToFront()" />
+      <l-geo-json ref="layer1" :geojson="geoJsonLayers[1]" :options="geoJsonOptions" @add="bringToFront()" />
+      <l-geo-json ref="layer2" :geojson="geoJsonLayers[2]" :options="geoJsonOptions" @add="bringToFront()" />
+    </l-map>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { LMap, LTileLayer, LGeoJson } from "@vue-leaflet/vue-leaflet";
+import 'leaflet/dist/leaflet.css';
+
+// Map center and zoom level
+const layer1 = ref()
+const center = ref([51.505, -0.09]); // Common location
+const zoom = ref(13);
+const attribution = ref('&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors')
+
+// GeoJSON data for three layers
+const geoJsonLayers = ref([
+  {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: { name: 'Point A 1', color: 'red', size:3},
+        geometry: {
+          type: 'Point',
+          coordinates: [-0.09, 51.505], // Point 1
+        },
+      },
+    ],
+  },
+  {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: { name: 'Point B 2', color: 'green', size:5 },
+        geometry: {
+          type: 'Point',
+          coordinates: [-0.08, 51.506], // Point 2
+        },
+      },
+      {
+        type: 'Feature',
+        properties: { name: 'Point B 1', color: 'green', size:5  },
+        geometry: {
+          type: 'Point',
+          coordinates: [-0.09, 51.505], // Point 1
+        },
+      },
+    ],
+  },
+  {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: { name: 'Point C 3', color: 'blue', size:10  },
+        geometry: {
+          type: 'Point',
+          coordinates: [-0.07, 51.507], // Point 3
+        },
+      },
+      {
+        type: 'Feature',
+        properties: { name: 'Point C 2', color: 'blue', size:10 },
+        geometry: {
+          type: 'Point',
+          coordinates: [-0.08, 51.506], // Point 2
+        },
+      },
+    ],
+  },
+]);
+
+const bringToFront = () => {
+  layer1.value?.leafletObject?.bringToFront()
+  console.log(layer1.value?.leafletObject?.bringToFront())
+}
+
+// CircleMarker options
+const geoJsonOptions = {
+  pointToLayer: (feature, latlng) => {
+    console.log('feature', feature )
+    return L.circleMarker(latlng, {
+      radius: feature.properties.size,
+      fillColor: feature.properties.color,
+      color: '#000',
+      weight: 1,
+      opacity: 1,
+      fillOpacity: 0.8,
+    });
+  },
+};
+</script>
+
+<style scoped>
+/* Add any additional styles here */
+</style>