CODEWITHSUNDEEP
openlayersopenstreetmapopenlayers-3
PolGraphic
PolGraphic

Reputation: 3364

Changing the appearance of tiles in OpenLayers (that are using OSM maps)

I want to use OSM maps and I decided to work with OpenLayers.

I've seen the example: http://openlayers.org/dev/examples/osm.html

I'am able to get the result like:

enter image description here

But I would like my map to look more like this one:

enter image description here

I mean the style, colors and details, NOT the controls (I know how to add own controls, markers etc.).

I would like to make changes like: make the background green, buildings in the other shade of grey with 1px black outline, remove yellow colour from main streets, hide the train rails & parking places and so on.

How to achieve it? All of that changes has to be made with stylizing the OSM map, and cannot be done in "post processing" (like e.g. changing the whole map to greyscale can be done after getting the map).

My sample code (that is based on one of OpenLayers example):

var map;
function init() {

// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: 'img/marker.png',
        graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
        title: '${tooltip}'
    })
});

// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point(19.41166, 51.75047)
    .transform('EPSG:4326', 'EPSG:3857');

// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
    new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);

// A popup with some information about our location
var popup = new OpenLayers.Popup.FramedCloud("Popup", 
    myLocation.getBounds().getCenterLonLat(), null,
    '<a target="_blank" href="http://openlayers.org/">We</a> ' +
    'could be here.<br>Or elsewhere.', null,
    true // <-- true if we want a close (X) button, false otherwise
);

//alert(myLocation.getBounds().getCenterLonLat());

 var      layer = new OpenLayers.Layer.OSM();

// Finally we create the map
map = new OpenLayers.Map({
    div: "map", projection: "EPSG:3857",
    layers: [layer, overlay],
    center: myLocation.getBounds().getCenterLonLat(), zoom: 18
});
// and add the popup to it.
map.addPopup(popup);
}

Upvotes: 1

Views: 3269

Answers (2)

Jose G&#243;mez
Jose G&#243;mez

Reputation: 3224

In addition to Grmpfhmbl's response, for more custom styles without the need of your own tile server, you can also use Google's styled maps, via ol3-google-maps.

Upvotes: 1

Grmpfhmbl
Grmpfhmbl

Reputation: 1147

Your second example uses a different tileset, than the first one. The tiles are from Mapbox - see attribution of the example. If you want to use these tiles, you have to setup a Mapbox-Account and use the Tile-URLs with your API-Key provided by Mapbox.

Afaik there's no way to style tiles with something like CSS. Just in case you were looking for something like that. Tiles are pre-rendered images delivered by a server.

If you are not happy with any tile sets you find on the internet, you can always go the length and render you own tiles out of the OSM data, set up your own tile server and go from there... but that's a whole different story.

Upvotes: 4

Related Questions