How to add own edited map tiles into my webpage

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.