Change color of leaflet map

问题

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?

回答1:

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.

回答2:

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

check this :

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

回答3:

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/

来源：https://stackoverflow.com/questions/60428521/change-color-of-leaflet-map