I am using ol3 with default OSM map. Is there any way to customize the look of the map. I need to change the color of roads. Currently its a rose color. Is there any attribute to change the color of the roads, hide the number on the roads etc

enter image description here

My code is:

var OSMlayer = new ol.layer.Tile({
        source: new ol.source.OSM()

    map = new ol.Map({
        layers: [OSMlayer],
        target: 'map',            
        view: new ol.View({
            center: [0, 0],
            zoom: 2

Not easily. What you see there are OSM Tiles, small images that are sent by the server. The tiles are created off-line from the OSM vector data and a style specification - this is a time-consuming process, which is why it is done off-line and the rendered tiles are then used for the map background.

You have some possible solutions:

  1. Install and set up Mapnik, download OSM vector data for your region of interest, define a new style specification, and then render a whole set of tiles in the style you want. If this is the whole world, at all zoom levels, you'll need quite a bit of storage...

  2. Get a vector dataset of roads and load it as a geoJSON (or whatever) layer in OL3 and then style it however you want. Will probably need some tweaking and will overlay annotations on the base map if you aren't careful.

  3. Try another basemap provider that looks more like the aesthetic you want - Google, Stamen, Bing Maps, Mapbox - and others - are available.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.