Skip to content

Commit

Permalink
Refactor Cesium asset management; add new features
Browse files Browse the repository at this point in the history
Reorganization of the CesiumWidget:
- Move functions that create and update Cesium assets (e.g. imagery, terrain, 3Dtiles) from the CesiumWidget view to individual "Map Asset" models
- Replace the Layer and Terrain model with a more generic MapAsset model.
- Similarly, replace Layers and Terrains collections with a MapAssets collection that can be used in either case.

New features:
- Enable clicking on individual features in a 3D tileset lay to view more details
- Add support for configuring the colours to use for 3D tilesets - colors can be set conditionally in the Cesium config based on feature properties. Only categorical color palettes are enabled at so far.
- Add support for configuring 'vector filters' in the Cesium config. These filters conditionally show or hide features of a 3D tileset based on properties of the features.

Relates to #1770, #1798, #1789, #1790, #1791, #1780, #1778, #1797
  • Loading branch information
robyngit committed Sep 29, 2021
1 parent 916977b commit 292cf4f
Show file tree
Hide file tree
Showing 29 changed files with 2,889 additions and 1,032 deletions.
90 changes: 79 additions & 11 deletions src/css/map-view.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,9 @@
:root {
/* COLOURS */
--map-col-bkg: #111827;
/* grey 900 */
--map-col-bkg-active: #374151;
/* grey 600 */
--map-col-buttons: #4B5563F2;
/* grey 700 */
--map-col-bkg-lighter: #1b2538;
--map-col-bkg-lightest: #242e42;
--map-col-buttons: #313c52;
--map-col-text: #F9FAFB;
--map-col-highlight: var(--portal-primary-color);
/* SIZING: */
Expand Down Expand Up @@ -289,7 +287,7 @@ represents 1 unit of the given distance measurement. */
}

.toolbar__link:hover {
background-color: var(--map-col-bkg-active)
background-color: var(--map-col-bkg-lighter)
}

.toolbar__link--active {
Expand Down Expand Up @@ -412,7 +410,7 @@ represents 1 unit of the given distance measurement. */
border-top-right-radius: var(--map-border-radius);
border-top-left-radius: var(--map-border-radius);
padding: 0.4rem 0.8rem;
background-color: var(--map-col-bkg-active);
background-color: var(--map-col-bkg-lighter);
color: var(--map-col-text);
box-shadow: var(--map-shadow-md);
grid-template-columns: auto min-content;
Expand Down Expand Up @@ -600,16 +598,86 @@ other class: .ui-slider-range */
*/

.feature-info {
width: var(--map-width-toolbar);
border-top-right-radius: var(--map-border-radius);
border-top-left-radius: var(--map-border-radius);
padding: 0.4rem 0.8rem;
background-color: var(--map-col-bkg-active);
background-color: var(--map-col-bkg-lighter);
color: var(--map-col-text);
box-shadow: var(--map-shadow-md);
grid-template-columns: auto min-content;
grid-template-rows: min-content auto;
gap: 1rem;
gap: 2rem;
align-items: center;
justify-items: center;
/* Don't show the details panel unless it also has the layer-details--open class */
/* display: none; */
}
display: none;
}

.feature-info--open {
display: grid;
}

.feature-info__label {
color: var(--map-col-text) !important;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: center;
width: 100%;
font-weight: 500;
font-size: 0.9rem;
opacity: 60%;
}

.feature-info__content {
display: grid;
grid-template-rows: auto;
grid-template-columns: 100%;
gap: 1rem;
grid-column: 1 / 3;
padding-bottom: 1rem;
}

.feature-info__toggle {
padding: 0.4rem;
font-size: 1.3rem;
background-color: transparent;
opacity: 0.6;
}

.feature-info__table {
/* TODO: use colour vars */
background-color: var(--map-col-bkg-lightest);
border-radius: var(--map-border-radius);
box-shadow: var(--map-shadow-md);
width: calc(var(--map-width-toolbar) - 4rem);
}

.feature-info__table-body {}

.feature-info__table-row {
padding-bottom: 0.6rem;
border: 1px solid #FFFFFF0D;
border-top-right-radius: var(--map-border-radius);
}

.feature-info__table-row:nth-child(even) {
background-color: var(--map-col-bkg-lighter);
}

.feature-info__table-cell {
padding: 0.6rem;

overflow-wrap: break-word;
word-wrap: break-word;
max-width: 15rem;
}

/*****************************************************************************************
*
* Map Legend
*
* Legends for vector layers in the map
*
*/
96 changes: 0 additions & 96 deletions src/js/collections/maps/Layers.js

This file was deleted.

121 changes: 121 additions & 0 deletions src/js/collections/maps/MapAssets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
'use strict';

define(
[
'jquery',
'underscore',
'backbone',
'models/maps/assets/MapAsset',
'models/maps/assets/Cesium3DTileset',
'models/maps/assets/CesiumImagery',
'models/maps/assets/CesiumTerrain',
],
function (
$,
_,
Backbone,
MapAsset,
Cesium3DTileset,
CesiumImagery,
CesiumTerrain
) {

/**
* @class MapAssets
* @classdesc A MapAssets collection is a group of MapAsset models - models that
* provide the information required to render geo-spatial data on a map, including
* imagery (raster), vector, and terrain data.
* @class MapAssets
* @classcategory Collections/Maps
* @extends Backbone.Collection
* @since 2.x.x
* @constructor
*/
var MapAssets = Backbone.Collection.extend(
/** @lends MapAssets.prototype */ {

/**
* Creates the type of Map Asset based on the given type. This function is
* typically not called directly. It is used by Backbone.js when adding a new
* model to the collection.
* @param {object} attrs - A literal object that contains the attributes to pass
* to the model
* @param {object} options - A literal object of additional options to pass to the
* model
* @returns {Cesium3DTileset|CesiumImagery|CesiumTerrain} Returns a MapAsset model
*/
model: function (attrs, options) {
try {

// Supported types: Matches each 'type' attribute to the appropriate MapAsset
// model. See also CesiumWidgetView.mapAssetRenderFunctions
var mapAssetTypes = [
{
types: ['Cesium3DTileset'],
model: Cesium3DTileset
},
{
types: ['BingMapsImageryProvider'],
model: CesiumImagery
},
{
types: ['CesiumTerrainProvider'],
model: CesiumTerrain
}
];

var type = attrs.type
var modelOption = _.find(mapAssetTypes, function (option) {
return option.types.includes(type)
})

// Don't add an unsupported type to the collection
if (modelOption) {
return new modelOption.model(attrs, options)
}

}
catch (error) {
console.log(
'Failed to add a new model to a MapAssets collection' +
'. Error details: ' + error
);
}
},

/**
* Executed when a new MapAssets collection is created.
*/
initialize: function () {
try {

// Only allow one Map Asset in the collection to be selected at a time. When a
// Map Asset model's 'selected' attribute is changed to true, change all of the
// other models' selected attributes to false.
this.stopListening(this, 'change:selected');
this.listenTo(this, 'change:selected', function (changedAsset, newValue) {
if (newValue === true) {
var otherModels = this.reject(function (assetModel) {
return assetModel === changedAsset
})
otherModels.forEach(function (otherModel) {
otherModel.set('selected', false)
})
}
})
}
catch (error) {
console.log(
'There was an error initializing a MapAssets collection' +
'. Error details: ' + error
);
}
},

}
);

return MapAssets;

}
);
Loading

0 comments on commit 292cf4f

Please sign in to comment.