chore: add railplus popup, use railplus style

src/components/Select/Select.js

@@ -66,7 +66,7 @@ const Select = (props) => {
       {...props}
       // The following props need to be set after {...newProps}, since they overwrite some of them
       MenuProps={{
-        getContentAnchorEl: () => null,
+        getContentAnchorEl: null,
         anchorOrigin: {
           vertical: 'bottom',
           horizontal: 'left',

src/components/TopicLoader/TopicLoader.js

@@ -104,6 +104,8 @@ class TopicLoader extends PureComponent {
       vectorTilesUrl,
       staticFilesUrl,
       searchUrl,
+      layers,
+      language,
     } = this.props;
 
     // Sometimes the array object is different but the content is the same as before.
@@ -137,6 +139,13 @@ class TopicLoader extends PureComponent {
     ) {
       this.updateLayers(activeTopic.layers);
     }
+
+    if (language !== prevProps.language) {
+      const layerAsFlatArray = new LayerService(layers).getLayersAsFlatArray();
+      layerAsFlatArray.forEach(
+        (layer) => layer.setLanguage && layer.setLanguage(language),
+      );
+    }
   }
 
   componentWillUnmount() {

src/config/ch.railplus.meterspurbahnen/index.js

@@ -0,0 +1,33 @@
+import TrafimageMapboxLayer from '../../layers/TrafimageMapboxLayer';
+import MapboxStyleLayer from '../../layers/MapboxStyleLayer';
+
+export const netzkarteRailplus = new TrafimageMapboxLayer({
+  name: 'ch.railplus.meterspurbahnen.data',
+  visible: true,
+  zIndex: -1,
+  style: 'netzkarte_eisenbahninfrastruktur_v3_ch.railplus',
+  properties: {
+    isBaseLayer: true,
+  },
+  mapOptions: {
+    preserveDrawingBuffer: true,
+  },
+});
+
+export const railplusTVS = new MapboxStyleLayer({
+  name: 'ch.railplus.meterspurbahnen',
+  visible: true,
+  mapboxLayer: netzkarteRailplus,
+  styleLayersFilter: ({ metadata }) =>
+    metadata &&
+    metadata['isb.filter'] &&
+    /^(tvs|tvs_flag)$/.test(metadata['isb.filter']),
+  queryRenderedLayersFilter: ({ metadata }) =>
+    metadata && metadata['isb.filter'] && /^tvs$/.test(metadata['isb.filter']),
+  properties: {
+    isQueryable: true,
+    popupComponent: 'RailplusMeterspurPopup',
+  },
+});
+
+export default [netzkarteRailplus, railplusTVS];

src/config/ch.railplus.meterspurbahnen/providersMapping.js

@@ -0,0 +1,35 @@
+import aareSeelandLogo from '../../img/railPlusLogos/aare_seeland_mobil.svg';
+import aargauLogo from '../../img/railPlusLogos/aargau_Verkehr.svg';
+import rhaetischeBahnLogo from '../../img/railPlusLogos/rhaetische_bahn.svg';
+import lebLogo from '../../img/railPlusLogos/leb.svg';
+import tmrLogo from '../../img/railPlusLogos/tmr.svg';
+
+const providers = [
+  {
+    name: 'AareSeelandmobil',
+    logo: aareSeelandLogo,
+    url: 'https://www.asmobil.ch/',
+  },
+  {
+    name: 'Aargau Verkehr',
+    logo: aargauLogo,
+    url: 'https://www.aargauverkehr.ch/',
+  },
+  {
+    name: 'Rhaetische Bahn',
+    logo: rhaetischeBahnLogo,
+    url: 'https://www.rhb.ch/',
+  },
+  {
+    name: 'Compagnie du Chemin de fer Lausanne-Echallens-Bercher',
+    logo: lebLogo,
+    url: 'https://www.leb.ch/',
+  },
+  {
+    name: 'Transports de Martigny et Régions',
+    logo: tmrLogo,
+    url: 'https://www.tmrsa.ch/',
+  },
+];
+
+export default providers;

src/config/topics.js

@@ -3,6 +3,7 @@ import { getCenter } from 'ol/extent';
 import './proj4';
 import tarifverbundkarteLegend from '../img/tarifverbund_legend.svg';
 import energieLegendPub from '../img/energie_legend_pub.svg';
+import railPlusLayers from './ch.railplus.meterspurbahnen';
 import netzkarteLayers, {
   dataLayer,
   netzkarteLayer,
@@ -411,6 +412,25 @@ export const direktverbindungenIframe = {
   overlaySide: 'left',
 };
 
+export const railPlus = {
+  elements: {
+    ...defaultElements,
+    popup: true,
+    shareMenu: false,
+    drawMenu: false,
+    permalink: true,
+    geolocationButton: false,
+    header: false,
+    search: false,
+    footer: false,
+    menu: false,
+  },
+  key: 'ch.railplus.meterspurbahnen',
+  layers: railPlusLayers,
+  only: true,
+  hideInLayerTree: true,
+};
+
 const topics = {
   wkp: [
     netzkarte,
@@ -430,6 +450,7 @@ const topics = {
     sts,
     energiePublic,
     sandbox,
+    railPlus,
   ],
   stelen: [netzkarteStelen],
   betriebsregionen: [betriebsregionen],

src/examples/iframe/Railplus/README.md

@@ -0,0 +1,46 @@
+The _Railplus - Meterspurbahnen_ topic provides a topic specifically for iframe use.
+
+```jsx
+import React, { useMemo, useState, useEffect } from 'react';
+import {
+  TextField,
+  FormControl,
+  Select,
+  InputLabel,
+  MenuItem,
+} from '@material-ui/core';
+import Editor from 'react-styleguidist/lib/client/rsg-components/Editor';
+import Heading from 'react-styleguidist/lib/client/rsg-components/Heading';
+import DocForm from '../../DocForm';
+import getIframeCodeFromUrl from '../getIframeCodeFromUrl';
+import getHtmlPageCode from '../getHtmlPageCode';
+import iframeSearchParams from '../iframeSearchParams';
+// The `apiKey` used here is for demonstration purposes only.
+// Please get your own api key at https://developer.geops.io/.
+const apiKey = window.apiKey;
+const baseUrl = 'https://wkp.stag.trafimage.geops.ch';
+const topic = 'ch.railplus.meterspurbahnen';
+
+const App = () => {
+  const [url, setUrl] = useState(baseUrl + '/' + topic + '?embedded=true');
+
+  const code = useMemo(() => {
+    return getHtmlPageCode(getIframeCodeFromUrl(url));
+  }, [url]);
+
+  return (
+    <>
+      <div className="container">
+        <iframe src={url} />
+      </div>
+      <br />
+      <Editor
+        code={code}
+        onChange={(code) => null} //setCode(code)}
+      />
+    </>
+  );
+};
+
+<App />;
+```