Skip to content

Commit c080fe1

Browse files
helllthhelllth
committed
Merge branch 'feature/042-offline-layer-support' into dev
2 parents c62304e + f43e0d9 commit c080fe1

20 files changed

+3037
-294
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-cismap",
33
"description": "our (cismet) mapping (pattern) library for better reusability in different projects",
4-
"version": "1.6.3",
4+
"version": "1.7.0",
55
"main": "index.js",
66
"module": "index.js",
77
"files": [
@@ -140,6 +140,7 @@
140140
"cy-run": "cypress run",
141141
"copypackage": "cp -rf package.json dist",
142142
"dist": "cd dist && bash -c 'npm publish'",
143+
"dist-pack": "cd dist && bash -c 'npm pack'",
143144
"linkdist": "cd dist && bash -c 'yarn link'",
144145
"unlinkdist": "cd dist && bash -c 'yarn unlink'",
145146
"testls": "npm config ls"

‎src/index.js‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,15 @@
1-
import React, { useContext, useState } from "react";
2-
import ReactDOM from "react-dom";
3-
4-
import "react-bootstrap-typeahead/css/Typeahead.css";
51
import "bootstrap/dist/css/bootstrap.min.css";
62
import "leaflet/dist/leaflet.css";
3+
import React, { useContext, useState } from "react";
4+
import "react-bootstrap-typeahead/css/Typeahead.css";
5+
import ReactDOM from "react-dom";
76
import "./lib/topicMaps.css";
87
import * as TopicMapsExamples from "./lib/_stories/complex/TopicMap.stories";
9-
import * as GenericTopicMapsExamples from "./lib/_stories/complex/GenericTopicMap.stories";
10-
import * as MapLibreExamples from "./lib/_stories/vector/SimpleMapLibreLayer";
11-
12-
import * as InfoBoxExamples from "./lib/topicmaps/_stories/InfoBox.stories";
13-
import * as GazetteerSearchBoxExamples from "./lib/_stories/mainComponents/GazetteerSearchControl.stories";
14-
import * as PhotoLightBoxExamples from "./lib/topicmaps/_stories/PhotoLightbox.stories";
8+
import * as MoreTopicMapsExamples from "./lib/_stories/complex/MoreTopicMap.stories";
9+
import * as MapLibreExamples from "./lib/_stories/vector/MapLibreLayer.stories";
1510

1611
const TestContext = React.createContext();
1712

18-
// if ("serviceWorker" in navigator) {
19-
// window.addEventListener("load", function () {
20-
// navigator.serviceWorker
21-
// .register("/offlineVectorTilesServiceWorker.js")
22-
// .then((res) => console.log("zzz service worker registered", res))
23-
// .catch((err) => console.log("service worker not registered", err));
24-
// });
25-
// }
26-
2713
const ContextDisplay = () => {
2814
const testContextValue = useContext(TestContext);
2915
return (
@@ -66,14 +52,17 @@ ReactDOM.render(
6652
{/* <TopicMapsExamples.TopicMapWithAdditionalLayers /> */}
6753
{/* <TopicMapsExamples.TopicMapWithWithCustomSettingsAndOneAdditionlLayer /> */}
6854
{/* <TopicMapsExamples.TopicMapWithCustomLayerSetAndAdditionalOverlayLayers /> */}
69-
<TopicMapsExamples.TopicMapWithWithFilterDrivenTitleBox />
55+
{/* <TopicMapsExamples.TopicMapWithWithFilterDrivenTitleBox /> */}
56+
<MoreTopicMapsExamples.TopicMapWithOfflineDataConfiguration />
7057
{/* <GenericTopicMapsExamples.SimpleStaticGenericTopicMap_Wasserstofftankstelle /> */}
7158
{/* <TopicMapsExamples.TopicMapWithWithStaticFilter /> */}
7259
{/* <MapLibreExamples.SimpleMapLibreLayer /> */}
7360
{/* <MapLibreExamples.SimpleMapLibreLayerInRoutedMap /> */}
7461
{/* <MapLibreExamples.SimpleMapLibreLayerInRoutedMapWithFeatureCollectionInAnotherCRS /> */}
7562
{/* <MapLibreExamples.SimpleTopicMapWithMapLibreLayer /> */}
7663
{/* <MapLibreExamples.SimpleMapLibreLayerWithLocalStyle /> */}
64+
{/* <MapLibreExamples.SimpleMapLibreLayerWithAttribution /> */}
65+
{/* <MapLibreExamples.SimpleMapLibreLayerWithCustomProtocol /> */}
7766
{/* <AnimationExamples.SimpleWuppertal25832 /> */}
7867
{/* <AnimationExamples.SimpleWuppertal3857 /> */}
7968
{/* <AnimationExamples.SimpleHaltern /> */}

‎src/lib/RoutedMap.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,10 @@ export class RoutedMap extends React.Component {
481481
"." +
482482
md5(this.props.baseLayerConf || "") +
483483
"." +
484-
this.props.layerKeyPostfix
484+
// this.props.layerKeyPostfix +
485+
"."
486+
// +
487+
// this.props.offlineReadyToUse
485488
}
486489
>
487490
{getLayersByNames(

‎src/lib/_stories/complex/MoreTopicMap.stories.js‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React, { useEffect, useState } from "react";
2+
import { TopicMapContextProvider } from "../../contexts/TopicMapContextProvider";
3+
import FeatureCollection from "../../FeatureCollection";
4+
import TopicMapComponent from "../../topicmaps/TopicMapComponent";
5+
import MapLibreLayer from "../../vector/MapLibreLayer";
6+
import { getGazData } from "./StoriesConf";
7+
import { defaultLayerConf } from "../../tools/layerFactory";
8+
9+
export const TopicMapWithOfflineDataConfiguration = () => {
10+
const [gazData, setGazData] = useState([]);
11+
useEffect(() => {
12+
getGazData(setGazData);
13+
}, []);
14+
15+
const offlineConfig = {
16+
rules: [
17+
{
18+
origin: "https://omt.map-hosting.de/fonts/Metropolis Medium Italic,Noto",
19+
cachePath: "fonts/Open",
20+
},
21+
{
22+
origin: "https://omt.map-hosting.de/fonts/Klokantech Noto",
23+
cachePath: "fonts/Open",
24+
},
25+
{
26+
origin: "https://omt.map-hosting.de/fonts",
27+
cachePath: "fonts",
28+
},
29+
{
30+
origin: "https://omt.map-hosting.de/styles",
31+
cachePath: "styles",
32+
},
33+
34+
{
35+
origin: "https://omt.map-hosting.de/data/v3",
36+
cachePath: "tiles",
37+
},
38+
39+
{
40+
origin: "https://omt.map-hosting.de/data/gewaesser",
41+
cachePath: "tiles.gewaesser",
42+
},
43+
44+
{
45+
origin: "https://omt.map-hosting.de/data/kanal",
46+
cachePath: "tiles.kanal",
47+
},
48+
49+
{
50+
origin: "https://omt.map-hosting.de/data/brunnen",
51+
cachePath: "tiles.brunnen",
52+
// realServerFallback: true, //this can override the globalsetting
53+
},
54+
],
55+
dataStores: [
56+
{
57+
name: "Vektorkarte für Wuppertal",
58+
key: "wuppBasemap",
59+
url: "https://offline-data.cismet.de/offline-data/wupp.zip",
60+
},
61+
62+
{
63+
name: "Gewässer, Kanal und Brunnendaten",
64+
key: "umweltalarm",
65+
url: "https://offline-data.cismet.de/offline-data/umweltalarm.zip",
66+
},
67+
],
68+
offlineStyles: [
69+
"https://omt.map-hosting.de/styles/cismet-light/style.json",
70+
"https://omt.map-hosting.de/styles/osm-bright-grey/style.json",
71+
"https://omt.map-hosting.de/styles/brunnen/style.json",
72+
"https://omt.map-hosting.de/styles/kanal/style.json",
73+
"https://omt.map-hosting.de/styles/gewaesser/style.json",
74+
],
75+
realServerFallback: true, //should be true in production
76+
consoleDebug: false,
77+
optional: true,
78+
initialActive: true,
79+
};
80+
81+
const backgroundConfigurations = {
82+
lbk: {
83+
layerkey: "rvrGrau@50|trueOrtho2020@40",
84+
src: "/images/rain-hazard-map-bg/ortho.png",
85+
title: "Luftbildkarte",
86+
},
87+
88+
vectorCityMap2: {
89+
layerkey: "cismetLight",
90+
src: "/images/rain-hazard-map-bg/citymap.png",
91+
title: "Stadtplan",
92+
},
93+
94+
vectorCityMap: {
95+
layerkey: "osmBrightOffline",
96+
src: "/images/rain-hazard-map-bg/citymap.png",
97+
title: "Stadtplan",
98+
},
99+
100+
abkg: {
101+
layerkey: "bplan_abkg@70",
102+
src: "/images/rain-hazard-map-bg/citymap.png",
103+
title: "Amtliche Basiskarte",
104+
},
105+
stadtplan: {
106+
layerkey: "wupp-plan-live@90",
107+
src: "/images/rain-hazard-map-bg/citymap.png",
108+
title: "Stadtplan",
109+
},
110+
nix: {
111+
layerkey: "empty",
112+
src: "/images/rain-hazard-map-bg/citymap.png",
113+
title: "Stadtplan",
114+
},
115+
};
116+
117+
const backgroundModes = [
118+
{
119+
title: "Stadtplan",
120+
mode: "default",
121+
layerKey: "stadtplan",
122+
},
123+
{
124+
title: "Stadtplan (bunt)",
125+
mode: "default",
126+
layerKey: "vectorCityMap",
127+
offlineDataStoreKey: "wuppBasemap",
128+
},
129+
{
130+
title: "Stadtplan (light)",
131+
mode: "default",
132+
layerKey: "vectorCityMap2",
133+
offlineDataStoreKey: "wuppBasemap",
134+
},
135+
136+
{ title: "Luftbildkarte", mode: "default", layerKey: "lbk" },
137+
{ title: "-", mode: "default", layerKey: "nix" },
138+
];
139+
140+
const baseLayerConf = { ...defaultLayerConf };
141+
if (!baseLayerConf.namedLayers.cismetLight) {
142+
baseLayerConf.namedLayers.cismetLight = {
143+
type: "vector",
144+
style: "https://omt.map-hosting.de/styles/cismet-light/style.json",
145+
offlineAvailable: true,
146+
offlineDataStoreKey: "wuppBasemap",
147+
pane: "backgroundvectorLayers",
148+
};
149+
}
150+
if (!baseLayerConf.namedLayers.osmBrightOffline) {
151+
baseLayerConf.namedLayers.osmBrightOffline = {
152+
type: "vector",
153+
style: "https://omt.map-hosting.de/styles/osm-bright-grey/style.json",
154+
offlineAvailable: true,
155+
offlineDataStoreKey: "wuppBasemap",
156+
pane: "backgroundvectorLayers",
157+
};
158+
}
159+
160+
return (
161+
<TopicMapContextProvider
162+
backgroundModes={backgroundModes}
163+
backgroundConfigurations={backgroundConfigurations}
164+
baseLayerConf={baseLayerConf}
165+
offlineCacheConfig={offlineConfig} //will Handle the filling of the offline cache
166+
additionalLayerConfiguration={{
167+
brunnen: {
168+
title: <span>Trinkwasserbrunnen</span>,
169+
initialActive: false,
170+
layer: (
171+
<MapLibreLayer
172+
key={"brunnen"}
173+
style="https://omt.map-hosting.de/styles/brunnen/style.json"
174+
pane="additionalLayers0"
175+
offlineAvailable={true}
176+
offlineDataStoreKey="umweltalarm"
177+
/>
178+
),
179+
offlineDataStoreKey: "umweltalarm",
180+
},
181+
kanal: {
182+
title: <span>Kanalnetz</span>,
183+
initialActive: false,
184+
layer: (
185+
<MapLibreLayer
186+
key={"kanal"}
187+
style="https://omt.map-hosting.de/styles/kanal/style.json"
188+
pane="additionalLayers1"
189+
offlineAvailable={true}
190+
offlineDataStoreKey="umweltalarm"
191+
/>
192+
),
193+
offlineDataStoreKey: "umweltalarm",
194+
},
195+
gewaesser: {
196+
title: <span>Gewässernetz</span>,
197+
initialActive: false,
198+
layer: (
199+
<MapLibreLayer
200+
key={"gewaesser"}
201+
style="https://omt.map-hosting.de/styles/gewaesser/style.json"
202+
pane="additionalLayers2"
203+
offlineAvailable={true}
204+
offlineDataStoreKey="umweltalarm"
205+
/>
206+
),
207+
offlineDataStoreKey: "umweltalarm",
208+
},
209+
}}
210+
>
211+
{/* <ConsoleLog ghostModeAvailable={true} minifyAvailable={true} /> */}
212+
<TopicMapComponent gazData={gazData}>
213+
<FeatureCollection />
214+
</TopicMapComponent>
215+
</TopicMapContextProvider>
216+
);
217+
};

‎src/lib/_stories/complex/TopicMap.stories.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ import MapLibreLayer from "../../vector/MapLibreLayer";
4646
import Button from "react-bootstrap/Button";
4747
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4848
import { faSync } from "@fortawesome/free-solid-svg-icons";
49+
import { TopicMapStylingDispatchContext } from "../../contexts/TopicMapStylingContextProvider";
50+
import ConsoleLog from "../../tools/LogConsole";
4951
export default {
5052
title: storiesCategory + "TopicMapComponent",
5153
};
@@ -65,7 +67,7 @@ export const MostSimpleTopicMapWithGazetteerData = () => {
6567
}, []);
6668
return (
6769
<TopicMapContextProvider>
68-
<TopicMapComponent maxZoom={22} gazData={gazData} />
70+
<TopicMapComponent maxZoom={22} gazData={gazData}></TopicMapComponent>
6971
</TopicMapContextProvider>
7072
);
7173
};
@@ -693,12 +695,16 @@ export const TopicMapWithAdditionalLayers = () => {
693695
clusteringOptions={{
694696
iconCreateFunction: getClusterIconCreatorFunction(30, (props) => props.color),
695697
}}
698+
referenceSystemDefinition={MappingConstants.proj4crs25832def}
699+
mapEPSGCode="25832"
700+
referenceSystem={MappingConstants.crs25832}
696701
clusteringEnabled={true}
697702
additionalLayerConfiguration={{
698703
hillshade: {
699704
title: "Schummerung",
700705
initialActive: false,
701706
layerkey: "hillshade@20",
707+
pane: "additionalLayers1",
702708
},
703709

704710
fernwaerme: {
@@ -724,6 +730,7 @@ export const TopicMapWithAdditionalLayers = () => {
724730
format="image/png"
725731
tiled="true"
726732
transparent="true"
733+
pane="additionalLayers0"
727734
maxZoom={19}
728735
opacity={0.7}
729736
/>

0 commit comments

Comments
 (0)