Skip to content

Commit 67b6578

Browse files
skerbisskerbis
committed
feat: Demo-Seite in 4 Subpages aufteilen (Punkt-Notation)
- Demo-Subpages in korrekter REDAXO-Punkt-Notation: demo.overview.php etc. - overview: Intro, Frontend-Einbindung, Koordinaten-Picker, Attribut-Referenz - basic: Grundkarten & Routing (Beispiele 1-6) - nearby: Umgebungssuche ISOLIERT (Beispiele 7a, 7b) - verhindert simultane Overpass-Ladefehler - advanced: Custom Marker, GeoJSON, Wetter, 3D, Ladestationen, Snippets - package.yml: Demo-Subpages registriert - i18n: Keys fuer alle Subpages (de_de + en_gb)
1 parent 39f763f commit 67b6578

8 files changed

Lines changed: 1814 additions & 1774 deletions

File tree

‎lang/de_de.lang‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
vector_maps_title = Vector Maps
22
vector_maps_demo = Demo & Test
3+
vector_maps_demo_overview = Übersicht
4+
vector_maps_demo_basic = Grundkarten & Routing
5+
vector_maps_demo_nearby = Umgebungssuche
6+
vector_maps_demo_advanced = Erweiterte Features
37
vector_maps_themes = Themes
48
vector_maps_demo_info = Auf dieser Seite kann der Vector Maps Picker und das native 3D-Rendering getestet werden.
59
vector_maps_settings = Einstellungen

‎lang/en_gb.lang‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
vector_maps_title = Vector Maps
22
vector_maps_demo = Demo & 3D
3+
vector_maps_demo_overview = Overview
4+
vector_maps_demo_basic = Basic Maps & Routing
5+
vector_maps_demo_nearby = Nearby Search
6+
vector_maps_demo_advanced = Advanced Features
37
vector_maps_themes = Themes
48

59
vector_maps_settings_frontend_heading = Frontend Integration

‎package.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ page:
1616
subPath: README.md
1717
demo:
1818
title: 'translate:vector_maps_demo'
19+
subpages:
20+
overview:
21+
title: 'translate:vector_maps_demo_overview'
22+
basic:
23+
title: 'translate:vector_maps_demo_basic'
24+
nearby:
25+
title: 'translate:vector_maps_demo_nearby'
26+
advanced:
27+
title: 'translate:vector_maps_demo_advanced'
1928
themes:
2029
title: 'translate:vector_maps_themes'
2130
settings:

‎pages/demo.advanced.php‎

Lines changed: 1219 additions & 0 deletions
Large diffs are not rendered by default.

‎pages/demo.basic.php‎

Lines changed: 294 additions & 0 deletions
Large diffs are not rendered by default.

‎pages/demo.nearby.php‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<?php
2+
// Umgebungssuche - Beispiele 7a, 7b
3+
?>
4+
<div class="panel panel-default">
5+
<div class="panel-heading">
6+
<h3 class="panel-title">
7+
<i class="rex-icon rex-icon-map-marker"></i>
8+
POI-Umgebungssuche <small class="text-muted" style="font-size:12px">&mdash; Overpass API via REDAXO-Proxy</small>
9+
</h3>
10+
</div>
11+
<div class="panel-body">
12+
<!-- BEISPIEL 7: Umgebungssuche -->
13+
<div class="row" style="margin-bottom:8px">
14+
<div class="col-md-6">
15+
<h4 style="margin-top:0">7a. Umgebungssuche &ndash; Ladestationen <span class="label label-info">nearby via Overpass API</span></h4>
16+
<p class="text-muted" style="font-size:13px;margin-bottom:8px">Sucht E-Ladestationen im Umkreis von 8&thinsp;km um Rheinberg. Daten kommen aus OpenStreetMap via Overpass API &ndash; proxied und DSGVO-konform.</p>
17+
<pre style="font-size:12px">&lt;vectormap
18+
lat="51.5534"
19+
lng="6.5946"
20+
zoom="12"
21+
height="360"
22+
nearby="amenity=charging_station"
23+
nearby-radius="8000"
24+
nearby-label="Ladestation"&gt;
25+
&lt;/vectormap&gt;</pre>
26+
<vectormap
27+
lat="51.5534"
28+
lng="6.5946"
29+
zoom="12"
30+
height="360"
31+
nearby="amenity=charging_station"
32+
nearby-radius="8000"
33+
nearby-label="Ladestation">
34+
</vectormap>
35+
</div>
36+
<div class="col-md-6">
37+
<h4 style="margin-top:0">7b. Supermarkt-Suche + Nutzerstandort <span class="label label-success">nearby-locate</span></h4>
38+
<p class="text-muted" style="font-size:13px;margin-bottom:8px">Mit <code>nearby-locate</code> wird der Browser-Standort des Nutzers als Suchzentrum genutzt. Superm&auml;rkte + Discounter im 7&thinsp;km Umkreis. Achtung: Geolocation ben&ouml;tigt <strong>HTTPS</strong> im Produktionsbetrieb; bei Ablehnung wird Duisburg HBF als Fallback-Mittelpunkt verwendet.</p>
39+
<pre style="font-size:12px">&lt;vectormap
40+
lat="51.4298"
41+
lng="6.7742"
42+
zoom="13"
43+
height="360"
44+
nearby="shop=supermarket|shop=discounter"
45+
nearby-radius="7000"
46+
nearby-locate&gt;
47+
&lt;/vectormap&gt;</pre>
48+
<vectormap
49+
lat="51.4298"
50+
lng="6.7742"
51+
zoom="13"
52+
height="360"
53+
nearby="shop=supermarket|shop=discounter"
54+
nearby-radius="7000"
55+
nearby-locate>
56+
</vectormap>
57+
<p class="text-muted" style="font-size:12px;margin-top:4px">Browser fragt nach Standort-Berechtigung &mdash; bei Ablehnung oder HTTP-Kontext wird der Karten-Mittelpunkt (<code>lat/lng</code>) als Fallback genutzt. Kompatibel mit allen Overpass-Filtern (<a href="https://taginfo.openstreetmap.org/" target="_blank" rel="noopener">taginfo.openstreetmap.org</a>).</p>
58+
</div>
59+
</div>
60+
61+
</div>
62+
</div>

