vue leaflet

index.html

<div id="app">
  
  <div class='sidebar'>
    <div class='heading'>
      <h1>Our locations</h1>
    </div>
    
    <div>
      <select v-model="selectedTileSet" @change="setTileSet(selectedTileSet)">
        <option v-for="tileset in tileSets" :value="tileset.tileLayer">{{tileset.name}}</option>
      </select>
    </div>
    <div class="listings" id="listings">
      <div class="item" v-for="marker in markers">
        <a class='title'  @click="markerFunction(marker.options.title)">{{marker.options.title}}
        </a>
      </div>
    </div>
  </div>
  <div id="map" class="map"></div>
</div>

script.js

new Vue({
  el: '#app',
  data:{
    map: null,
    markers: [],
    markerClusters: null,
    selectedTileSet: 'http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
    tileSets: [
      {
        name: 'Streets ',
        tileLayer: 'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
      },
      {
        name: 'Hybrid',
        tileLayer: 'http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
      },
      {
        name: 'Satellite',
        tileLayer: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}'
      },
      {
        name: 'Terrain',
        tileLayer: 'http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}'
      },
      {
        name: 'Terrain Stamen',
        tileLayer: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
      }
    ],
    userLocation: null
  },
  mounted(){
    var vm = this
    vm.markerClusters = L.markerClusterGroup();
    vm.map = L.map( 'map', {
      center: [10.0, 5.0],
      minZoom: 2,
      zoom: 2
    })
    vm.setTileSet(vm.selectedTileSet)
    vm.getGoogleData();
    navigator.geolocation.getCurrentPosition(vm.displayLocation)
  },
  methods:{
    displayLocation(position) {
      var vm = this;
      console.log('position', position);
      var lat = position.coords.latitude;
      var lng = position.coords.longitude;
      L.marker([lat, lng]).addTo(vm.map);
      vm.map.setView([lat, lng], 16);
      vm.userLocation = new L.LatLng(lat,lng);
      return {'longitude': lng, 'latitude':lat}; 
    },
    setTileSet(selectedTileLayer){
      var vm = this;
      var basemap = L.tileLayer(selectedTileLayer,{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
      });
      if (vm.map.hasLayer(basemap)) {
        vm.map.removeLayer(basemap);
      }
      else{
        vm.map.addLayer(basemap);
      }
    },
  markerFunction(id) {
    var vm = this
    for (var i in vm.markers) {
      var markerID = vm.markers[i].options.title;
      var position = vm.markers[i].getLatLng();
      if (markerID == id) {
        vm.map.setView(position, 15);
        vm.markers[i].openPopup();
      };
    }
  },
  createPolyLine(floraLocation, userLocation){
    /* var latlongs = [loc1, loc2];
    var polyline = new L.Polyline(latlongs, {
    color: 'green',
    opacity: 1,
    weight: 1,
    clickable: false
    }).addTo(map); */

    //distance
    return 'About ' + (floraLocation.distanceTo(userLocation) / 1000).toFixed(0) + 'km away from you.</p>';
  },
  getGoogleData:function(){
    var vm = this
    var spreadsheetID = '1ctHA5UmH9ZmrXugYFe_DHBOr9wJHRYkHCHim8nh1Tg8';
    var worksheetID = 'od6';
    var url = 'https://spreadsheets.google.com/feeds/list/'+spreadsheetID+'/'+worksheetID+'/public/values?alt=json';
    axios.get(url)
      .then(function (response) {
      _.forEach(response.data.feed.entry, function(val, i) {
        var floralocation = new L.LatLng(val.gsx$lat.$t, val.gsx$lng.$t);
        var userDistance = vm.createPolyLine(floralocation, vm.userLocation);
        var markerX = L.marker([val.gsx$lat.$t, val.gsx$lng.$t], {title: "marker_"+ i}).bindPopup(userDistance + '<h2>' + val.gsx$markertitle.$t + '</h2>' + val.gsx$markercontent.$t + '<img src="'+ val.gsx$markerimage.$t + '" />');
        vm.markerClusters.addLayer( markerX );
        vm.markers.push(markerX);
        vm.map.addLayer( vm.markerClusters )
      });
    })
      .catch(function (error) {
      console.log(error);
    });
  },
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>

style.css

* { box-sizing: border-box; }

body {
  color: #404040;
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
  font-smoothing: antialiased;
}

h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 400;
}
a {
  color: #404040;
  text-decoration: none;
}
a:hover { color: #101010; }

.sidebar {
  position: absolute;
  width: 33.3333%;
  height: 100%;
  top: 0; left: 0;
  overflow: hidden;
  border-right: 1px solid rgba(0,0,0,0.25);
}

.pad2 { padding: 20px; }
.quiet { color:#888; }

.map {
  position: absolute;
  left: 33.3333%;
  width: 66.6666%;
  top: 0; bottom: 0;
}

.heading {
  background: #fff;
  border-bottom: 1px solid #eee;
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
}

.listings {
  height: 100%;
  overflow: auto;
  padding-bottom: 60px;
}

.listings .item {
  display: block;
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-decoration: none;
}

.listings .item:last-child { border-bottom: none; }

.listings .item .title {
  display: block;
  color: #00853e;
  font-weight: 700;
}

.listings .item .title small { font-weight: 400; }
.listings .item.active .title,
.listings .item .title:hover { color: #8cc63f; }
.listings .item.active { background-color: #f8f8f8; }

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-left: 0;
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: #00853e;
  border-radius: 0;
}

.clearfix { display: block; }
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.leaflet-tile{ 
transform: scale(0);
}
.leaflet-tile.leaflet-tile-loaded{
  transform: scale(1);
  transition: .6s transform ease-in;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css" rel="stylesheet" />

vue-leaflet.markdown

vue leaflet

A Pen by Edward Lance Lorilla on CodePen.

License.