0

Why is the tile layer not showing while using a basemap from ArcGIS based service e.g. https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer

Link to fiddle

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
el: '#app',
    components: { LMap, LTileLayer, LMarker },
    data() {
      return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      //URL BELOW NOT WORKING
      url:'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer', //NOT WORKING
      //URL BELOW WORKING
      //url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //WORKING 
      attribution:'&copy; <a href="http://osm.org   /copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
   }
   }
});
john gravois
  • 392
  • 2
  • 8
  • Besides the fact that you provide a static URL instead of a template (i.e. the URL lacks something like `{z}/{x}/{y}`), the description on that page seems to indicate that it is not a raster tile source, but rather a query service. – ghybs Jun 20 '18 at 02:07
  • I don't think the service you're pointing to is a tile server. – peeebeee Jun 20 '18 at 07:20
  • Maybe let me rephrase my question and ask how I can get Vue2Leaflet to work as demonstrated in this fiddle that works using pure leaflet.js http://jsfiddle.net/e9kh6war/ @ghybs – Obirieni Simeo Jun 20 '18 at 11:54
  • Feel free to _edit_ your question. However make sure you do not salvage it, especially once there are some answers. Otherwise feel free to open a new question. – ghybs Jun 20 '18 at 12:19
  • That example uses the esri-leaflet( https://github.com/Esri/esri-leaflet) plugin - very brief research suggests it's not supported by `Vue2Leaflet`. – peeebeee Jun 20 '18 at 12:22

2 Answers2

0

I was able to get a workaround as shown in this fiddle http://jsfiddle.net/oskgfxpz/

HTML

     <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>

JAVASCRIPT

var { LMap, LTileLayer, LGeoJson, LMarker, LPopup } = Vue2Leaflet;

new Vue({
  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);

 }
});
0

As @ghyps points out, there is an option to pass the /{z}/{x}/{y}; from the documentation:

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;
    
new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:5,
      center: L.latLng(47.413220, -1.219482),
      url:'https://uneplivemapservices.unep.org/arcgis/rest/services/UNBASEMAP_Tiled/MapServer/tile/{z}/{y}/{x}', //NOT WORKING
      //url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png', //WORKING 
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
    }
  }
});

But apparently tiles with zoomlevel > 5 are not available

Sebastian
  • 1,321
  • 9
  • 21
Joost Döbken
  • 3,450
  • 2
  • 35
  • 79