javascript - 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);
}

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 pletely) but which classes are responsible for countries color and water?

Share Improve this question asked Feb 27, 2020 at 7:50 user122222 2,4296 gold badges46 silver badges88 bronze badges

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 Commented Feb 27, 2020 at 9:16

Add a ment |

3 Answers 3

Sorted by: Reset to default 7

You add a color overlay to the leaflet tiles with filter

f.e.

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

Example: https://jsfiddle/falkedesign/bxqoyt0z/

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./mapbox-gl-js/v0.48.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox./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/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: '&copy; <a href="http://osm/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./[email protected]/dist/leaflet.css" crossorigin=""/>
    <script src="https://unpkg./[email protected]/dist/leaflet.js"crossorigin=""></script>
      
       <div id='map'></div>
      <script type="text/javascript" src="https://leafletjs./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

Hope this will helps you.

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

check this :

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change color of leaflet map - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)