Vue2leaflet: Tiles misplaced

Created on 1 May 2020  路  3Comments  路  Source: vue-leaflet/Vue2Leaflet

Description

The tiles are misplaced (according to the screenshot)

image

I used exactly this code: https://vue2-leaflet.netlify.app/components/LTileLayer.html#demo

Live Demo

None

Steps to Reproduce

Copy the past from the guide.

Expected Results

Correctly placed tiles

Actual Results

Incorrectly placed tiles

Browsers Affected

  • [ ] Chrome
  • [x] Firefox
  • [x] Edge
  • [ ] Safari 9
  • [ ] Safari 8
  • [ ] IE 11

Versions

  • Leaflet: v1.6.0
  • Vue: v2.6.11
  • Vue2Leaflet: v2.5.2
picture mnboos

Most helpful comment

I had the same issue, the problem was that I was trying to import the leaflet.css in my public/index.html using the tilde prefix (referring to the NPM package)

<link rel="stylesheet" href="~leaflet/dist/leaflet.css">

but this convention only works from inside a Vue component. Moving it to the