All geek questions in one place

Inverted line card

I am loading a few snippets from OpenStreetMap (for testing purposes only). Then I use the fantastic javascript Leaflet structure to view the interactive map, but when I open the browser, I see the horizontal (Y) fragments of the images in inverted order. What is the problem here? Am I doing something wrong?

Here is my code (simple enough):

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="css/core.css" /> <link rel="stylesheet" href="css/leaflet.css" /> <script src="js/leaflet.js"></script> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([-23.13, -82.38], 14); L.tileLayer('tiles/{z}/{x}/{y}.png', { minZoom: 12, maxZoom: 16, attribution: 'SampleMap', tms: true }).addTo(map); </script> </body> </html>

And this image turned out (note that the lines are upside down). Expected result - line 1,2,3 and shown 3,2,1:

Tiles showed with leaflet

Any help was appreciated.

+4
source share
1 answer

The problem persists when I use http://tile.osm.org/{z}/{x}/{y}.png , so I store tiles correctly. I only solve the problem by leaving the tms: true , I read a lot of guides that use it to handle offline maps. Expect this to help someone else.

+5
source

Source: https://habr.com/ru/post/1483049/

More articles:


All Articles