[Vuejs]-How to import a GeoJson file in vue.js 2 component in leaflet

by

1👍

Try to assign this.geojson before mounting and load the file with the fetch method.

async created () {
  const jsonFile = await fetch('../components/provinces.json')
  this.geojson = await jsonFile.json()
}

This example is available in Vue Leaflet documentation.

https://vue2-leaflet.netlify.app/components/LGeoJson.html#demo

👤Bruno Cardoso

0👍

So I still couldn’t find a solution to import the GeoJson file using vue2-leaflet package , but I was able to import the file using the code below:

    <template>
      <div class="container">
        <div id="mapContainer">      
        </div>
      </div>
    </template>

    <script> 
    import "leaflet/dist/leaflet.css";
    import L from "leaflet";
    import geojson from "../components/provinces.json"
    
    export default{
      name: "locationMap",
      data() {
        return{
          center: [32.87255939010237, 53.781741816799745],
        }
      },

    methods: {

    setupLeafletMap: function () {
      const mapDiv = L.map("mapContainer").setView(this.center, 5);
      L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          // maxZoom: 18,
        }
      ).addTo(mapDiv);

          var myStyle = {
            "fillColor": "#818181",
            "color": "black",
            "weight": 2,
            "opacity": 0.65,
            "fillOpacity": 0.6
          };
    
        L.geoJSON(geojson,{
         style: myStyle,
        }
       }
      }
    mounted() {
        this.setupLeafletMap()
        console.log(mockData.colors[1].id)
      },
    }
    
  

    </script>
👤Mehrnaz ghaffar

Leave a comment