feat: complete separation of addLayer and addFeature and many fixes and renames

Author: vvvyyynet

README.md

@@ -30,6 +30,8 @@ import { makeDraggableWithClone } from 'vvvyyynet_utils_maplibre';
 - **Fill-Pattern:** Unfortunately, the `fill-pattern` property cannot be unset. Either set it to the id of a registered image (could be completely transparent...), or remove the line. This is sort of a restriction for a standalone-wrapper-function that does not do the wrapping part... //! SOLVE THIS!
 - **LineDashArray and Glow:** Since line-dasharray is in units of line-width it will affect the glow differently leading to two unsynced dashed lines. To compensate for this, all values of glow.lineDashArray property must be set inversely proportional.
 
+**LineGlow:** Available for lines and contourlines. In addition to the `line-blur` property, you can set a different color. Internally, a second layer is drawn with a pre-/postfixed layerId. The glow must be slightly wider than the line. You can either provide a `lineWidth` or a multiplication factor (`lineWidthGlowFactor`). Note that the latter not work, if the lineWidth defaults to the maplibregl-fallback linewidth (wich would be very tiny anyways), since the multiplication is handled inside the wrapper but not forwarded to maplibregl...
+
 ### Shared features
 
 ### Features for clone-dragging
@@ -48,8 +50,11 @@ import { makeDraggableWithClone } from 'vvvyyynet_utils_maplibre';
 - fix: move imports of CAPITALISED GLOBALS like FEATURES etc. to function arguments
 - fix: improve the checks and fallbacks inside addLayer for the various nested stylings
 - refactor: consider moving points_style inside style alltogether
+- fix: copy lineCap of Glow from regular line
 
 ### Features
+- feat: unset-all inside force
+- feat: unset specific inside force (e.g. fillPattern or iconImage)
 - feat: appart from 'circle'... are there any other maplibregl-default icons?
 
 ### Chore and Refactor

index.js

@@ -23,7 +23,8 @@ import { registerSVG } from './utils/registerSVG';
 //----------------------------------------------
 // Add Features
 import { addFeatureCollection } from './utils/addFeatureCollection'; //! NEW
-import { addLayer } from './utils/addLayer';
+import { addFeature } from './utils/addFeature'; //!NEW
+import { addLayer } from './utils/addLayer'; //!NEW
 
 //----------------------------------------------
 // Add Georeferenced Images to Map
