Search code examples
vue.jsleafletvue2leaflet

Adding a polygon to vue2-leaflet

I've been trying to add a MultiPolygon to a leaflet map using vue2-leaflet to no avail. I'm generating the polygon coordinates from PostGIS.

How can one add a polygon to a vue2leaflet map?

Representative code:

fiddle: https://jsfiddle.net/brj703my/2/

<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker"></l-marker>
      <l-polygon :lat-lngs="coordinates"></l-polygon>
    </l-map>
  </div>
</body>

Vue:

var { LMap, LTileLayer, LMarker, LPolygon } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker, LPolygon},
  data() {
    return {
      zoom:13,
      center: L.latLng(41.789465, -87.599621),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(41.789465, -87.599621),
      coordinates: [[[-87.60491109933375,41.79042784175226],[-87.59918340932317,41.79371959572518],[-87.59075097680761,41.79048715413015],[-87.59556382744151,41.78233118716912],[-87.60940574496703,41.780581226351444],[-87.61095699434492,41.79063543483471],[-87.60491109933375,41.79042784175226]]]
    }
  }
});
Solution

  • Looks like your coordinates value contain reverse (lng-lat) pairs (possibly a copy paste from GeoJSON), whereas Leaflet expects them in (lat-lng) order.