Vue2Leaflet and leaflet plugin integration - Javascript Leaflet

Javascript examples for Leaflet:Plugin

  1. HOME
  2. Javascript
  3. Leaflet
  4. Plugin

Description

Vue2Leaflet and leaflet plugin integration

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Vue2Leaflet and esri-leaflet</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script> 
      <script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Vue2Leaflet/1.0.2/vue2-leaflet.min.js"></script> 
      <script type="text/javascript">
    $(window).on('load', function() {
var { LMap, LTileLayer, LGeoJson, LMarker, LPopup } = Vue2Leaflet;
new Vue({/*from w  w  w  .java  2  s  .  c  o  m*/
  el: '#app',
  components: {
    LMap,
    LTileLayer,
    LGeoJson,
    LMarker,
    LPopup
  },
  data () {
    return {
    }
  },
  mounted() {
    const UNbaseMap = L.esri.tiledMapLayer({
      url: 'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer',
      maxZoom: 5,
      minZoom: 2
      });
    this.$refs.map.mapObject.addLayer(UNbaseMap);
  }
});
    });

      </script> 
   </head> 
   <body>  
      <div id="app"> 
         <div> 
            <l-map style="height:400px;background-color: rgb(123, 173, 223);" ref="map" :zoom="2" :center="[0.02, 36.9]"> 
               <l-marker :key="2" :lat-lng="[0.02, 36.9]"> 
                  <l-popup :content="'Example tooltip'"></l-popup> 
               </l-marker> 
            </l-map> 
         </div> 
      </div>   
   </body>
</html>

Related Tutorials