Make app configurable through OSMCha

willemarcel · willemarcel · commit cef56b2818bf · 2023-09-06T11:20:27.000+01:00
diff --git a/lib/config.js b/lib/config.js
@@ -4,9 +4,10 @@ export const config = {
   overpassBase: 'https://overpass.osmcha.org/api/interpreter',
   osmchaBase: 'https://osmcha.org/',
   osmBase: DEFAULT_OSM_URL,
-  osmApiBase: `${DEFAULT_OSM_URL}/api/0.6/`,
+  osmApiBase: `${DEFAULT_OSM_URL}/api/0.6`,
   mapboxAccessToken:
     'pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJjam10OXpmc2YwMXI5M3BqeTRiMDBqMHVyIn0.LIcIDe3TZLSDdTWDoojzNg',
   S3_URL: 'https://s3.amazonaws.com/mapbox/real-changesets/production/',
+  enableRealChangesets: false,
   isOSMApp: DEFAULT_OSM_URL === 'https://www.openstreetmap.org'
 };
diff --git a/lib/featureDiff/MetadataTable.js b/lib/featureDiff/MetadataTable.js
@@ -5,9 +5,14 @@ import { propsDiff } from '../propsDiff';
 import { Dropdown } from '../dropdown';
 import { DiffTable } from './DiffTable';
 import { FlagButton } from './FlagButton';
-import { config } from '../config';
 
