Merge branch 'f-map-marker-color-config' into 'dev'

F map marker color config

See merge request !83

CHANGELOG.md

@@ -10,6 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed (for changes in existing functionality)
 
+* Version bump of caosdb_map module (0.5.0):
+  * Added configurable entityLayers
+  * Changed name of the icon option to icon_options, because that name better
+    distiguished the options from the result icon object.
+
 ### Deprecated
 
 ### Removed

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];
         }
 

test/core/js/modules/ext_map.js.js

@@ -76,7 +76,7 @@ QUnit.module("ext_map.js", {
 });
 
 QUnit.test("availability", function (assert) {
-    assert.equal(caosdb_map.version, "0.4.1", "test version");
+    assert.equal(caosdb_map.version, "0.5.0", "test version");
     assert.ok(caosdb_map.init, "init available");
 });
 
@@ -272,7 +272,7 @@ QUnit.test("make_layer_chooser_html", function (assert) {
         "id": "test_id",
         "name": "test name",
         "description": "test description",
-        "icon": {
+        "icon_options": {
             "html": "<span>ICON</span>",
         },
     };
@@ -287,7 +287,7 @@ QUnit.test("_init_single_entity_layer", function (assert) {
         "id": "test_id",
         "name": "test name",
         "description": "test description",
-        "icon": {
+        "icon_options": {
             "html": "<span>ICON</span>",
         },
     }