‎pages/demo.overview.php‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<?php
2+
// Vektorkarten Demo - Uebersicht & Einbindung
3+
?>
4+
<?php
5+
// no addon var needed, all text is hardcoded for simplicity
6+
?>
7+
<div class="panel panel-default">
8+
<div class="panel-heading">
9+
<h3 class="panel-title">
10+
<i class="rex-icon rex-icon-map"></i>
11+
Vektorkarten Demo
12+
<span class="label label-success" style="margin-left:6px;font-weight:normal;font-size:11px">MapLibre GL JS</span>
13+
<span class="label label-default" style="margin-left:4px;font-weight:normal;font-size:11px">OpenFreeMap</span>
14+
</h3>
15+
</div>
16+
<div class="panel-body">
17+
18+
<div class="row" style="margin-bottom:16px">
19+
<div class="col-md-4">
20+
<div class="alert alert-success" style="margin:0">
21+
<strong>Vorteile von Vektorkarten</strong>
22+
<ul style="margin:8px 0 0 0;padding-left:18px;font-size:13px">
23+
<li>Stufenlos zoombar ohne Pixelrauschen</li>
24+
<li>Client-seitig gestylte Vektorkarten</li>
25+
<li>Viel kleinere Datenmengen als Raster</li>
26+
<li>Rotation, Pitch &amp; 3D-Gebäude möglich</li>
27+
</ul>
28+
</div>
29+
</div>
30+
<div class="col-md-4">
31+
<div class="alert alert-info" style="margin:0">
32+
<strong>DSGVO-konformer Proxy</strong>
33+
<ul style="margin:8px 0 0 0;padding-left:18px;font-size:13px">
34+
<li>Kein direkter Kontakt zu externen Servern</li>
35+
<li>Alle Tiles laufen durch lokalen PHP-Proxy</li>
36+
<li>IP-Adressen der Besucher bleiben privat</li>
37+
<li>Server-seitiges Caching der Tile-Daten</li>
38+
</ul>
39+
</div>
40+
</div>
41+
<div class="col-md-4">
42+
<div class="alert alert-warning" style="margin:0">
43+
<strong>Voraussetzungen</strong>
44+
<p style="margin:8px 0 0 0;font-size:13px">
45+
MapLibre GL JS benötigt WebGL-Unterstützung im Browser.
46+
Alle Kacheln (<code>.pbf</code>) werden via REDAXO-Proxy
47+
von OpenFreeMap geladen und gecacht.
48+
</p>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div style="margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap">
54+
<div>
55+
<label style="font-weight:bold;margin-right:8px;margin-bottom:0">Stil:</label>
56+
<div class="btn-group" role="group">
57+
<button type="button" class="btn btn-sm btn-primary vm-demo-style-btn active" data-style="liberty">Liberty</button>
58+
<button type="button" class="btn btn-sm btn-default vm-demo-style-btn" data-style="bright">Bright</button>
59+
<button type="button" class="btn btn-sm btn-default vm-demo-style-btn" data-style="positron">Positron</button>
60+
<button type="button" class="btn btn-sm btn-default vm-demo-style-btn" data-style="satellite" title="ESRI World Imagery &ndash; kein API-Key">&#x1F6F0; Satellit</button>
61+
</div>
62+
</div>
63+
<div>
64+
<label style="font-weight:bold;margin-right:8px;margin-bottom:0">Sprache:</label>
65+
<div class="btn-group" role="group">
66+
<button type="button" class="btn btn-xs btn-primary vm-demo-lang-btn active" data-lang="de" title="Deutsch">DE</button>
67+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="en" title="English">EN</button>
68+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="fr" title="Français">FR</button>
69+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="es" title="Español">ES</button>
70+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="it" title="Italiano">IT</button>
71+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="nl" title="Nederlands">NL</button>
72+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="ja" title="日本語">JA</button>
73+
<button type="button" class="btn btn-xs btn-default vm-demo-lang-btn" data-lang="ar" title="العربية">AR</button>
74+
</div>
75+
</div>
76+
<div>
77+
<label style="font-weight:bold;margin-right:8px;margin-bottom:0">Ansicht:</label>
78+
<button type="button" class="btn btn-sm btn-primary active" id="vm-demo-3d-toggle" title="3D-Gebäude an/aus">
79+
<i class="rex-icon rex-icon-layers"></i> 3D Gebäude
80+
</button>
81+
</div>
82+
<div>
83+
<label style="font-weight:bold;margin-right:8px;margin-bottom:0">Theme:</label>
84+
<div class="btn-group" role="group">
85+
<button type="button" class="btn btn-xs btn-primary vm-demo-theme-btn active" data-theme="none">&mdash; Kein Theme</button>
86+
<button type="button" class="btn btn-xs btn-default vm-demo-theme-btn" data-theme="dark">Dark</button>
87+
<button type="button" class="btn btn-xs btn-default vm-demo-theme-btn" data-theme="warm">Warm</button>
88+
<button type="button" class="btn btn-xs btn-default vm-demo-theme-btn" data-theme="mono">Mono</button>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<div id="vm-demo-map" style="width:100%;height:500px;border-radius:4px;overflow:hidden;"></div>
94+
95+
<p class="text-muted" style="margin-top:8px;font-size:12px">
96+
OpenFreeMap &middot; DSGVO-konform via REDAXO-Proxy &middot; kein API-Key erforderlich
97+
</p>
98+
99+
</div>
100+
</div>
101+
102+
<!-- ================================================================
103+
FRONTEND-EINBINDUNG
104+
================================================================ -->
105+
<div class="panel panel-info">
106+
<div class="panel-heading">
107+
<h3 class="panel-title">
108+
<i class="rex-icon rex-icon-code"></i>
109+
Frontend-Einbindung &mdash; So kommt die Karte auf die Website
110+
</h3>
111+
</div>
112+
<div class="panel-body">
113+
114+
<div class="alert alert-success" style="margin-bottom:20px">
115+
<strong>Automatisch aktiv:</strong> Nach der Installation werden CSS und JS automatisch in jede Frontend-Seite geladen &mdash; du musst nichts weiter tun.
116+
Einfach <code>&lt;vectormap&gt;</code> in Modul-Output oder Template schreiben, fertig.
117+
</div>
118+
119+
<div class="row">
120+
<div class="col-md-6">
121+
<h4 style="margin-top:0">Schritt 1: Im Modul-Input (Backend)</h4>
122+
<p class="text-muted" style="font-size:13px">Koordinatenfeld mit automatischem Karten-Picker:</p>
123+
<pre style="font-size:12px">&lt;div class="form-group"&gt;
124+
&lt;label&gt;Koordinaten&lt;/label&gt;
125+
&lt;input type="text"
126+
name="REX_INPUT_VALUE[1]"
127+
value="REX_VALUE[1]"
128+
class="form-control"
129+
data-vector-picker="1"
130+
placeholder="lat,lng"&gt;
131+
&lt;/div&gt;</pre>
132+
<p class="text-muted" style="font-size:12px">Der Button neben dem Feld &ouml;ffnet die Kartenauswahl mit Adresssuche.</p>
133+
</div>
134+
<div class="col-md-6">
135+
<h4 style="margin-top:0">Schritt 2: Im Modul-Output (Frontend)</h4>
136+
<p class="text-muted" style="font-size:13px">Karte ausgeben &mdash; kein PHP, kein JS:</p>
137+
<pre style="font-size:12px">&lt;vectormap
138+
lat="REX_VALUE[1]"
139+
lng="REX_VALUE[2]"
140+
zoom="14"
141+
height="400px"
142+
markers='[{
143+
"lat":REX_VALUE[1],
144+
"lng":REX_VALUE[2],
145+
"popup":"Unser Standort"
146+
}]'&gt;
147+
&lt;/vectormap&gt;
148+
149+
&lt;!-- Alternativ: lat,lng aus einem Feld --&gt;
150+
&lt;?php
151+
[$lat,$lng] = explode(',', 'REX_VALUE[1]' . ',0');
152+
?&gt;
153+
&lt;vectormap lat="&lt;?= (float)$lat ?&gt;"
154+
lng="&lt;?= (float)$lng ?&gt;"
155+
zoom="14"&gt;
156+
&lt;/vectormap&gt;</pre>
157+
</div>
158+
</div>
159+
160+
<hr>
161+
162+
<h4>Manuell einbinden (falls Auto-Loading deaktiviert)</h4>
163+
<p class="text-muted" style="font-size:13px">
164+
Wenn das automatische Laden unter <a href="<?= rex_url::backendPage('vector_maps/settings') ?>">Einstellungen</a> deaktiviert ist,
165+
die Assets manuell im Template einf&uuml;gen:
166+
</p>
167+
<?php $vmAddon = rex_addon::get('vector_maps'); ?>
168+
<pre style="font-size:12px">&lt;!DOCTYPE html&gt;
169+
&lt;html&gt;
170+
&lt;head&gt;
171+
&lt;!-- 1. MapLibre GL CSS --&gt;
172+
&lt;link rel="stylesheet" href="&lt;?= $vmAddon-&gt;getAssetsUrl('maplibre/maplibre-gl.css') ?&gt;"&gt;
173+
&lt;!-- 2. Vector Maps Styles --&gt;
174+
&lt;link rel="stylesheet" href="&lt;?= $vmAddon-&gt;getAssetsUrl('build/vectormaps.css') ?&gt;"&gt;
175+
&lt;/head&gt;
176+
&lt;body&gt;
177+
178+
&lt;vectormap lat="51.43" lng="6.77" zoom="13"&gt;&lt;/vectormap&gt;
179+
180+
&lt;!-- 3. MapLibre GL JS (defer) --&gt;
181+
&lt;script defer src="&lt;?= $vmAddon-&gt;getAssetsUrl('maplibre/maplibre-gl.js') ?&gt;"&gt;&lt;/script&gt;
182+
&lt;!-- 4. Vector Maps Web Component (defer) --&gt;
183+
&lt;script defer src="&lt;?= $vmAddon-&gt;getAssetsUrl('build/vectormaps.js') ?&gt;"&gt;&lt;/script&gt;
184+
&lt;/body&gt;
185+
&lt;/html&gt;</pre>
186+
187+
<div class="alert alert-info" style="margin-bottom:0">
188+
<strong>CSP-Hinweis:</strong> Falls eine Content-Security-Policy aktiv ist, gen&uuml;gt
189+
<code>worker-src blob:</code> &mdash; alle Tile-Anfragen laufen &uuml;ber den REDAXO-Proxy,
190+
keine externen <code>connect-src</code>-Eintr&auml;ge n&ouml;tig.
191+
</div>
192+
193+
</div>
194+
</div>
195+
196+
<div class="panel panel-default">
197+
<div class="panel-heading">
198+
<h3 class="panel-title">
199+
<i class="rex-icon rex-icon-edit"></i>
200+
Koordinaten-Picker Demo
201+
</h3>
202+
</div>
203+
<div class="panel-body">
204+
<p>Klicke auf den Button, um den Koordinaten-Picker zu öffnen. Die gewählten Koordinaten werden ins Textfeld übernommen.</p>
205+
206+
<div class="form-group">
207+
<label for="vm-demo-picker-input">Koordinaten (Lat,Lng)</label>
208+
<input type="text"
209+
id="vm-demo-picker-input"
210+
class="form-control"
211+
placeholder="51.165691,10.451526"
212+
data-vector-picker="1">
213+
<p class="help-block">Wähle einen Ort auf der Karte – die Koordinaten werden automatisch eingetragen.</p>
214+
</div>
215+
216+
</div>
217+
</div>
218+
219+
<!-- ================================================================
220+
<vectormap> WEB COMPONENT
221+
================================================================ -->

0 commit comments

Comments
 (0)