feat: support custom marker hex color

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## v0.3.4
+- Added: support for custom marker hex colors. A color picker is now available for the datalayer default marker color and for each per-value marker, so you can override the predefined marker colors with any custom hex value. Custom colors are applied inline on the map, while preset colors keep using their `marker-<name>` CSS classes.
+
 ## v0.3.3
 - Fixed: maps on the location and datalayer edit screens could stay grey / only load the top-left tile until the browser window was resized. Maps now recalculate their size via a ResizeObserver (and map.whenReady), so they render correctly on initial load and when becoming visible.
 - Fixed: addMarker() referenced an undefined `location` variable (the global window.location) for the marker colour/icon; colour and icon are now optional parameters with a sensible CSS default.

openkaarten-base.php

@@ -13,7 +13,7 @@
  * Plugin Name:       OpenKaarten Base
  * Plugin URI:        https://www.openwebconcept.nl
  * Description:       The OpenKaarten Base plugin.
- * Version:           0.3.3
+ * Version:           0.3.4
  * Author:            Acato
  * Author URI:        https://www.acato.nl
  * License:           EUPL-1.2
@@ -27,7 +27,7 @@
 	die;
 }
 
-define( 'OWC_OPENKAARTEN_BASE_VERSION', '0.3.3' );
+define( 'OWC_OPENKAARTEN_BASE_VERSION', '0.3.4' );
 
 if ( ! defined( 'OWC_OPENKAARTEN_BASE_ABSPATH' ) ) {
 	define( 'OWC_OPENKAARTEN_BASE_ABSPATH', plugin_dir_path( __FILE__ ) );

src/admin/class-cmb2.php

@@ -91,10 +91,11 @@ public static function cmb2_render_markerpreview_field_type( $field, $escaped_va
 			return;
 		}
 
-		$marker   = $markers[ $group_index ];
-		$color    = $marker['marker_color'];
-		$icon     = $marker['marker_icon'];
-		$icon_url = Locations::get_location_marker_url( $icon ) ? : '';
+		$marker      = $markers[ $group_index ];
+		$color_value = ! empty( $marker['marker_color_custom'] ) ? $marker['marker_color_custom'] : ( isset( $marker['marker_color'] ) ? $marker['marker_color'] : '' );
+		$color       = Datalayers::resolve_marker_color_hex( $color_value );
+		$icon        = $marker['marker_icon'];
+		$icon_url    = Locations::get_location_marker_url( $icon ) ? : '';
 
 		echo "<div class='leaflet-custom-icon'><div style='background-color:" . esc_attr( $color ) . ";' class='marker-pin'></div><span class='marker-icon'><img src='" . esc_attr( $icon_url ) . "' /></span></div>";
 	}

src/admin/class-datalayers.php

@@ -536,6 +536,72 @@ public static function get_marker_color_options() {
 		return apply_filters( 'openkaarten_marker_color_options', $default_colors );
 	}
 
