Universal dataset catalog

css/80_app.css

@@ -4172,7 +4172,7 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
   place-content: center;
   place-items: center;
 /* for testing */
-/*  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/RCA_Indian_Head_Test_Pattern.svg/1200px-RCA_Indian_Head_Test_Pattern.svg.png');*/
+/*  background-image: url(img/test-pattern.png);*/
 /*  background-size:     cover;*/
 /*  background-repeat:   no-repeat;*/
 /*  background-position: center center;*/

css/80_app_fb.css

@@ -357,9 +357,9 @@ button.rapid-features.layer-off use {
 
 /* For things that should stack in rows */
 .rapid-stack {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 /* Rapid modal dialogs */
@@ -491,11 +491,8 @@ button.rapid-features.layer-off use {
 
 
 /* dark scrollbars */
-.modal.rapid-modal {
-  scrollbar-width: thin;
-}
 .modal.rapid-modal ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
 }
 .modal.rapid-modal ::-webkit-scrollbar-track {
   background: #444;
@@ -905,73 +902,91 @@ div.combobox.combobox-dataset-categories a:focus {
     text-align: center;
     margin: 50px;
 }
-.rapid-catalog-datasets-spinner {
-    filter: brightness(2)contrast(0.8);
-}
 
 .rapid-catalog-datasets {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 5px;
+  width: 100%;
 }
 .rapid-catalog-dataset {
-    flex: 0 1 50%;
-    padding: 15px 25px;
-    margin-bottom: 10px;
-    color: #eee;
-    display: flex;
-    flex-flow: row nowrap;
+  display: flex;
+  flex: 1 1 40%;
+  flex-flow: row nowrap;
+  padding: 10px;
+  margin: 5px;
+  border-radius: 5px;
+  height: 220px;
+  color: #eee;
+}
+.rapid-catalog-dataset.added {
+  background: rgba(55, 55, 55, 0.9);
 }
 
 .rapid-catalog-dataset-label {
-    flex: 1;
-    padding: 0 8px;
+  flex: 1;
+  padding: 0 8px;
 }
 .rapid-catalog-dataset-thumb {
-    flex: 0;
+  flex: 0;
 }
 img.rapid-catalog-dataset-thumbnail {
-    border-radius: 10px;
-    width: 180px;
-    filter: invert(1)brightness(2)contrast(0.75);
+  border-radius: 10px;
+  object-fit: cover;
+  height: 130px;
+  width: 180px;
 }
-
-.rapid-catalog-dataset button.rapid-catalog-dataset-action {
-    font-size: 12px;
-    height: 28px;
-    border-radius: 14px;
-    margin: 10px 0;
-    padding: 0 15px;
+img.rapid-catalog-dataset-thumbnail.inverted {
+  filter: invert(1) brightness(2) contrast(0.75);
 }
+
 .rapid-catalog-dataset-name {
     font-weight: bold;
     font-size: 14px;
     margin-bottom: 3px;
 }
-.rapid-catalog-dataset-license {
-    display: inline-block;
+
+.dataset-categories {
+  display: flex;
+  flex-flow: row wrap;
+}
+.dataset-category {
+  display: inline-block;
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: #666;
+  color: #eee;
+  margin-left: unset;
+  margin-right: 4px;
+  line-height: 1.5;
 }
-.rapid-catalog-dataset-beta {
-    font-size: 10px;
+.ideditor[dir='rtl'] .dataset-category {
+  margin-right: unset;
+  margin-left: 4px;
 }
-.rapid-catalog-dataset-featured {
-    display: inline-block;
-    font-size: 11px;
-    background: #a21;
-    color: #dcdcdc;
-    padding: 1px 7px;
-    border-radius: 5px;
-    margin: 0px 10px;
-    line-height: 1.5;
+.dataset-category-preview {
+  background: rgb(203,16,237);
+  background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
+}
+.dataset-category-featured {
+  background: #a21;
 }
-.rapid-catalog-dataset-featured span {
-    margin: 0px 3px;
+.dataset-added-text {
+  color: #16da16;
 }
 
-/* Colorpicker popup */
+.rapid-catalog-dataset button.rapid-catalog-dataset-action {
+  font-size: 12px;
+  height: 28px;
+  border-radius: 14px;
+  margin: 10px 0;
+  padding: 0 15px;
+}
 
+/* Colorpicker popup */
 .colorpicker-popup {
     position: absolute;
     padding: 10px;

data/core.yaml

@@ -1118,32 +1118,48 @@ en:
   rapid_feature_license: Facebook's Map With AI License
   rapid_feature_toggle:
     license: License
-    toggle_all: Toggle all {rapidicon} features
-    view_manage_datasets: "Add/Manage Datasets"
+    toggle_all: Toggle all {rapidicon} data
+    add_manage_datasets: "Add/Manage Datasets"
     center_map: Center map here
     worldwide: Worldwide
+    no_datasets: No datasets available.
+    remove: Remove
+    add_dataset: Add Dataset
+    dataset_added: Dataset added
+    more_info: More Info
+    about_the_catalog: "These datasets have been provided as open data by various organizations and the Esri user community for the purpose of improving OpenStreetMap.<br/>You can learn more by clicking the links below, or visiting [the Rapid Guide](https://github.com/facebookmicrosites/Open-Mapping-At-Facebook/wiki/Esri-ArcGIS-FAQ) or [Esri/ArcGIS dataset page on the OSM Wiki](https://wiki.openstreetmap.org/wiki/Esri/ArcGIS_Datasets)."  # This string may contain markdown
+    clear_filters: Clear Filters
+    filter_datasets: filter datasets    # placeholder text for the filter text
+    any_type: any type                  # placeholder text for the filter type dropdown
+    datasets_found:
+      one: "{n} dataset found"
+      other: "{gt}{n} datasets found"   # {gt} = placeholder for greater than symbol '>', {n} = count
+    category:
+      addresses: addresses
+      buildings: buildings
+      esri: Esri
+      featured: featured
+      footways: footways
+      meta: Meta
+      microsoft: Microsoft
+      overture: Overture
+      places: places
+      preview: preview
+      roads: roads
+      trees: trees
     fbRoads:
       label: Facebook Roads
+      description: AI predicted roads detected from Maxar Premium imagery and available in over 80 countries.
     msBuildings:
       label: Microsoft Buildings
+      description: Open building footprints from around the world. Detected from Bing Maps imagery between 2014 and 2024 including Maxar, Airbus, and IGN France imagery.
     overture:
       places:
         label: Overture Places
+        description: "Contains over 53 million point representations of real-world entities: schools, businesses, hospitals, religious organizations, landmarks, mountain peaks, and much more."
     omdFootways:
       label: Open Data Footways
-    esri:
-      title: ArcGIS Datasets
-      about: "These datasets have been provided as open data by the ArcGIS user community for the purpose of improving OpenStreetMap.<br/>You can learn more by visiting [the Rapid Guide](https://github.com/facebookmicrosites/Open-Mapping-At-Facebook/wiki/Esri-ArcGIS-FAQ) or [Esri/ArcGIS dataset page on the OSM Wiki](https://wiki.openstreetmap.org/wiki/Esri/ArcGIS_Datasets)."  # This string may contain markdown
-      filter_datasets: filter datasets
-      any_type: any type
-      clear_filters: Clear Filters
-      datasets_found: "{num} dataset(s) found"
-      featured: featured
-      fetching_datasets: Fetching available datasets...
-      no_datasets: No datasets available.
-      remove: Remove
-      add_to_map: Add Dataset
-      more_info: More Info
+      description: Open footways data collected from various local government entities.
 
   rapid_poweruser_features:
     beta: Beta Feature

data/l10n/core.en.json

@@ -1399,37 +1399,54 @@
     "rapid_feature_license": "Facebook's Map With AI License",
     "rapid_feature_toggle": {
       "license": "License",
-      "toggle_all": "Toggle all {rapidicon} features",
-      "view_manage_datasets": "Add/Manage Datasets",
+      "toggle_all": "Toggle all {rapidicon} data",
+      "add_manage_datasets": "Add/Manage Datasets",
       "center_map": "Center map here",
       "worldwide": "Worldwide",
+      "no_datasets": "No datasets available.",
+      "remove": "Remove",
+      "add_dataset": "Add Dataset",
+      "dataset_added": "Dataset added",
+      "more_info": "More Info",
+      "about_the_catalog": "These datasets have been provided as open data by various organizations and the Esri user community for the purpose of improving OpenStreetMap.<br/>You can learn more by clicking the links below, or visiting [the Rapid Guide](https://github.com/facebookmicrosites/Open-Mapping-At-Facebook/wiki/Esri-ArcGIS-FAQ) or [Esri/ArcGIS dataset page on the OSM Wiki](https://wiki.openstreetmap.org/wiki/Esri/ArcGIS_Datasets).",
+      "clear_filters": "Clear Filters",
+      "filter_datasets": "filter datasets",
+      "any_type": "any type",
+      "datasets_found": {
+        "one": "{n} dataset found",
+        "other": "{gt}{n} datasets found"
+      },
+      "category": {
+        "addresses": "addresses",
+        "buildings": "buildings",
+        "esri": "Esri",
+        "featured": "featured",
+        "footways": "footways",
+        "meta": "Meta",
+        "microsoft": "Microsoft",
+        "overture": "Overture",
+        "places": "places",
+        "preview": "preview",
+        "roads": "roads",
+        "trees": "trees"
+      },
       "fbRoads": {
-        "label": "Facebook Roads"
+        "label": "Facebook Roads",
+        "description": "AI predicted roads detected from Maxar Premium imagery and available in over 80 countries."
       },
       "msBuildings": {
-        "label": "Microsoft Buildings"
+        "label": "Microsoft Buildings",
+        "description": "Open building footprints from around the world. Detected from Bing Maps imagery between 2014 and 2024 including Maxar, Airbus, and IGN France imagery."
       },
       "overture": {
         "places": {
-          "label": "Overture Places"
+          "label": "Overture Places",
+          "description": "Contains over 53 million point representations of real-world entities: schools, businesses, hospitals, religious organizations, landmarks, mountain peaks, and much more."
         }
       },
       "omdFootways": {
-        "label": "Open Data Footways"
-      },
-      "esri": {
-        "title": "ArcGIS Datasets",
-        "about": "These datasets have been provided as open data by the ArcGIS user community for the purpose of improving OpenStreetMap.<br/>You can learn more by visiting [the Rapid Guide](https://github.com/facebookmicrosites/Open-Mapping-At-Facebook/wiki/Esri-ArcGIS-FAQ) or [Esri/ArcGIS dataset page on the OSM Wiki](https://wiki.openstreetmap.org/wiki/Esri/ArcGIS_Datasets).",
-        "filter_datasets": "filter datasets",
-        "any_type": "any type",
-        "clear_filters": "Clear Filters",
-        "datasets_found": "{num} dataset(s) found",
-        "featured": "featured",
-        "fetching_datasets": "Fetching available datasets...",
-        "no_datasets": "No datasets available.",
-        "remove": "Remove",
-        "add_to_map": "Add Dataset",
-        "more_info": "More Info"
+        "label": "Open Data Footways",
+        "description": "Open footways data collected from various local government entities."
       }
     },
     "rapid_poweruser_features": {

modules/core/FilterSystem.js

@@ -110,32 +110,19 @@ export class FilterSystem extends AbstractSystem {
       }
     }
 
-    const storage = this.context.systems.storage;
-    const urlhash = this.context.systems.urlhash;
+    const context = this.context;
+    const urlhash = context.systems.urlhash;
+
     const prerequisites = Promise.all([
-      storage.initAsync(),
       urlhash.initAsync()
     ]);
 
     return this._initPromise = prerequisites
       .then(() => {
         // Setup event handlers..
         urlhash.on('hashchange', this._hashchange);
-
-        // Take initial values from urlhash first, localstorage second
-        const toHide = urlhash.getParam('disable_features') ?? storage.getItem('disabled-features');
-
-        if (toHide) {
-          const filterIDs = toHide.replace(/;/g, ',').split(',').map(s => s.trim()).filter(Boolean);
-          for (const filterID of filterIDs) {
-            this._hidden.add(filterID);
-            const filter = this._filters.get(filterID);
-            filter.enabled = false;
-          }
-        }
       });
 
-
 //    // warm up the feature matching cache upon merging fetched data
 //    const editor = this.context.systems.editor;
 //    editor.on('merge.features', function(newEntities) {
@@ -161,7 +148,22 @@ export class FilterSystem extends AbstractSystem {
    * @return {Promise} Promise resolved when this component has completed startup
    */
   startAsync() {
+    const context = this.context;
+    const storage = context.systems.storage;
+    const urlhash = context.systems.urlhash;
+
+    // Take filter values from urlhash first, localstorage second,
+    // Default to having boundaries hidden
+    const toHide = urlhash.getParam('disable_features') ?? storage.getItem('disabled-features') ?? 'boundaries';
+    const filterIDs = toHide.replace(/;/g, ',').split(',').map(s => s.trim()).filter(Boolean);
+    for (const filterID of filterIDs) {
+      this._hidden.add(filterID);
+      const filter = this._filters.get(filterID);
+      filter.enabled = false;
+    }
+    this._update();
     this._started = true;
+
     return Promise.resolve();
   }
 

modules/core/MapSystem.js

@@ -36,7 +36,7 @@ export class MapSystem extends AbstractSystem {
   constructor(context) {
     super(context);
     this.id = 'map';
-    this.dependencies = new Set(['editor', 'filters', 'gfx', 'imagery', 'l10n', 'photos', 'storage', 'styles', 'urlhash']);
+    this.dependencies = new Set(['editor', 'filters', 'gfx', 'imagery', 'l10n', 'photos', 'rapid', 'storage', 'styles', 'urlhash']);
 
     // display options
     this.areaFillOptions = ['wireframe', 'partial', 'full'];
@@ -83,6 +83,7 @@ export class MapSystem extends AbstractSystem {
     const imagery = context.systems.imagery;
     const l10n = context.systems.l10n;
     const photos = context.systems.photos;
+    const rapid = context.systems.rapid;
     const storage = context.systems.storage;
     const styles = context.systems.styles;
     const urlhash = context.systems.urlhash;
@@ -174,6 +175,12 @@ export class MapSystem extends AbstractSystem {
             gfx.immediateRedraw();
           });
 
+        rapid
+          .on('datasetchange', () => {
+            scene.dirtyLayers(['rapid', 'rapid-overlay', 'overture']);
+            gfx.immediateRedraw();
+          });
+
         l10n
           .on('localechange', () => {
             this._setupKeybinding();