-export const MetadataTable = ({ featuresWithId, id, changesetId }) => {
+export const MetadataTable = ({
+  featuresWithId,
+  id,
+  changesetId,
+  isOSMApp,
+  osmBase
+}) => {
   const type = featuresWithId[0].properties.type;
   const metadataProps = featuresWithId.map(function(f) {
     var filteredProps = Object.assign({}, f.properties);
@@ -22,7 +27,7 @@ export const MetadataTable = ({ featuresWithId, id, changesetId }) => {
   const historyTools = [
     {
       label: 'OSM',
-      href: `${config.osmBase}/${type}/${id}/history`
+      href: `${osmBase}/${type}/${id}/history`
     },
     {
       label: 'Deep History',
@@ -37,11 +42,11 @@ export const MetadataTable = ({ featuresWithId, id, changesetId }) => {
   const editorLinks = [
     {
       label: 'OSM',
-      href: `${config.osmBase}/${type}/${id}`
+      href: `${osmBase}/${type}/${id}`
     },
     {
       label: 'iD',
-      href: `${config.osmBase}/edit?editor=id&${type}=${id}`
+      href: `${osmBase}/edit?editor=id&${type}=${id}`
     },
     {
       label: 'JOSM',
@@ -67,11 +72,11 @@ export const MetadataTable = ({ featuresWithId, id, changesetId }) => {
       <div id="cmap-feature-btns">
         <Dropdown
           display="History"
-          options={config.isOSMApp ? historyTools : historyTools.slice(0, 1)}
+          options={isOSMApp ? historyTools : historyTools.slice(0, 1)}
         />
         <Dropdown
           display="Open feature"
-          options={config.isOSMApp ? editorLinks : editorLinks.slice(0, 3)}
+          options={isOSMApp ? editorLinks : editorLinks.slice(0, 3)}
         />
         {token && (
           <FlagButton
@@ -97,5 +102,7 @@ export const MetadataTable = ({ featuresWithId, id, changesetId }) => {
 MetadataTable.propTypes = {
   featuresWithId: PropTypes.array.isRequired,
   id: PropTypes.string.isRequired,
-  changesetId: PropTypes.number.isRequired
+  changesetId: PropTypes.number.isRequired,
+  isOSMApp: PropTypes.bool,
+  osmBase: PropTypes.string.isRequired
 };
diff --git a/lib/featureDiff/renderFeatureDiff.js b/lib/featureDiff/renderFeatureDiff.js
@@ -13,7 +13,9 @@ export const renderFeatureDiff = function(
   changesetId,
   metadataContainer,
   tagsContainer,
-  membersContainer
+  membersContainer,
+  isOSMApp,
+  osmBase
 ) {
   var featuresWithId = featureMap[id];
 
@@ -22,6 +24,8 @@ export const renderFeatureDiff = function(
       featuresWithId={featuresWithId}
       id={id}
       changesetId={changesetId}
+      isOSMApp={isOSMApp}
+      osmBase={osmBase}
     />,
     metadataContainer
   );
diff --git a/lib/getChangeset.js b/lib/getChangeset.js
@@ -3,27 +3,34 @@ import jsonParser from 'real-changesets-parser';
 import { query } from './query';
 import { config } from './config';
 
-export function getChangeset(changesetID, overpassBase = config.overpassBase) {
-  return query(changesetID).then(changeset => {
-    var url = config.S3_URL + changesetID + '.json';
-    return fetch(url)
-      .then(r => {
-        if (r.ok) return r.json();
-        // Fallback to overpass
-        return Promise.reject();
-      })
-      .then(r => {
-        if (r.elements.length === 0) return Promise.reject();
-        var geojson = jsonParser(r);
-        var featureMap = getFeatureMap(geojson);
-        var ret = {
-          geojson: geojson,
-          featureMap: featureMap,
-          changeset: changeset
-        };
-        return ret;
-      })
-      .catch(() => fetchFromOverPass(changesetID, changeset, overpassBase));
+export function getChangeset(changesetID, options) {
+  return query(changesetID, options).then(data => {
+    const [changeset, options] = data;
+    if (options.enableRealChangesets) {
+      const url = `${config.S3_URL}${changesetID}.json`;
+      return fetch(url)
+        .then(r => {
+          if (r.ok) return r.json();
+          // Fallback to overpass
+          return Promise.reject();
+        })
+        .then(r => {
+          if (r.elements.length === 0) return Promise.reject();
+          const geojson = jsonParser(r);
+          const featureMap = getFeatureMap(geojson);
+          const ret = {
+            geojson: geojson,
+            featureMap: featureMap,
+            changeset: changeset
+          };
+          return ret;
+        })
+        .catch(() =>
+          fetchFromOverPass(changesetID, changeset, options.overpassBase)
+        );
+    } else {
+      return fetchFromOverPass(changesetID, changeset, options.overpassBase);
+    }
   });
 }
 
diff --git a/lib/map.js b/lib/map.js
@@ -28,7 +28,8 @@ const LAYERS_KEY = {
 };
 
 export class Map {
-  constructor() {
+  constructor(options) {
+    this.options = options;
     this.map = null;
     this.queue = [];
     this.filterLayers = this.filterLayers.bind(this);
@@ -1261,7 +1262,9 @@ export class Map {
       this.result.changeset.id,
       document.querySelector('.cmap-diff-metadata'),
       document.querySelector('.cmap-diff-tags'),
-      document.querySelector('.cmap-diff-members')
+      document.querySelector('.cmap-diff-members'),
+      this.options.isOSMApp,
+      this.options.osmBase
     );
 
     document.querySelector('.cmap-diff').style.display = 'block';
diff --git a/lib/query.js b/lib/query.js
@@ -1,32 +1,34 @@
 import { parse, subSeconds } from 'date-fns';
-import { config } from './config';
 
-export function query(changesetID) {
-  var url = `${config.osmApiBase}changeset/${changesetID}.json?include_discussion=true`;
-  var options = {
+export function query(changesetID, options) {
+  const url = `${options.osmApiBase}/changeset/${changesetID}.json?include_discussion=true`;
+  const meta = {
     method: 'GET',
     headers: { 'Content-Type': 'application/json' }
   };
-  return fetch(url, options)
+  return fetch(url, meta)
     .then(r => r.json())
     .then(r => {
       const cs = r.elements[0];
-      return {
-        id: changesetID,
-        uid: cs.uid,
-        user: cs.user,
-        from: subSeconds(
-          parse(cs.created_at, 'yyyy-MM-dd\'T\'HH:mm:ssX', new Date()),
-          1
-        ).toISOString(),
-        to: cs.closed_at || null,
-        comments: r.elements[0].discussion || [],
-        bbox: {
-          left: cs.minlon || -180,
-          bottom: cs.minlat || -90,
-          right: cs.maxlon || 180,
-          top: cs.maxlat || 90
-        }
-      };
+      return [
+        {
+          id: changesetID,
+          uid: cs.uid,
+          user: cs.user,
+          from: subSeconds(
+            parse(cs.created_at, 'yyyy-MM-dd\'T\'HH:mm:ssX', new Date()),
+            1
+          ).toISOString(),
+          to: cs.closed_at || null,
+          comments: r.elements[0].discussion || [],
+          bbox: {
+            left: cs.minlon || -180,
+            bottom: cs.minlat || -90,
+            right: cs.maxlon || 180,
+            top: cs.maxlat || 90
+          }
+        },
+        options
+      ];
     });
 }
diff --git a/lib/render.js b/lib/render.js
@@ -15,22 +15,21 @@ let map;
 
 window.cmap = cmap;
 
-export function render(container, changesetId, options) {
+export function render(container, changesetId, options = config) {
   container.style.width = options.width || '1000px';
   container.style.height = options.height || '500px';
 
-  options = options || {};
-  options.overpassBase = options.overpassBase || config.overpassBase;
-  mapboxgl.accessToken = config.mapboxAccessToken;
+  options = Object.assign(config, options);
+  mapboxgl.accessToken = options.mapboxAccessToken;
   container.classList.add('cmap-loading');
   if (!map) {
-    map = new GlMap();
+    map = new GlMap(options);
   }
 
   if (options.data) {
     _render(container, changesetId, options.data, options.disableSidebar);
   } else {
-    getChangeset(changesetId, options.overpassBase)
+    getChangeset(changesetId, options)
       .then(result => _render(container, changesetId, result))
       .catch(err => {
         errorMessage(err.msg);
diff --git a/www/index.js b/www/index.js
@@ -2,6 +2,7 @@
 // import { render } from 'react-dom';
 
 import { render as changesetMap } from '../lib/render';
+import { config } from '../lib/config';
 
 // render(
 //   <div>
@@ -19,10 +20,14 @@ if (location.hash !== '') {
   document.getElementById('formContainer').style.display = 'none';
   var id = location.hash.split('/')[0].replace('#', '');
   var [, geometryType, featureId] = location.hash.split('/');
-  cMap = changesetMap(document.getElementById('container'), id, {
-    width: containerWidth,
-    height: containerHeight
-  });
+  cMap = changesetMap(
+    document.getElementById('container'),
+    id,
+    Object.assign(config, {
+      width: containerWidth,
+      height: containerHeight
+    })
+  );
   cMap.on('load', function() {
     cMap.emit('selectFeature', geometryType, featureId);
   });
@@ -35,11 +40,15 @@ document
     document.getElementById('formContainer').style.display = 'none';
     var changesetID = document.getElementById('changesetInput').value;
     location.hash = changesetID;
-    cMap = changesetMap(document.getElementById('container'), changesetID, {
-      hash: location.hash,
-      width: containerWidth,
-      height: containerHeight
-    });
+    cMap = changesetMap(
+      document.getElementById('container'),
+      changesetID,
+      Object.assign(config, {
+        hash: location.hash,
+        width: containerWidth,
+        height: containerHeight
+      })
+    );
   });
 
 cMap.on('featureChange', function(geometryType, featureId) {
