Polygons fillOpacity support (synced with legend)

- `style`: `fillOpacity` now works for polygons mode, like expected
- `fillOpacity` (L.Path option, between 0 and 1) of polygons is now synced both to map features and legend to keep symbols true-to-map. Default is 0.7 in contrast to L.Path default of 0.2 (since we are creating a thematic map here and with polygons we currently only have fill color to operate with and distinguish, the color should be clearly distinguishable).
- css: `i` elements of class `legend` no longer define opacity (to allow usage and to reflect `fillOpacity`, see previous point).
- fixed sorting of manually defined class boundaries in manual classification mode
- updated documentation
- examples:
-- all: swapped the now-defunct URL of public Stamen Toner tiles with CARTO Dark, CARTO Voyager and CARTO Positron - great background maps for overlaid thematic data.
-- all: made layerControl uncollapsed by default.
-- lines_c dataset: compressed geojson even more to save space/bandwidth and make loading faster

README.md

@@ -83,6 +83,7 @@ const layer = L.dataClassification(data, {
         fillColor: 'purple',    // marker fill color in point/size mode
         color: '#aabbcc',       // line stroke color in line/width mode
         weight: 5,              // line stroke weight in line/color mode
+        fillOpacity: 0.7,       // polygon fill opacity in polygon mode
     }
 }.addTo(map);
 ```
@@ -109,6 +110,10 @@ const layer = L.dataClassification(data, {
 - `style <object>`: custom styling
     - `color <string>`: line stroke color, use only in width mode (default: blue, the L.path default)
     - `weight <float>`: line stroke weight, use only in color mode (default: 3, the L.path default)
+#### Specific for Polygon features
+- `style <object>`: custom styling
+    - `fillOpacity <float>`: polygon fill opacity, use only polygon mode (default: 0.7)
+
 #### General options
 - `colorRamp <string>`: color ramp to use for symbology. Based on ColorBrewer2 color ramps (https://colorbrewer2.org/), included in Chroma.js. Custom colors (`colorCustom`) override this. (default: 'PuRd')
 - `colorCustom <array<string>>`: custom color ramp defined as an array, colors in formats supported by Chroma.js, with opacity support. A minimum of two colors are required. If defined, custom colors override `colorRamp`. Example: ['rgba(210,255,178,1)', '#fec44f', 'f95f0eff']. Examples for yellow in different color formats: '#ffff00', 'ffff00', '#ff0', 'yellow', '#ffff0055', 'rgba(255,255,0,0.35)', 'hsla(58,100%,50%,0.6)', chroma('yellow').alpha(0.5). For more formats, see: https://gka.github.io/chroma.js/. For an interactive color palette helper, see: https://gka.github.io/palettes/.

examples/combined.html

@@ -47,19 +47,37 @@
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright" target="_blank">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
 			var map = L.map('map', {layers: [OSM]}).setView([0,0], 3); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
 			map.createPane('front');
 			map.getPane('front').style.zIndex = 450;
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Point features example. Attribute to test with: 'population'
 			fetch('data/us-state-capitals.geojson').then(r => r.json()).then(d => {

examples/lines_c.html

@@ -21,7 +21,7 @@
 				height: 100%;
 				margin: 0;
 				font-family: 'Open Sans', 'OpenSans-Local';
-				font-style: normal;				
+				font-style: normal;	
 			}
 
 			#map {
@@ -31,30 +31,51 @@
 				bottom: 0;
 				left: 0;
 				right: 0;
-			}						
+			}
+
+			/* Overriding Chrome's built-in CSS rules to avoid focus rectangle on clicking polygons on a Leaflet map */
+			path.leaflet-interactive:focus {
+				outline: none;
+			}
 		</style>
 	</head>
 	<body>		
-		<div id="map"></div>				
+		<div id="map"></div>
 		<script>
-
 
 			// base maps
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-				opacity: 0.5,
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright" target="_blank">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
 			var map = L.map('map', {layers: [OSM]}); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Point features example. Attribute to test with: 'samplenumber'
 			fetch('data/lines_c_wsdot_aadt.geojson').then(r => r.json()).then(d => {

examples/lines_w.html

@@ -21,7 +21,7 @@
 				height: 100%;
 				margin: 0;
 				font-family: 'Open Sans', 'OpenSans-Local';
-				font-style: normal;				
+				font-style: normal;	
 			}
 
 			#map {
@@ -31,28 +31,51 @@
 				bottom: 0;
 				left: 0;
 				right: 0;
-			}						
+			}
+
+			/* Overriding Chrome's built-in CSS rules to avoid focus rectangle on clicking polygons on a Leaflet map */
+			path.leaflet-interactive:focus {
+				outline: none;
+			}
 		</style>
 	</head>
 	<body>		
-		<div id="map"></div>				
+		<div id="map"></div>
 		<script>
 
 			// base maps
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright" target="_blank">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
 			var map = L.map('map', {layers: [OSM]}).setView([0,0], 3); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Line features example. Attribute to test with: 'Shape_Leng'
 			fetch('data/rivers.geojson').then(r => r.json()).then(d => {

examples/points_c.html

@@ -38,22 +38,39 @@
 		<div id="map"></div>				
 		<script>
 
-
 			// base maps
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
 			var map = L.map('map', {layers: [OSM]}); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Point features example. Attribute to test with: 'samplenumber'
 			fetch('data/points_gas.geojson').then(r => r.json()).then(d => {

examples/points_s.html

@@ -38,22 +38,39 @@
 		<div id="map"></div>				
 		<script>
 
-
 			// base maps
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
 			var map = L.map('map', {layers: [OSM]}); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Point features example. Attribute to test with: 'samplenumber'
 			fetch('data/points_lux_pop_osm.geojson').then(r => r.json()).then(d => {

examples/polygons.html

@@ -43,22 +43,39 @@
 		<div id="map"></div>				
 		<script>
 
-
 			// base maps
 			var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
 			});
-			var stamen_toner = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				attribution: 'Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright" target="_blank">ODbL</a>.'
+			var carto_attrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+			var cartodb_dark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_voyager = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
+			});
+			var cartodb_positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}' + (L.Browser.retina ? '@2x.png' : '.png'), {
+				attribution: carto_attrib,
+				subdomains: 'abcd',
+				maxZoom: 20,
+				minZoom: 0
 			});
 			var baseMaps = {
 				"OpenStreetMap": OSM,
-				"Stamen Toner": stamen_toner
+				"CARTO Dark": cartodb_dark,
+				"CARTO Voyager": cartodb_voyager,
+				"CARTO Positron": cartodb_positron
 			};
 			// map div object, main Leaflet object:
-			var map = L.map('map', {layers: [OSM]}); 
+			var map = L.map('map', {layers: [cartodb_voyager]}); 
 			map.attributionControl.setPrefix('<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet ' + L.version + '</a>');
-			var layerControl = L.control.layers(baseMaps).addTo(map);
+			var layerControl = L.control.layers(baseMaps, null, {collapsed: false}).addTo(map);
 
 			// Point features example. Attribute to test with: 'samplenumber'
 			fetch('data/polygons_nz_regions.geojson').then(r => r.json()).then(d => {

leaflet-dataclassification.css

@@ -15,7 +15,6 @@
     height: 18px;
     float: left;
     margin-right: 8px;
-    opacity: 0.7;
 }
 .legendDataRow {
     display: flex;