「旬の名産をわかるようにした①」 わたしのWebサービス開発日記 #25

<template>
  <div>
    <div style="height:90vh; margin: 0 25px;">
      <l-map ref="map" :zoom="zoom" :use-global-leaflet="false" :center="mapCenter" @click="putMarker">
・・・【諸々省略】・・・
        <l-geo-json v-if="isSeasonChecked" :geojson="geojsonData"></l-geo-json>
      </l-map>
    </div>
  </div>
</template>

  data() {
    return {
・・・【諸々省略】・・・
      geojsonData: null, 
      selectedFeature: null,
      defaultStyle: {
        color: '#3388ff',
        weight: 2,
        opacity: 1,
        fillOpacity: 0.2,
      },
      highlightStyle: {
        color: '#ff7800',
        weight: 5,
        opacity: 1,
        fillOpacity: 0.7,
      },
    };

・・・【諸々省略】・・・

  methods: {
・・・【諸々省略】・・・
    async loadGeoJSON() {
      try {
        const response = await fetch('/japan.geojson');
        console.log(response);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        this.geojsonData = await response.json();
      } catch (error) {
        console.error('Error loading GeoJSON:', error);
      }
    },

    onEachFeature(feature, layer) {
      layer.on({
        click: (e) => {
          this.selectedFeature = feature;
          const map = this.$refs.map.mapObject;
          if (map) {
            map.fitBounds(e.target.getBounds());
          }
          layer.bindPopup(`<h3>${feature.properties.name_local}★まだ工事中</h3><p>詳細情報</p>`).openPopup();
        },
        mouseover: (e) => {
          e.target.setStyle(this.highlightStyle);
        },
        mouseout: (e) => {
          e.target.setStyle(this.defaultStyle);
        },
      });
    },

  },