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

29
9

OpenStreetMap has some wonderful data, but I don't think the map style is appropriate for my website / application. Can I render my own maps and change the style to adapt it more for my purpose?

asked 12 Jul '10, 17:46

apmon's gravatar image

apmon
6.5k184456
accept rate: 20%


29

First of all, I would really consider using some pre-made map tiles as there are many offered for free and it saves you sigificant effort. There are for example the:

and probably many more (some of them commercial), offering you different styles that you can relatively easy integrate into your website.

You can do a lot of customization even with those pre-made maps (see below). Rendering your own maps is always quite some effort. You need to set up a renderer, retrieve the relevant data, render the tiles, put them on a webhost (the number of files quickly adds up to the thousands and millions) and repeat all that every few weeks to keep your maps updated.

Just, make sure you honor the respective terms of service for the tile service you use. Cloudmade offers a custom style editor which you might want to try out if you want to customize things.

The next level of customization is running your own openlayers (OL) slippymap installation which let's you offer cool things like POI overlays, colored paths and areas (OL example), added markers (OL example) and/or images on a map based on an input files or an RSS feed and many more things. Here is a real world example, showing all smoking and non-smoking restaurants in Germany, all without installing your own renderer and mucking with cartographic stylesheets... Have a look at the openlayers and slippymap pages in the osm wiki, and also make sure to explore the openlayers example page to get a glimpse of what is possible and snatch the code you want from there (you'll find the code for the above examples there too). Openlayers is the most common and in my view the most convenient solution, but the wiki page "Deploying your own Slippymap" lists a couple of alternative solutions.

That having said there are many renderers that you can use in order to create your own maps. Which one is the right one for you depends on many things. Do you need vector graphics (.svg) or .png files? Do you need one big map or 256x256 pixel tiles? Do you need to render them on-demand or do you want pre-made images? Do you need to render it once, or do you want to rerender with updated map-data frequently? Here are the commonly used ones:

  • Osmarender: Converts an .osm file into an .svg file using a stylesheet in custom .xml format.
  • Or/p: is an osmarender drop-in replacement that is faster (written in perl).
  • Mapnik: Full blown mapnik install is probably NOT what you want to do when all you need is some nice maps as its set up involves pulling the .osm data in a postgis database and rendering from there. However, it is the fastest and most advanced solution out there in case you need frequent re-renderings or if you want to really do advanced things.

