This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

How to add own edited map tiles into my webpage

1

Hello!

I edited a map by drawing roads using JOSM and created the map tiles with Maperitive. Now, I have to add this map into my web site and allow navigation using the edited map.

Where do I start and what are the applications I need to do this?

Thank you in advance!

asked 21 May '19, 05:52

Feruses's gravatar image

Feruses
15224
accept rate: 0%

I just noticed that you mentioned "allow navigation" in your question. Did you mean turn-by-turn navigations for cars (or other vehicles) by that? I responded based on the assumption that you were just interested in an interactive online map. Can you clarify?

(21 May '19, 21:56) Tordanik

One Answer:

2

There are conventions for slippy map tilenames, specifically:

  • Tiles are 256 × 256 pixel PNG files
  • Each zoom level is a directory, each column is a subdirectory, and each tile in that column is a file
  • Filename (or url) format is /zoom/x/y.png

Do the tiles you created with Maperitive follow these? If yes, there are only two more things you need to do:

  1. Move all the tiles to a webserver. Verify that the server allows you to view the individual tiles in a web browser, and to embed them as images in your website.
  2. Add a JavaScript library for maps, such as Leaflet, to the source code of your website. Have a look at the tutorials for using the library. There usually is some location in the code that calls the library where you can specify which URL the tiles come from. Point that URL to the webserver you set up in step 1. (With Leaflet, you probably want a TileLayer.)

That's it, your map should work now!


Notes:

  • The above assumes that your website is essentially some HTML you wrote yourself. If you're using a CMS or a framework, there may be specific instructions for embedding maps into it. See this list, for example.

answered 21 May '19, 21:37

Tordanik's gravatar image

Tordanik
12.0k15106147
accept rate: 35%

Source code available on GitHub .