1

I want to change color of the map in leafletjs but I just can't figure out which class it is. I found 

.leaflet-container {
    background-color:rgba(255,0,0,0.0);
}

however it only changes the color outside the map (you see it when map is zoomed out completely) but which classes are responsible for countries color and water?

user122222
  • 2,179
  • 4
  • 35
  • 78
  • Raster tiles are generated by the tile source you're using - OSM, or whatever. You'll need to find an alternative map theme from your tile provider. – peeebeee Feb 27 '20 at 09:16

3 Answers3

5

You add a color overlay to the leaflet tiles with filter

f.e.

.leaflet-tile {
    filter: hue-rotate(45deg) !important;
}

Example: https://jsfiddle.net/falkedesign/bxqoyt0z/

Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • it also changes markers color which is not expected behaviour – user122222 Feb 27 '20 at 10:51
  • Look into the example. Marker color not changed – Falke Design Feb 27 '20 at 11:09
  • 1
    This is a brilliant answer. One can also target `.leaflet-tile-pane`. @user122222 it *can* change the marker's color, when they're added to the `tiles-pane` and not `markers-pane`, I suppose (which is incorrect for most use cases). – entio Sep 07 '21 at 08:59
3

Yes, you can change the color of map tiles. With Mapbox Studio you can design interactive maps. Also you can set any/single/multiple language for all the countries. Please look it here You can check example here and here

Mapbox Example 

 mapboxgl.accessToken = 'pk.eyJ1IjoiY2hya2kiLCJhIjoid0ZoNy1SZyJ9.X5fpB3ORT1-BSWItzx3Xbw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-68.13734351262877, 45.137451890638886],
        zoom: 5
    });

    map.on('load', function() {
        map.addSource('maine', {
            'type': 'geojson',
            'data': {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [-67.13734351262877, 45.137451890638886],
                            [-66.96466, 44.8097],
                            [-68.03252, 44.3252],
                            [-69.06, 43.98],
                            [-70.11617, 43.68405],
                            [-70.64573401557249, 43.090083319667144],
                            [-70.75102474636725, 43.08003225358635],
                            [-70.79761105007827, 43.21973948828747],
                            [-70.98176001655037, 43.36789581966826],
                            [-70.94416541205806, 43.46633942318431],
                            [-71.08482, 45.3052400000002],
                            [-70.6600225491012, 45.46022288673396],
                            [-70.30495378282376, 45.914794623389355],
                            [-70.00014034695016, 46.69317088478567],
                            [-69.23708614772835, 47.44777598732787],
                            [-68.90478084987546, 47.184794623394396],
                            [-68.23430497910454, 47.35462921812177],
                            [-67.79035274928509, 47.066248887716995],
                            [-67.79141211614706, 45.702585354182816],
                            [-67.13734351262877, 45.137451890638886]
                        ]
                    ]
                }
            }
        });
        map.addLayer({
            'id': 'maine',
            'type': 'fill',
            'source': 'maine',
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8
            }
        });
    });
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.48.0/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>

Leaflet Example

var map = L.map('map').setView([37.8, -96], 4);

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);




 // get color depending on population density value
 function getColor(d) {
  return d > 1000 ? '#800026' :
    d > 500  ? '#BD0026' :
    d > 200  ? '#E31A1C' :
    d > 100  ? '#FC4E2A' :
    d > 50   ? '#FD8D3C' :
    d > 20   ? '#FEB24C' :
    d > 10   ? '#FED976' :
       '#FFEDA0';
 }

 function style(feature) {
  return {
   weight: 2,
   opacity: 1,
   color: 'white',
   dashArray: '3',
   fillOpacity: 0.7,
   fillColor: getColor(feature.properties.density)
  };
 }

 
 var geojson;

    // Set style function that sets fill color property
function style(feature) {
    return {
        fillColor: '#004691', 
        fillOpacity: 0.5,  
        weight: 1,
        opacity: 1,
        color: '#424a44',
        dashArray: '1'
    };
}
 
 

 geojson = L.geoJson(statesData, {
  style: style,
 }).addTo(map);
#map {
         width: 600px;
         height: 400px;
         }
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"crossorigin=""></script>
      
       <div id='map'></div>
      <script type="text/javascript" src="https://leafletjs.com/examples/choropleth/us-states.js"></script>

Also there are many other map tile providers(free and paid) available.

I'm adding some references here:

Link and Demo

Link and Demo

Link and Demo

Hope this will helps you.

Rahul Mahadik
  • 11,668
  • 6
  • 41
  • 54
2

You can't change color of map in css, try to use layers,

check this :

https://leaflet-extras.github.io/leaflet-providers/preview/

Soukaina EL HAYOUNI
  • 331
  • 4
  • 18
  • Is it possible to change language of these layers or are they by default? I don't want all countries to be named in their native language, I'd rather stay with english titles only but doesn't seem it can be changed – user122222 Feb 27 '20 at 10:21
  • @user122222 check this https://stackoverflow.com/a/18997626/9183949 – Soukaina EL HAYOUNI Feb 27 '20 at 10:40