@@ -67,9 +68,10 @@ export {
 	drawTestPoints,
 	drawTestLines,
 	addFeatureCollection,
+	addFeature,
+	addLayer,
 	addFeatureGroupsFromDB,
 	addStaticFeatures,
-	addLayer,
 	consoleLogAllLayers,
 	getMapPosition,
 	loadBasemaps,

test/DEFAULT_STYLES.js

@@ -17,10 +17,10 @@ export const styleset = {
 			circleStrokeWidth: 1
 		},
 		// ICON
-		icon: {
-			hasIconBackdrop: false,
+		symbol: {
+			hasBackdropCircle: false,
 			// BACKDROP CIRCLE
-			backdrop: {
+			backdropCircle: {
 				// Paint properties
 				setInvisible: false,
 				circleRadius: 18,

test/test_addFeatures.js

@@ -1,36 +1,30 @@
-import { addFeatures } from 'vvvyyynet_utils_maplibre/utils/addFeatureCollection';
-import {styleset} from './DEFAULT_STYLES';
+import { addFeatureCollection } from '../utils/addFeatureCollection';
+import { styleset } from './DEFAULT_STYLES';
 
 console.log('dStyles: ', styleset);
 
 export function test_addFeatures(map) {
 	const FeatColl = {
 		type: 'FeatureCollection',
 		features: [
-
-      // A Point
+			// A Point
 			{
 				type: 'Feature',
 				geometry: { type: 'Point', coordinates: [7.042569, 46.881066] },
 				properties: {
 					id: '49f56x10831cs7p',
 					name: 'Römisches Amphitheater Aventicum',
-					style: {
-						circleColor: 'red',
-						points: {
-							type: 'icon',
-							icon: { iconImage: 'butterfly' }
-						}
-					}
+					temperature: 100,
+					style: {}
 				}
 			},
-
-      // A Line
+			// A Line
 			{
 				type: 'Feature',
 				properties: {
 					id: 'feature-1',
 					name: 'Connecting Lines',
+					myLineWidth: 20,
 					style: {}
 				},
 				geometry: {
@@ -42,22 +36,22 @@ export function test_addFeatures(map) {
 					]
 				}
 			},
-      // Two more Points
+			// Two more Points
 			{
 				type: 'Feature',
 				geometry: { type: 'Point', coordinates: [8.7933439, 46.1678596] },
-				properties: { id: 'feature-2', name: 'Castello Visconteo' }
+				properties: { id: 'feature-2', name: 'Castello Visconteo', temperature: 20 }
 			},
 			{
 				type: 'Feature',
 				geometry: { type: 'Point', coordinates: [6.9762993, 46.3150334] },
-				properties: { id: 'feature-3', name: "Château d'Aigle" }
+				properties: { id: 'feature-3', name: "Château d'Aigle", temperature: 10 }
 			},
 
-      // Polygon
+			// Polygon
 			{
 				type: 'Feature',
-				properties: { id: 'feature-4' },
+				properties: { id: 'feature-4', mycolor: 'purple' },
 				geometry: {
 					type: 'Polygon',
 					coordinates: [
@@ -80,45 +74,45 @@ export function test_addFeatures(map) {
 	};
 
 	// Add Features
-	addFeatures(map, FeatColl, {
+	let idCollector;
+	({ map: map, idCollector: idCollector } = addFeatureCollection(map, FeatColl, {
 		id: 'test',
 		// sortByTypesArray: ['lines', 'points', 'polygons'],
 		// allowDirectAccess: true,
 		manualStyleset: {
 			force: {
-        points: {
-          type: 'circle',
-          circle: {
-            circleRadius: 16,
-            circleColor: 'lightblue'
-          }
-        },
-        lines: {
-          lineDashArray: [4,4],
-          lineWidth: 10,
-          lineCap: 'round',
-          lineJoin: 'round',
-          hasGlow: true,
-          glow: { lineWidthGlowFactor: 2, lineBlur: 5, lineColor: 'red', lineDashArray: [2,2] }
-        },
-        polygons: {
-
-        }
-      },
-      points: {
-
-      },
-      lines: {
-        lineColor: 'blue',
-      },
-			polygons: {
-				lineWidth: 5,
-				lineColor: 'green',
-				fillColor: 'green',
-				hasGlow: true,
-				glow: { lineWidthGlowFactor: 5, lineBlur: 5 }
+				points: {
+					type: 'circle',
+					circle: {
+						circleRadius: 25,
+						circleColor: ['rgb', ['get', 'temperature'], 0, ['-', 100, ['get', 'temperature']]]
+					}
+				},
+				lines: {
+					lineDashArray: [4, 4],
+					lineCap: 'round',
+					lineJoin: 'round',
+					lineColor: 'black',
+					hasGlow: true,
+					lineWidth: ['interpolate', ['linear'], ['zoom'], 0, 20, 10, 5, 20, 900],
+					glow: {
+						lineWidthGlowFactor: 1.6,
+						lineColor: 'red',
+						lineCap: 'round',
+						lineBlur: 5,
+						lineDashArray: [2, 2]
+					}
+				},
+				polygons: {
+					fillColor: ['coalesce', ['string', ['get', 'mycolor']], ['rgb', 255, 200, 0]]
+				}
 			},
-		},
-    defaultStyleset: styleset
-	});
+			points: {},
+			lines: {},
+			polygons: {}
+		}
+		// defaultStyleset: styleset
+	}));
+
+	console.log(idCollector);
 }