I have a website with a working map using leaflet and open street map. I now would like to make this work on my pc offline so I can show people, without needing an internet connection. I am only showing a small section of the world and the user doesn't need to move much.

My code for loading the map tile is as follows:

var openStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 14, maxZoom: 20 });

I suspect want something like the following - but if there's an easier way to load the map offline let me know!

var openStreetMap = L.tileLayer('http://{s}.localhost/{z}/{x}/{y}.png', { minZoom: 14, maxZoom: 20 });

asked 02 Oct '13, 02:14

JohnH's gravatar image

JohnH
36113
accept rate: 0%

closed 22 May, 10:34

Richard's gravatar image

Richard ♦
27.6k40245368

The question has been closed for the following reason "Closed to prevent questions from help vampires" by Richard 22 May, 10:34


This works even without a local webserver. Just use an URL like

file:///home/jonh/openstreetmap/{z}/{x}/{y}.png

given that your files are located under /home/jonh/openstreetmap/. You can also download a specific area using Marble and directly access its offline cache, e.g. with the URL

file:///home/jonh/.local/share/marble/maps/earth/openstreetmap/{z}/{x}/{y}.png

But keep the tile usage policy in mind when downloading tiles for an area.

permanent link

answered 02 Oct '13, 06:25

scai's gravatar image

scai ♦
31.2k18281436
accept rate: 23%

3

If you want to produce tiles for a small area, you could use Maperitive for that.

(02 Oct '13, 06:44) Frederik Ramm ♦
1

Marble is the easiest way, just zoom into the area and it will cache the tiles, One could also download a section and load it up in JOSM, Merkaartor or even load the .osm file in Marble.

(03 Oct '13, 14:41) redsteakraw
1

Thanks guys, it's working for me - I had to change the leaflet script as per here also 'http://stackoverflow.com/questions/18695623/leaflet-gmapcatcher-change-zxy-template'. GMapCapture put the files into C:\Users\username.GMapCatcher\tiles and I included them in a folder in my web apps images directory.

(04 Oct '13, 03:23) JohnH

Hi. I have this url L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', how can change it and use it for local. And use map Offlien.

(29 Oct '15, 12:52) Developer7
1

Which part of my answer is unclear to you?

(29 Oct '15, 14:38) scai ♦

Does this very old example help?

https://github.com/SomeoneElseOSM/OSMembedded/blob/master/Scripts/leaflet_embed.js

Please don't use that other than as an example (at least not without updating Leaflet). There are surely better ways to do "offline maps" now though (canned vector offerings from Mapbox is one possibility).

(29 Oct '15, 15:11) SomeoneElse ♦

My code is this L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', when i try to change it for loacly and use map in offline mod it not works,maybe i take wrong phat?

(30 Oct '15, 09:42) Developer7
1

We can't know without you providing more details. You could also check your browser's developer console. And ideally ask a new question about your issue.

(30 Oct '15, 20:24) scai ♦

i cant solve my problem. can you make video from this tutorial? i need that. plz help me

(22 May, 08:42) mr jacki chan
showing 5 of 9 show 4 more comments

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×230
×95

question asked: 02 Oct '13, 02:14

question was seen: 22,019 times

last updated: 22 May, 10:34

powered by OSQA