CODEWITHSUNDEEP
vue.jsvuejs2leafletopenstreetmapvue2leaflet
rexbrandy
rexbrandy

Reputation: 155

Vue2-leaflet LMap/LTileLayer not rendering correctly

I'm just trying to add a map to my current Vue2 learning project. After looking at google maps I've decided OSM and Leaflet was the best way to go. But I've ran into an early snag and the map is currently just rendering as a blue square.

This is what my map looks like at the moment.

enter image description here

Here is the Vue component. Both url and url2 are displaying the same thing, I'm not sure if this is an issue with access tokens or if I'm using the wrong URL for OSM.

<template>
  <v-container>
    <h1>Hello</h1>
    <l-map :zoom="zoom" :center="center" style="height: 500px; width: 100%">
      <l-tile-layer :url="url" :attribution="attribution"/>
    </l-map>
  </v-container>
</template>

<script>
import { LMap, LTileLayer } from 'vue2-leaflet';

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      url2: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      // eslint-disable-line
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      center: [33.8688, 151.2093],
      zoom: 12,
    };
  },
  components: {
    LMap,
    LTileLayer,
  },
};
</script>

Upvotes: 2

Views: 710

Answers (1)

ghybs
ghybs

Reputation: 53185

Looks to me as expected behaviour, given the fact that the coordinates you specify ([33.8688, 151.2093]) point at the Pacific ocean way off Japan:

at specified coordinates zoom 4

https://www.openstreetmap.org/#map=4/33.60/151.31

And since you specify a high initial zoom (12), panning around still gets you blue ocean tiles.

Upvotes: 1

Related Questions