Popup in Leafleat in Nuxt with GeoJson

Question

I have a nuxt 3 site. I've added a leaflet map that displays the polygons of a geojson. I'd like to display a popup on each of the polygons. The popup would display information from the geojson. I can't get the popup to work.

Thanks !

<script setup>
  const url = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  const attribution = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
  const zoom= ref(6)
  const center = [47.313220, -1.319482]
  const datageo = ref(undefined)
  onMounted(async () => {
  const response = await fetch(
      "data/merged.geojson"
    );
    datageo.value = await response.json();
  });

  const geoStyler = (feature) => {
    const etat = feature.properties["Etat de la"]
    if (etat === "V") {
      return {
        color: "#F23030",
        fillColor: "#F23030",
        stroke: true
      }
    } else if (etat === "C") {
      return {
        color: "#267365",
        fillColor: "#267365",
        stroke: true
      }
    } else if (etat === "S") {
      return {
        color: "#F29F05",
        fillColor: "#F29F05",
        stroke: true
      }
    } else {
      return {
        color: "gray",
        fillColor: "gray",
        stroke: true
      }
    }
  }

  const getPopup = (feature) => { 
      const etat = feature.properties["Etat de la"]
      return "truc"
  }

</script>

<style>
  body {
    margin: 0;
  }
</style>

<template>
  <div style="height:100vh; width:100vh">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="center"
    >
      <LTileLayer
        :url="url"
        :attribution="attribution"
        layer-type="base"
        name="OpenStreetMap"
      />
      <LGeoJson 
        :geojson="datageo"
        :options-style="geoStyler">
        <LPopup
          :content="getPopup">
        </LPopup>
      </LGeoJson>
    </LMap>
  </div>
</template>

I've tried using plain text and it works. But I can't manage to capture the info for each polygon.

Answer 1

1. Update getPopupContent function so it will take a feature as a parameter so it will extract the information from the properties object.

2. Use LPopup directry with LGeoJson

<script setup>
  import { ref, onMounted } from 'vue';

  const url = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
  const attribution = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
  const zoom = ref(6);
  const center = [47.313220, -1.319482];
  const datageo = ref(undefined);

  onMounted(async () => {
    const response = await fetch('data/merged.geojson');
    datageo.value = await response.json();
  });

  const geoStyler = (feature) => {
    const etat = feature.properties["Etat de la"];
    if (etat === "V") {
      return {
        color: "#F23030",
        fillColor: "#F23030",
        stroke: true
      };
    } else if (etat === "C") {
      return {
        color: "#267365",
        fillColor: "#267365",
        stroke: true
      };
    } else if (etat === "S") {
      return {
        color: "#F29F05",
        fillColor: "#F29F05",
        stroke: true
      };
    } else {
      return {
        color: "gray",
        fillColor: "gray",
        stroke: true
      };
    }
  };

  const getPopupContent = (feature) => {
    const etat = feature.properties["Etat de la"];
    return `Etat: ${etat}`;
  };
</script>

<style>
  body {
    margin: 0;
  }
</style>

<template>
  <div style="height: 100vh; width: 100vh">
    <LMap
      ref="map"
      :zoom="zoom"
      :center="center"
    >
      <LTileLayer
        :url="url"
        :attribution="attribution"
        layer-type="base"
        name="OpenStreetMap"
      />
      <LGeoJson 
        :geojson="datageo"
        :options-style="geoStyler"
      >
        <LPopup :content="getPopupContent" />
      </LGeoJson>
    </LMap>
  </div>
</template>