deltachat · nicodh · Aug 29, 2025 · Sep 8, 2025 · Sep 8, 2025 · Sep 16, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": false
+}
diff --git a/README.md b/README.md
@@ -34,26 +34,69 @@ to create `maps.xdc` file, execute:
 ./create-xdc.sh
 ```
 
-Note, that `maps.xdc` is meant to be used as an integration as described below
-and will work only limited when send to a chat.
+Note, that `maps.xdc` is meant to be used as an integration as described below and will work only limited when send to a chat.
+
+
+## Development Preview with webxdc-dev
+
+Use [webxdc-dev](https://github.com/deltachat/webxdc-dev) to preview the app with multiple simulated instances.
+Run it against the **source directory** (not the `.xdc` file) so that dev-only files are available and with the parameter --no-csp to allow the map tiles to be loaded:
+
+```sh
+webxdc-dev run --no-csp .
+```
+
+
+### GPS Simulation
+
+A GPS sender can be simulated for development purposes.
+`simulate.js` is loaded automatically when running from the directory
+and is excluded from the production `.xdc` build.
+
+1. Open browser DevTools (`F12`)
+2. In the **Console** tab, click the context dropdown (top-left, shows `top`) and select one of the iframe instances (localhost:<port>)
+3. Call `simulateGps()` in the console:
+
+```js
+// Default: "SimUser" near Munich, 30 updates, 1.5s interval
+simulateGps()
+
+// Custom sender
+simulateGps({ name: "Alice", lat: 52.52, lng: 13.405, color: "#e74c3c", steps: 50, intervalMs: 800 })
+
+// Multiple senders at once
+simulateGps({ name: "Bob",   lat: 48.2, lng: 16.37 })
+simulateGps({ name: "Carol", lat: 51.5, lng: -0.12 })
+
+// Stop all running simulations
+stopSimulateGps()
+```
+
+| Option | Default | Description |
+|---|---|---|
+| `name` | `"SimUser"` | Display name shown on the map |
+| `color` | random | Hex color for the track marker |
+| `lat` / `lng` | `48.137` / `11.576` | Starting coordinates |
+| `steps` | `30` | Number of position updates to send |
+| `intervalMs` | `1500` | Milliseconds between updates |
+| `drift` | `0.001` | Max random movement per step (~100 m) |
+
+
 
 
 ## Replace Integrations
 
-Webxdc developers can replace the shipped `maps.xdc` with a tweaked version -
-either use different map sources, different engines
-or add completely new features for tracking, hiking, whatever.
+Webxdc developers can replace the shipped `maps.xdc` with a custom version.
 
 For that purpose:
 
 - In `manifest.toml`, add the entry `request_integration = map`
   (this is already true if you use this repository as a template)
 
-- Attach the `.xdc` to the "Saved Messages" chat of Delta Chat 1.50.0 or newer.
-  If things work out,
-  the summary will read "🌍 Used as map. Delete to use default"
+- Attach the `.xdc` to the "Saved Messages" chat of Delta Chat and forward it again to "Saved messages".
+  If things work out, the summary will read "🌍 Used as map. Delete to use default"
 
-When now tapping the map symbol _inside any chat_,
+When now tapping the generic map symbol _inside any chat_,
 the map replacement is started instead of the shipped one.
 
 Note, that this has to be done locally.

diff --git a/create-xdc.sh b/create-xdc.sh
@@ -14,7 +14,7 @@ case "$1" in
 esac
 
 rm "$PACKAGE_NAME.xdc" 2> /dev/null
-zip -9 --recurse-paths "$PACKAGE_NAME.xdc" * --exclude LICENSE README.md webxdc.js webxdc.d.ts icon.png "*screenshot*" "*marker-*png" "*-src*" "*.map" "*.sh" "*.xdc" *.DS_Store
+zip -9 --recurse-paths "$PACKAGE_NAME.xdc" * --exclude LICENSE README.md webxdc.js webxdc.d.ts simulate.js "*screenshot*" "*marker-*png" "*-src*" "*.map" "*.sh" "*.xdc" *.DS_Store
 
 echo "success, archive contents:"
 unzip -l "$PACKAGE_NAME.xdc"
@@ -25,5 +25,3 @@ size=$(wc -c < "$PACKAGE_NAME.xdc")
 if [ $size -ge $MAXSIZE ]; then
     echo "WARNING: package size exceeded the limit ($size > $MAXSIZE)"
 fi
-
-cp $PACKAGE_NAME.xdc ../../deltachat-ios/deltachat-ios/Assets
diff --git a/icon.png b/icon.png
diff --git a/images/layers.svg b/images/layers.svg
diff --git a/images/settings.svg b/images/settings.svg
diff --git a/index.html b/index.html
@@ -1,126 +1,87 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
-    <script src="webxdc.js"></script>
-    <link rel="stylesheet" href="leaflet.css"/>
-    <script src="leaflet.js"></script>
-    <style type="text/css">
-        body {
-            padding: 0;
-            margin: 0;
-        }
-
-        html, body, #map {
-            height: 100%;
-            width: 100vw;
-        }
-
-        #map {
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-
-        .poi-tooltip {
-            font-weight: bold;
-            font-size: 15px;
-            color: #ff3b30;
-            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
-            background: transparent;
-            box-shadow: none;
-            border: none;
-        }
-        .ppl-tooltip {
-            text-align: right;
-            font-size: 15px;
-            color: white;
-            text-shadow: none;
-            background: transparent;
-            box-shadow: none;
-            border: none;
-        }
-        .ppl-name {
-            padding: 0 5px;
-            font-weight: bold;
-            border: 1px solid white;
-            border-radius: 10px;
-        }
-        .ppl-time {
-            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff !important;
-            position: relative;
-            color: #333;
-            font-size: 12px;
-            top: -7px;
-        }
-        .ppl-online {
-            height: 10px; width: 10px;
-            border: 1px solid white;
-            border-radius: 50%;
-            display: inline-block;
-            position: relative; right: -4px; top: -14px;
-            background-color: #34c759;
-        }
-        .poi-tooltip::before, .ppl-tooltip::before {
-            border: none;
-        }
-
-        .leaflet-control-scale-line {
-            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
-            background: rgba(255, 255, 255, 0.4);
-        }
-
-        .leaflet-control-attribution {
-            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff !important;
-	        background: transparent !important;
-	        padding: 2px 6px;
-        }
-
-        .leaflet-top {
-            top: 45%;
-            background: transparent !important;
-        }
-        .leaflet-control-zoom {
-            border: 0 !important;
-        }
-        .leaflet-control-zoom-in, .leaflet-control-zoom-out {
-            color: #333 !important;
-            font-size: 30px !important;
-        }
-        .leaflet-bar a {
-            border-radius: 50% !important;
-            background: rgba(255, 255, 255, 0.8);
-            padding: 10px;
-            margin: 10px;
-        }
-
-        .formx {
-            text-align: center;
-        }
-        .formx input, .formx button {
-            text-align: center;
-            font-size: 16px;
-            border: 1px solid #BBB;
-            border-radius: 8px;
-        }
-        .formx button {
-            margin-top: 4px;
-
-            background-color: transparent;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="map"></div>
-    <script src="index.js"></script>
-</body>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
+        />
+        <script src="webxdc.js"></script>
+        <link rel="stylesheet" href="leaflet.css" />
+        <script src="leaflet.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    </head>
 
+    <body>
+        <div id="map"></div>
+        <!-- Toggle button for overlay -->
+        <button
+            class="toggle-overlay"
+            id="toggleOverlay"
+            title="Toggle contacts list"
+        >
+            👥
+        </button>
+        <!-- POI toggle button -->
+        <button
+            class="toggle-overlay poi-toggle"
+            id="togglePoiOverlay"
+            title="Toggle POI list"
+        >
+            📍
+        </button>
+        <!-- Contacts overlay -->
+        <div class="overlay" id="contactsOverlay">
+            <h3>Contacts</h3>
+            <div id="contactsList">
+                <div class="no-items">No contacts yet</div>
+            </div>
+        </div>
+        <!-- POI overlay -->
+        <div class="overlay poi-overlay" id="poiOverlay">
+            <h3>Points of Interest</h3>
+            <div id="poiList">
+                <div class="no-items">No POIs yet</div>
+            </div>
+        </div>
+        <!-- Settings button -->
+        <button
+            class="settings-button"
+            id="settingsButton"
+            title="Settings"
+        >
+            <img src="images/settings.svg" alt="Settings" />
+        </button>
+        <!-- Settings overlay -->
+        <div class="overlay settings-overlay" id="settingsOverlay">
+            <h3>Settings</h3>
+            <div class="settings-content">
+                <div class="setting-item">
+                    <label for="showContactToggle">Show Contact Toggle</label>
+                    <input type="checkbox" id="showContactToggle" />
+                </div>
+                <div class="setting-item">
+                    <label for="showPoiToggle">Show POI Toggle</label>
+                    <input type="checkbox" id="showPoiToggle" />
+                </div>
+                <div class="setting-item">
+                    <label for="mapTileServiceSelector">Map Style</label>
+                    <select id="mapTileServiceSelector"></select>
+                </div>
+            </div>
+        </div>
+        <div class="confirm-dialog-backdrop" id="confirmDialogBackdrop">
+            <div class="confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="confirmDialogText">
+                <p class="confirm-dialog-text" id="confirmDialogText"></p>
+                <div class="confirm-dialog-actions">
+                    <button class="confirm-dialog-button confirm-dialog-cancel" id="confirmDialogCancel">Cancel</button>
+                    <button class="confirm-dialog-button confirm-dialog-delete" id="confirmDialogDelete">Delete</button>
+                </div>
+            </div>
+        </div>
+        <script src="mapServices.js"></script>
+        <!-- for development simulate gps data-->
+        <!--<script src="simulate.js"></script>-->
+        <script src="index.js"></script>
+    </body>
 </html>