chore: add RailplusLayer, fetch railplus providers on layer load

geops · Oct 18, 2023 · b5e2c19 · b5e2c19
1 parent 2554594
commit b5e2c19
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 17 deletions.
diff --git a/src/config/ch.railplus.mitglieder/index.js b/src/config/ch.railplus.mitglieder/index.js
@@ -1,11 +1,11 @@
 import TrafimageMapboxLayer from '../../layers/TrafimageMapboxLayer';
-import MapboxStyleLayer from '../../layers/MapboxStyleLayer';
+import RailplusLayer from '../../layers/RailplusLayer';
 
 export const netzkarteRailplus = new TrafimageMapboxLayer({
   name: 'ch.railplus.mitglieder.data',
   visible: true,
   zIndex: -1,
-  style: 'netzkarte_eisenbahninfrastruktur_v3_ch.railplus',
+  style: 'netzkarte_eisenbahninfrastruktur_v3_ch.railplus.meterspurbahnen',
   properties: {
     isBaseLayer: true,
   },
@@ -14,7 +14,7 @@ export const netzkarteRailplus = new TrafimageMapboxLayer({
   },
 });
 
-export const railplusMeterspurbahnen = new MapboxStyleLayer({
+export const railplusMeterspurbahnen = new RailplusLayer({
   name: 'ch.railplus.mitglieder.meterspur',
   visible: true,
   mapboxLayer: netzkarteRailplus,

diff --git a/src/layers/AusbauLayer/AusbauLayer.js b/src/layers/AusbauLayer/AusbauLayer.js
@@ -3,7 +3,7 @@ import qs from 'query-string';
 
 /**
  * Layer for ausbau
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/GeltungsbereicheLayer/GeltungsbereicheLayer.js b/src/layers/GeltungsbereicheLayer/GeltungsbereicheLayer.js
@@ -2,7 +2,7 @@ import { MapboxStyleLayer } from 'mobility-toolbox-js/ol';
 
 /**
  * Layer for GeltungsbereicheLayer
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/PlatformsLayer/PlatformsLayer.js b/src/layers/PlatformsLayer/PlatformsLayer.js
@@ -2,7 +2,7 @@ import { MapboxStyleLayer } from 'mobility-toolbox-js/ol';
 
 /**
  * Layer for displaying blue circle on platforms on hover.
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/RailplusLayer/RailplusLayer.js b/src/layers/RailplusLayer/RailplusLayer.js
@@ -0,0 +1,29 @@
+import { MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+
+/**
+ * Layer for RailplusLayer
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * @private
+ * @class
+ * @param {Object} [options] Layer options.
+ */
+class RailplusLayer extends MapboxStyleLayer {
+  onLoad() {
+    super.onLoad();
+    this.fetchRailplusProviders();
+  }
+
+  fetchRailplusProviders() {
+    fetch(
+      `${this.mapboxLayer.url}/data/ch.railplus.meterspurbahnen.json?key=${this.mapboxLayer.apiKey}`,
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.railplusProviders = data['geops.railplus.tu_info'];
+      })
+      // eslint-disable-next-line no-console
+      .catch((err) => console.error(err));
+  }
+}
+
+export default RailplusLayer;
diff --git a/src/layers/RailplusLayer/index.js b/src/layers/RailplusLayer/index.js
@@ -0,0 +1 @@
+export { default } from './RailplusLayer';
diff --git a/src/layers/StationsLayer/StationsLayer.js b/src/layers/StationsLayer/StationsLayer.js
@@ -2,7 +2,7 @@ import { MapboxStyleLayer } from 'mobility-toolbox-js/ol';
 
 /**
  * Layer for displaying blue stations circle on hover.
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/TarifverbundkarteLayer/TarifverbundkarteLayer.js b/src/layers/TarifverbundkarteLayer/TarifverbundkarteLayer.js
@@ -10,7 +10,7 @@ const format = new GeoJSON();
 
 /**
  * Layer for TarifverbundkarteLayer
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/ZweitausbildungPoisLayer/ZweitausbildungPoisLayer.js b/src/layers/ZweitausbildungPoisLayer/ZweitausbildungPoisLayer.js
@@ -3,7 +3,7 @@ import { GeoJSON } from 'ol/format';
 
 /**
  * Layer for zweitausbildung pois
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/ZweitausbildungRoutesHighlightLayer/ZweitausbildungRoutesHighlightLayer.js b/src/layers/ZweitausbildungRoutesHighlightLayer/ZweitausbildungRoutesHighlightLayer.js
@@ -8,7 +8,7 @@ const sourceLayer = 'ch.sbb.zweitausbildung';
 
 /**
  * Layer for zweitausbildung highlight routes.
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/layers/ZweitausbildungRoutesLayer/ZweitausbildungRoutesLayer.js b/src/layers/ZweitausbildungRoutesLayer/ZweitausbildungRoutesLayer.js
@@ -4,7 +4,7 @@ import getStyleLayers from './getStyleLayers';
 
 /**
  * Layer for zweitausbildung routes
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.

diff --git a/src/popups/RailplusPopup/RailplusPopup.js b/src/popups/RailplusPopup/RailplusPopup.js
@@ -1,6 +1,8 @@
 import React from 'react';
-import { Divider, Typography, makeStyles } from '@material-ui/core';
-import providers from '../../config/ch.railplus.mitglieder/providersMapping';
+import PropTypes from 'prop-types';
+import { Feature } from 'ol';
+import { Typography, makeStyles } from '@material-ui/core';
+import RailplusLayer from '../../layers/RailplusLayer';
 
 const useStyles = makeStyles((theme) => ({
   dividerRoot: {
@@ -19,12 +21,16 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function RailplusPopup() {
+function RailplusPopup({ feature, layer }) {
   const classes = useStyles();
-  const provider = providers[Math.floor(Math.random() * 5)]; // TODO: get info from tiles once style is ready
+  const isbNummer = feature.get('isb_tu_nummer');
+  const tuDetails = layer.railplusProviders.find((tu) => !!tu[isbNummer])[
+    isbNummer
+  ];
+
   return (
     <div className={classes.railplusPopup}>
-      <a
+      {/* <a
         href={provider.url}
         target="_blank"
         rel="noopener noreferrer"
@@ -35,11 +41,18 @@ function RailplusPopup() {
         <Typography className={classes.providerName}>
           {provider.name}
         </Typography>
-      </a>
+      </a> */}
+      <Typography className={classes.providerName}>
+        {tuDetails.long_name}
+      </Typography>
     </div>
   );
 }
 
 RailplusPopup.hideHeader = () => true;
+RailplusPopup.propTypes = {
+  feature: PropTypes.instanceOf(Feature).isRequired,
+  layer: PropTypes.instanceOf(RailplusLayer).isRequired,
+};
 
 export default RailplusPopup;