How to Customize Leaflet Map CSS

Question

I'd like to change the style of my leaflet map. I'd like to make it look more like google maps default theme. Are there different css files that be referenced to style the map differently? Is there a theme repository anywhere?

Removable

Do you want the map itself to change, as per the answers below, or do you want the page elements to change, such as the zoom controls and the popup colors? – Micaelamicah

Answer 1

There is a plugin for Leaflet that has a whole bunch of different basemap tile sets available. It's called leaflet-providers. Some of them are really good.

There's another plugin through which you can get Google, Bing, and Yandex's tile sets (though not Google's customizable ones).

Finally, you can make your own custom tile set through Cloudmade and load it in Leaflet. The first 500,000 tiles (each month) are free, but if you need more than that, you'll have to pay. In the basic Leaflet tutorial, they have the line:

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

You would modify the url with the details given in Cloudmade after you create your custom tile set.

Merwyn

looks like cloudmade does not provide the free option anymore. – Rasberry

Answer 2

Leaflet is only library for displaying various maps. You probably use map from OpenStreetMap project, but if you want to create own map style you need to use specialized software like Mapbox's TileMill, set up database, download raw data, etc.

Anyway, current rendering of OSM map is written in CartoCSS, you can find Github repo here.

You can find various map renderings ready to use on OpenStreetMap wiki.

Gladiate

The question was obviously only about appearing. He just want use OSM with Leaflet, but make it look like it is google maps. – Equilibrate

Answer 3

You can also use Mapbox Studio to style your maps-they can be used/worked in conjunction with Leaflet

Wheelhouse