Less commonly used, but being designed for easy setup and usage are:

  • Ceyx is an osm parser and MapCSS renderer. (UPDATE: it is unmaintained since 2010 and I don't think it can be used for much beyond small scale experimentation. Feel free to remove any mention of crux from this list.)(DISCLAIMER: I am the author of Ceyx, so forgive me this shameless advertisement :-)). MapCSS is the stylesheet language used by Potlatch2 to describe the look of a map and if you ever worked with HTML, you will quickly feel at home there. MapCSS is designed to be easy to customize. All it needs is python>=2.5, python-cairo and pygtk (for pango/pangocairo) installed. Please refer to its wiki page for more information (note that it works just fine but is currently in maintenance mode, looking for contributors.). Another python-based mapcss renderer that I can recommend is is Kothic.
  • Something that I find personally very cool, is Kothic_JS which does client-side rendering of map tiles and which seems to work reasonably well, if you are not on a mobile device.
  • Maperitive, an application written in mono to: render and print maps, as well as for setting up a local tile map server. It is the successor of Kosmos.

If that selection is not enough for you, you can see even more rendering software at the OSM 'Renderer' wiki page.

permanent link
This answer is marked "community wiki".

answered 14 Jul '10, 19:48

spaetz's gravatar image

spaetz
85381622
accept rate: 28%

edited 15 Oct '17, 16:59

I wish I had discovered Ceyx earlier! It's exactly what I needed, easy to use, no need for database, reliable, easy to customise (thanks to mapcss), open source... thank you for your work on it!

(20 Jun '11, 06:15) otto
1

Glad you like Ceyx, it is a small and nice piece, I think. Do note however, that I don't render maps for myself anymore, and basically stopped putting effort into Ceyx at the moment. I would be glad if someone else wants to pick up the torch.

(20 Jun '11, 08:03) spaetz

I can't program stuff like this, I'm afraid. But I'll post more about what I did with Ceyx, it's related to http://help.openstreetmap.org/questions/4496/how-to-create-fantasyimaginary-maps-with-openstreetmap Maybe it could interest some fantasy cartographers to work further on Ceyx...

(21 Jun '11, 00:14) otto
1

Motivated by someone liking it, I just implemented limited support for street names on curved paths. I think it is an improvement, let me know if you have CSS tweaks that you would like to see in mainline.

(21 Jun '11, 21:38) spaetz
14

Of course you can. Actually there are many different option to do it. You can either render a static map image with one of the renderers listed below, your you can use a map where you can zoom and pan around. This option is called a slippy map. The most option to realize a slippy is map is openlayers. You can find documentation on the use of openlayers to display maps derived from OpenStreetMap data at wiki.openstreetmap.org/wiki/Openlayers.

However openlayers needs rendered map images (called tiles) so lets come back to the topic of renderers. There are many different renderers available for OSM data. A (probably incomplete) list can be found at wiki.openstreetmap.org/wiki/Rendering.

The most common renderer if you want to generate tiles is mapnik. Documentation can be found at wiki.openstreetmap.org/wiki/Mapnik. It is quite fast and produces a nice looking map. This renderer is used to feed the main slippy map at www.openstreetmap.org. Setting up a server running mapnik and feeding the tiles to openlayers can be quite a bit or work though.

Another popular renderer is osmarender. Unlike mapnik it does not directly generate PNG images but generates SVG images which need to be rasterized using inkscape or batik. This is the renderer used by the tiles@home project. It is not as fast as mapnik (and some say not as good looking) but it is somewhat easier to set up and run, especially if you want to implement a custom style or only need a single image.

There are many other different renderers and I would probably be good if you ask this question again with a bit more details on what you exactly want in you map.

permanent link

answered 12 Jul '10, 18:01

petschge's gravatar image

petschge
8.3k217398
accept rate: 21%

Maperitive can render tiles. It works on OSM files though, so if you need a world-wide map, then you need a DB-based solution like Mapnik. On the other hand, setting up Maperitive is much easier. So it's more a question of what exactly your needs are.

I've made a sample hiking Web map made with Maperitive (warning: the server is slow).

permanent link

answered 14 Jul '10, 19:25

Breki's gravatar image

Breki
2.0k51843
accept rate: 10%

edited 27 Jun '11, 21:54

I´ve used the Maperitive to convert my .OSM to .SVG file and it worked fine. I edited some colors on the map (colors of highways and lands) and I placed icons and imagens to attend my need. Now, what can I do with the edited .SVG file? I want to host my map like you did in your example. I´ve seen that exists MapBox but it ask for MBTiles and I just have the .SVG file that I already mencioned. What is my next step?

(25 Jul '12, 17:17) Gilliard Lopes

Since this question was asked, this site has been created which is intended to summarise the "setting up a tile server" options, if that's the road that you want to go down. It doesn't (yet) describe style editing in detail, though.

permanent link

answered 05 Mar '12, 11:13

SomeoneElse's gravatar image

SomeoneElse ♦
36.9k71370866
accept rate: 16%

The simplest way to do this would be to use Cloudmade's Style Editor. This provides a fair amount of flexability with the styling -- certainly enough to theme it to your website.

Check out some examples at the gallery.

permanent link

answered 12 Jul '10, 17:59

Matt%20Williams's gravatar image

Matt Williams
37979
accept rate: 10%

2

When using the services offered by Cloudmade on their website, you are subject to their Terms of Use, which are more restrictive than the legal requirements of other, usually open-source licensed, OSM rendering solutions.

(14 Jul '10, 20:41) Tordanik
2

Cloudmade's style editor allows only for some changes (colours of elements that are rendered according to the cloudmade stylesheet, zoom levels when they appear (but limited to high zooms), limited selection of evaluated tags), but doesn't allow for complete unlimited control (WHAT is displayed, WHEN is it displayed, HOW (icons, line style, layer order) it is displayed).

(11 Mar '11, 13:51) dieterdreist

Dependent on what you intend by "maps for my website" besides the already mentioned renderers like Mapnik and Maperitive you might also have a look at mapservers. There is the

Both are free and open and there are tools available to convert community stylesheets from OSM into the SLD-format to begin.

permanent link

answered 01 Mar '11, 12:34

dieterdreist's gravatar image

dieterdreist
3.7k113567
accept rate: 3%

You can also use TileMill to create custom maps using OpenStreetMap data. TileMill uses the Mapnik renderer (the same one the OpenStreetMap website uses), and you can export the XML stylesheets it generates.

There's also a Quickstart Guide for creating an OSM based map available as well as an Intro course.

Disclosure: I work for MapBox

permanent link

answered 14 Aug '12, 10:20

kkaefer's gravatar image

kkaefer
5613
accept rate: 0%

wish they had a video tutorial

(06 Apr '14, 06:19) joshua robison
2

suggest googling youtube & tilemill

(06 Apr '14, 08:00) SK53 ♦

After selecting the right map tiles (Raster tiles are served as images for example, so they require less processing power and memory to render) , I'd start by making sure I'd have the following Maps SDK components - glyphs - fonts used for rendering vector maps - images - images used by widgets, POI icons, etc. - sprites - images used for rendering vector maps TomTom offers Maps SDK for Web,Android and iOS that should help you with this: https://developer.tomtom.com/products/maps-sdk

permanent link

answered 16 Jun '19, 21:30

Tiago's gravatar image

Tiago
12
accept rate: 0%

-1

Use TopoMapCreator:

ExtendedMapCreator is a Desktop-Program, that creates "Topographic Maps" from OSM, NASA and ESA. You simply define a map extent by dragging over a browsable word map, click on start and wait till the GeoTIFF, ECW, GALILEO, ORUXMAPS or NAVIMAP files got created. ExtendedMapCreator is based on the Mapnik-Renderer, nevertheless all data downloading and processing is fully automatic. Click on ExtendedMapCreator to read more about the Program!

permanent link

answered 01 Nov '14, 10:11

kaki007's gravatar image

kaki007
(suspended)
accept rate: 0%

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:

×535
×440
×123

question asked: 12 Jul '10, 17:46

question was seen: 108,866 times

last updated: 16 Jun '19, 21:30

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