Is it possible to redesign OpenStreetMap tiles?

Question

We have an application working with OpenLayers and are using OpenStreetmap for the map tiles, however they don't look great.

Is there anyway to style these maps?

I read something about Mapbox but it uses Leaflet API, however we use OpenLayers and our app is heavily using it. What options do I have?

Answer 1

MapBox doesn't require you to use the MapBox.js API - you can use your customized tiles with OpenLayers easily by using OpenLayers.Layer.XYZ.

Answer 2

You will have to host the openstreet map data on your own server and generate your styled tiles yourself. Look at Mapnik for tiling. MapBox could be a solution that is hosted in the cloud, but it is not free to use (but you can have limited free use and storage).

Answer 3

you can use prepared styles or create your own in cloudmade, this service offers 500K tiles free per month.

Answer 4

Once you have managed to store the OSM data in a local Postgis database, you are free to style your map as you want using Mapnik. Here is a list of available services with different styles:

http://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services

For a start-off, you can also use Maperitive. You can style your map easily on the screen, and let the software create the tiles for openlayers: http://ksmapper.blogspot.de/2011/08/simple-openstreetmap-tile-rendering.html

Answer 5

You can use Mapbox tiles. just create a layer and add it to map.

var mapbox = new OpenLayers.Layer.XYZ(
                "MapBox",
                [
                    "http://a.tiles.mapbox.com/v3/[mapid]/${z}/${x}/${y}.png",
                    "http://b.tiles.mapbox.com/v3/[mapid]/${z}/${x}/${y}.png",
                    "http://c.tiles.mapbox.com/v3/[mapid]/${z}/${x}/${y}.png",
                    "http://d.tiles.mapbox.com/v3/[mapid]/${z}/${x}/${y}.png"
                ], {
                    attribution: "Tiles &copy; <a href='http://mapbox.com/'>MapBox</a>",
                    sphericalMercator: true,
                    wrapDateLine: false,
                    // numZoomLevels: 5,
                    isBaseLayer:true
                }
            );
            map.addLayer(mapbox);