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?

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.

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.