diff --git a/src/core/js/ext_map.js b/src/core/js/ext_map.js index a0da7c1a6b4943cac74508944c39219289fbb30a..68bbf528459b73c075d52076dd8101885589befd 100644 --- a/src/core/js/ext_map.js +++ b/src/core/js/ext_map.js @@ -25,7 +25,7 @@ /** * @module caosdb_map - * @version 0.4.1 + * @version 0.4.2 * * 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.4.2"; 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: "", @@ -1069,6 +1080,7 @@ var caosdb_map = new function () { // init entity layers 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(); @@ -1141,7 +1153,7 @@ var caosdb_map = new function () { */ /** - * @param {EntityLayerConfig[]} configs + * @param {Object.<string, EntityLayerConfig>} config * @returns {_EntityLayer[]} */ this.init_entity_layers = function (configs) { @@ -1167,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); @@ -1204,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]; }