+	/**
+	 * Returns an associative array mapping the predefined marker-color class
+	 * names to their hex color values.
+	 *
+	 * This mirrors get_marker_color_options() but provides the actual hex values,
+	 * so the color-picker swatches and any place that needs to render a preset
+	 * class as a real color can share a single source of truth.
+	 *
+	 * @return array Associative array of marker-color class names and their hex values.
+	 */
+	public static function get_marker_color_palette() {
+		$default_palette = [
+			'marker-black'       => '#000000',
+			'marker-blue'        => '#0072B2',
+			'marker-brown'       => '#A0522D',
+			'marker-darkgray'    => '#555555',
+			'marker-deep-purple' => '#4B0082',
+			'marker-gray'        => '#757575',
+			'marker-green'       => '#328725',
+			'marker-navy-blue'   => '#001D5F',
+			'marker-orange'      => '#F4801B',
+			'marker-purple'      => '#792487',
+			'marker-red'         => '#9F0000',
+			'marker-turquoise'   => '#3B7BA0',
+			'marker-yellow'      => '#7E7722',
+		];
+
+		return apply_filters( 'openkaarten_marker_color_palette', $default_palette );
+	}
+
+	/**
+	 * Check whether a value is a valid hex color (#rgb or #rrggbb).
+	 *
+	 * @param mixed $value The value to check.
+	 *
+	 * @return bool Whether the value is a hex color.
+	 */
+	public static function is_hex_color( $value ) {
+		return is_string( $value ) && 1 === preg_match( '/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/', $value );
+	}
+
+	/**
+	 * Resolve a stored marker-color value to a hex color.
+	 *
+	 * Accepts either a custom hex value (e.g. '#ff5733'), which is returned as-is,
+	 * or a predefined marker-color class name (e.g. 'marker-blue'), which is looked
+	 * up in the color palette. Returns an empty string when the value can't be resolved.
+	 *
+	 * @param string $value The stored marker-color value (hex or class name).
+	 *
+	 * @return string The resolved hex color, or an empty string.
+	 */
+	public static function resolve_marker_color_hex( $value ) {
+		if ( empty( $value ) ) {
+			return '';
+		}
+
+		if ( self::is_hex_color( $value ) ) {
+			return $value;
+		}
+
+		$palette = self::get_marker_color_palette();
+
+		return isset( $palette[ $value ] ) ? $palette[ $value ] : '';
+	}
+
 	/**
 	 * Customize the available marker color options for map markers.
 	 *
@@ -600,6 +666,22 @@ public static function add_markers_metaboxes() {
 			]
 		);
 
+		$cmb->add_field(
+			[
+				'name'       => __( 'Default custom marker color', 'openkaarten-base' ),
+				'desc'       => __( 'Optional. Pick a custom color to override the selected default marker color above.', 'openkaarten-base' ),
+				'id'         => 'default_marker_color_custom',
+				'type'       => 'colorpicker',
+				'attributes' => [
+					'data-colorpicker' => wp_json_encode(
+						[
+							'palettes' => array_values( self::get_marker_color_palette() ),
+						]
+					),
+				],
+			]
+		);
+
 		$cmb->add_field(
 			[
 				'name'       => __( 'Field to customize marker on', 'openkaarten-base' ),
@@ -659,6 +741,23 @@ public static function add_markers_metaboxes() {
 			]
 		);
 
+		$cmb->add_group_field(
+			$group_field_id,
+			[
+				'name'       => __( 'Custom marker color', 'openkaarten-base' ),
+				'desc'       => __( 'Optional. Pick a custom color to override the selected marker color above.', 'openkaarten-base' ),
+				'id'         => 'marker_color_custom',
+				'type'       => 'colorpicker',
+				'attributes' => [
+					'data-colorpicker' => wp_json_encode(
+						[
+							'palettes' => array_values( self::get_marker_color_palette() ),
+						]
+					),
+				],
+			]
+		);
+
 		$cmb->add_group_field(
 			$group_field_id,
 			[

src/admin/class-locations.php

@@ -272,8 +272,9 @@ public static function get_location_marker( $datalayer_id, $location_id = false,
 		$marker_field = get_post_meta( $datalayer_id, 'marker_field', true );
 		$markers      = get_post_meta( $datalayer_id, 'markers', true );
 
-		$color = get_post_meta( $datalayer_id, 'default_marker_color', true );
-		$icon  = get_post_meta( $datalayer_id, 'default_marker_icon', true );
+		$default_custom_color = get_post_meta( $datalayer_id, 'default_marker_color_custom', true );
+		$color                = ! empty( $default_custom_color ) ? $default_custom_color : get_post_meta( $datalayer_id, 'default_marker_color', true );
+		$icon                 = get_post_meta( $datalayer_id, 'default_marker_icon', true );
 
 		$datalayer_url_type = get_post_meta( $datalayer_id, 'datalayer_url_type', true ) ? : 'import';
 
@@ -302,7 +303,9 @@ public static function get_location_marker( $datalayer_id, $location_id = false,
 				}
 
 				if ( isset( $marker_data['field_value'] ) && $location_marker_field === $marker_data['field_value'] ) {
-					if ( ! empty( $marker_data['marker_color'] ) ) {
+					if ( ! empty( $marker_data['marker_color_custom'] ) ) {
+						$color = $marker_data['marker_color_custom'];
+					} elseif ( ! empty( $marker_data['marker_color'] ) ) {
 						$color = $marker_data['marker_color'];
 					}
 					if ( ! empty( $marker_data['marker_icon'] ) ) {

src/scripts/openstreetmap-base.js

@@ -63,8 +63,13 @@ function initializeMap() {
       const geojsonData = location.feature;
       const content = location.content;
 
-      // Create a custom marker icon with the location color and icon.
-      let customIconHtml = "<div class='marker-pin " + location.color + "'></div>";
+      // Create a custom marker icon with the location color and icon. A custom
+      // color is stored as a hex value and applied inline; a preset color is a
+      // "marker-<name>" class that the stylesheet maps to a hex.
+      const isHexColor = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test( location.color || "" );
+      let customIconHtml = isHexColor
+        ? "<div class='marker-pin' style='background-color:" + location.color + "'></div>"
+        : "<div class='marker-pin " + location.color + "'></div>";
       if (location.icon) {
         customIconHtml += "<span class='marker-icon'><img src='" + location.icon + "'  alt='marker icon' /></span>";
       }