F map marker color config

Summary

Minimal enhancement to make the marker colors configurable (for the entities on the map) as requested per caosdb/customers/leibniz-zmt/management#127

Focus

Leaflet has a particular data structure (DivIcon_options) for the configuration of the map markers. We just use that and read it out from the config.

Test Environment

Use a normal map.json configuration and merge it with

{
    "entityLayers": {
        "current_page_entities": {
            "icon_options": {
                "html": "<i class=\"bi-geo-alt-fill\"  style=\"font-size: 20px; color: teal;\"></i>"
            }
        },
        "all_map_entities": {
            "icon_options": {
                "html": "<i class=\"bi-geo-alt-fill\"  style=\"font-size: 20px; color: brown;\"></i>"
            }
        }
    }
}  

You should now see the icons in brown and teal, instead of red and blue.

Check List for the Author

Please, prepare your MR for a review. Be sure to write a summary and a focus and create gitlab comments for the reviewer. They should guide the reviewer through the changes, explain your changes and also point out open questions. For further good practices have a look at our review guidelines

• All automated tests pass
• Reference related issues
• Up-to-date CHANGELOG.md (or not necessary)
• Annotations in code (Gitlab comments)
  • Intent of new code
  • Problems with old code
  • Why this implementation?

Check List for the Reviewer

• I understand the intent of this MR
• All automated tests pass
• Up-to-date CHANGELOG.md (or not necessary)
• The test environment setup works and the intended behavior is reproducible in the test environment
• In-code documentation and comments are up-to-date.
• Check: Are there specifications? Are they satisfied?

For further good practices have a look at our review guidelines.

src/core/js/ext_map.js

@@ -25,7 +25,7 @@
 
 /**
  * @module caosdb_map
- * @version 0.4.1
+ * @version 0.5.0
  *
  * For displaying a geographical map which shows entities at their associated
  * geolocation.
@@ -43,7 +43,7 @@
 var caosdb_map = new function () {
 
     var logger = log.getLogger("caosdb_map");
-    this.version = "0.4.1";
+    this.version = "0.5.0";
     this.dependencies = ["log", {
         "L": ["latlngGraticule", "Proj"]
     }, "navbar", "caosdb_utils"];
@@ -76,6 +76,8 @@ var caosdb_map = new function () {
      * @property {DataModelConfig} datamodel - the data model for the
      *     display of entities in the map (also used by the query generator).
      * @property {SelectConfig} select - config for the query generator.
+     * @property {Object.<string, EntityLayerConfig>} entityLayers -
+     *     configuration for the entity layer which are to be shown on the map.
      */
 
     /**
@@ -382,14 +384,23 @@ var caosdb_map = new function () {
      */
 
     /**
+     * Configuration of the entity layers which are to be shown on the map.
+     *
      * @typedef {object} EntityLayerConfig
-     * @property {string} id
-     * @property {string} name
-     * @property {string} description
-     * @property {DivIcon_options} icon_options
+     * @property {string} id - the id of the entity layer which is used
+     *     internally.
+     * @property {string} name - a short name which is shown in the entity
+     *     layers menu.
+     * @property {string} description - a short description which is shown as
+     *     hover-over text in the entity layers menu.
+     * @property {DivIcon_options} icon_tions - leaflet options for the icon
+     *     (aka the marker) which is shown on the map. These options are
+     *     espcially useful to style the icons (color etc).
      * @property {number} zIndexOffset
-     * @property {mapEntityGetter} get_entities
-     * @property {mapEntityPopupGenerator} make_popup
+     * @property {mapEntityGetter} get_entities - returns the entities which
+     *     are to be shown on the map.
+     * @property {mapEntityPopupGenerator} make_popup - returns the popup which
+     *     is to be shown when a user clicks on the map marker.
      */
 
     /**
@@ -647,13 +658,13 @@ var caosdb_map = new function () {
      * "all_map_entities" which shows all entities in the database with
      * coordinates.
      *
-     * @type {EntityLayerConfig[]}
+     * @type {Object.<string, EntityLayerConfig>}
      */
     this._default_entity_layer_config = {
         "current_page_entities": {
             "name": "Entities on the current page.",
             "description": "Show all entities on the current page.",
-            "icon": {
+            "icon_options": {
                 html: '<i class="bi-geo-alt-fill"  style="font-size: 20px; color: #00F;"></i>',
                 iconAnchor: [10, 19],
                 className: "",
@@ -675,7 +686,7 @@ var caosdb_map = new function () {
         "all_map_entities": {
             "name": "All entities",
             "description": "Show all entities with coordinates.",
-            "icon": {
+            "icon_options": {
                 html: '<i class="bi-geo-alt-fill"  style="font-size: 20px; color: #F00;"></i>',
                 iconAnchor: [10, 19],
                 className: "",
@@ -973,9 +984,10 @@ var caosdb_map = new function () {
         this._reload_layers = function () {
             caosdb_map._show_load_info()
             const promises = []
+            const entity_layer_config = $.extend(true, {}, caosdb_map._default_entity_layer_config, caosdb_map.config["entityLayers"]);
             for (const layer of caosdb_map.layers) {
                 promises.push(caosdb_map._fill_layer(layer.layer_group,
-                    caosdb_map._default_entity_layer_config[layer.id]));
+                    entity_layer_config[layer.id]));
             }
             Promise.all(promises).then((val) => {
                 caosdb_map._hide_load_info()
@@ -1067,14 +1079,16 @@ var caosdb_map = new function () {
                         view_config);
 
                     // init entity layers
-                    this.layers = this.init_entity_layers(this._default_entity_layer_config);
+                    const entity_layer_config = $.extend(true, {}, this._default_entity_layer_config, config["entityLayers"]);
+                    caosdb_map.entityLayers = entity_layer_config;
+                    this.layers = this.init_entity_layers(entity_layer_config);
                     var layerControl = L.control.layers();
 
                     const promises = []
                     for (const layer of this.layers) {
 
                         promises.push(caosdb_map._fill_layer(layer.layer_group,
-                            this._default_entity_layer_config[layer.id]));
+                            entity_layer_config[layer.id]));
                         layerControl.addOverlay(layer.layer_group, layer.chooser_html.outerHTML);
                         layer.layer_group.addTo(this._map);
                     }
@@ -1139,7 +1153,7 @@ var caosdb_map = new function () {
          */
 
         /**
-         * @param {EntityLayerConfig[]} configs
+         * @param {Object.<string, EntityLayerConfig>} config
          * @returns {_EntityLayer[]}
          */
         this.init_entity_layers = function (configs) {
@@ -1165,7 +1179,7 @@ var caosdb_map = new function () {
             layer_group.entities = entities;
             var markers = caosdb_map.create_entity_markers(
                 entities, config.datamodel, config.make_popup,
-                config.zIndexOffset, config.icon);
+                config.zIndexOffset, config.icon_options);
 
             for (const marker of markers) {
                 layer_group.addLayer(marker);
@@ -1202,7 +1216,7 @@ var caosdb_map = new function () {
         this.make_layer_chooser_html = function (config) {
             return $('<span/>')
                 .attr("title", config.description)
-                .append(config.icon.html)
+                .append(config.icon_options.html)
                 .append(config.name)[0];
         }