NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

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

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.
permanent link

answered 21 May '19, 21:37

Tordanik's gravatar image

Tordanik
12.0k15106147
accept rate: 35%

Your answer
toggle preview

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:

×362
×204
×111
×50
×48

question asked: 21 May '19, 05:52

question was seen: 2,242 times

last updated: 21 May '19, 21:56

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum