Vue2Leaflet Demo

by BaronGrivet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.js"></script>
<body>
  <div id="app">
      <div>
    <div style="height: 10%; overflow: auto;">
      <h3>Set Bounds</h3>
      Marker is placed at {{ marker.lat }}, {{ marker.lng }}, bounds are
      {{ bounds }}
      <br />
    </div>
    <l-map
      :zoom="zoom"
      :center="center"
      :bounds="bounds"
      :max-bounds="maxBounds"
      style="height: 90%"
    >
      <l-tile-layer :url="url" :attribution="attribution" />
      <l-marker :lat-lng="marker" />
    </l-map>
  </div>
  </div>
</body>

CSS

html, body, #app {
  height: 100%;
  margin: 0;
}

JavaScript

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

import { latLngBounds, latLng } from "leaflet";
export default {
  name: "SetBounds",
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      zoom: 13,
      center: [0, 0],
      bounds: latLngBounds([
        [40.70081290280357, -74.26963806152345],
        [40.82991732677597, -74.08716201782228]
      ]),
      maxBounds: latLngBounds([
        [40.70081290280357, -74.26963806152345],
        [40.82991732677597, -74.08716201782228]
      ]),
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: latLng(47.41322, -1.219482)
    };
  }
};