Karten wie Google Maps selbst hosten?

tiermutter

tiermutter

Well-known member
Moin,

das Forum zielt zwar nicht wirklich auf sowas ab, ein bisschen passt es aber trotzdem:

Ich suche nach einer Möglichkeit Karten wie Google Maps selbst zu hosten.
Hintergrund ist der, dass ich gerne eine Karte (ganz Deutschland) haben möchte, auf der wir auf der Arbeit alle Standorte mit Wartungskunden eintragen können und auf einen Blick sehen, wo genau sich diese örtlich befinden. Das könnte quasi über POI realisiert werden, wobei man optisch direkt unterschiedliche Typen erkennen muss. Momentan machen wir das über ein PDF in der die Karte hinterlegt ist mit entsprechenden Symbolen. Das ist allerdings sehr schlecht skalierbar und Ballungsgebiete sind sehr unübersichtlich. Wir arbeiten auch schon mit zwei Karten, um es etwas übersichtlicher zu halten...

Anbei ein Beispiel (hier ist kein Ballungsgebiet enthalten):
1637326386482.png

Wichtig ist, dass der Zugriff zumindest aus dem LAN von mehreren Rechnern möglich ist, eine Freigabe im WAN ist nicht vorgesehen.
Kennt da jemand zufällig eine Möglichkeit?

Danke und Cheers!
 
Das habe ich vor etwa 5 Jahren schonmal uberlegt. Ich hätte auch gerne meine eigenen Karten mit GPS-Tracking. Also ein selbstgehostetes Google Maps. 😀
 
Ist denn irgendwas in Richtung firmeneigener Webserver vorhanden? Da es ja nunmal irgendwo abgelegt werden muss - mindestens eine html-Datei sowie natürlich die Mapdateien - wäre das... ich sag mal von Vorteil.
 
Es bestünden schon ein paar Möglicheiten.
Hosting auf der QNAP (das will man nicht)
Hosting auf der Synology (kann man machen)
oder eine Server-VM auf Proxmox (wäre glaube ich am besten).
 
@rednag in Kombination mit GPS habe ich das noch nicht selber eingesetzt, scheint aber auch relativ problemlos möglich zu sein: https://leafletjs.com/examples/mobile/

Müsstest dann halt von extern drauf zugreifen können, auf das wo-auch-immer Du es hosten würdest. Für kleine Versuche kann man auch die Tiles von openstreetmap.de selber verwenden, widerspricht dann aber natürlich dem Ansatz "selber gehostet".

Einfach mal das verlinkte Beispiel vom Smartphone aus aufrufen, das sollte dann schon laufen, direkt in der Map oben.
 
Also... dafür dass ich dachte, dass das Thema hier nicht so passt, sind ja doch allerhand Antworten gekommen und es scheint, als hätten schon einige von euch ähnliche Gedanken gehabt... danke bis hierhin schonmal!
Einiges muss ich mir erst noch anschauen und mich reinfuchsen, das wird heute nichts, zumal es ja eigentlich Arbeitszeit wäre ;)
Nival schrieb:
Ist denn irgendwas in Richtung firmeneigener Webserver vorhanden?
Zum Vergrößern anklicken....
Webserver vorhanden? Nein. Aber es sollte kein Problem sein einen aufzusetzen, egal ob VM oder dedizierter Rechner, das Ding würde ich selbst auf nem QNAP Webserver (oder VM auf QNAP) laufen lassen :)
 
tiermutter schrieb:
Aber es sollte kein Problem sein einen aufzusetzen
Zum Vergrößern anklicken....
Na dann, kein Ding. Je nachdem wie komfortabel es sein soll... also die Tiles, die Map-Stücke, die brauchst Du auf jeden Fall wenn es lokal laufen soll.

Aufgebaut sind diese Map-Stücke nach Zoomstufe/X-Koordinate/Y-Koordinate, wobei die ersten beiden Punkte sich in der Ordnerstruktur abzeichnen, der letzte Punkt im Dateinamen. Wenn ich von Zoomstufe 6 ein kleines Stück in Deutschland reinzoome sieht das z.B. so aus (Ausschnitt):
1637397746488.png
Zoomstufe 7, X 69 und 70, jeweils Y 42.
Diese Struktur müsstest Du dann lokal auf dem Server abbilden und ansprechen können, z.B. mit sowas wie http://tiles.server.local => sollte auf den Ordner zeigen, der Zoomstufe/X/Y enthält. Die Tiles sollten sich bei dem Link von @blurrrr herunterladen lassen (nicht getestet, da Account notwendig).

Wenn es komfortabel mit Interface und allem sein soll, dann bräuchtest Du an dieser Stelle eine Person, die zumindest ein paar Programmierkenntnisse hat. Wenn schnell und dreckig, dafür aber funktional ausreicht, dann braucht es nur eine Person, die mit Kommas und Anführungsstrichen sauber arbeitet und ein wenig fleissig ist - ich konzentriere mich mal eben auf letzteres.

Einmal der voll funktionale Code, den so in eine index.html kopieren und im Browser aufrufen:
HTML: 
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <style>
    html, body {height:100%; margin:0px;}
    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

  <div id="map"></div>

  <script type="text/javascript">
    var map;

    function initMap() {
      map = new L.Map('map');
      var tile_url = 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png';
      //Tiles runterladen, dann den Pfad anpassen, z.B. http://tiles.server.local/{z}/{x}/{y}.png
      var copyright = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(tile_url, { minZoom: 5, maxZoom: 13, attribution: copyright });
      map.setView(new L.LatLng(51.2253467, 9.1186982), 6);
      map.addLayer(osm);
    }

    function setPoints() {

      //Hier die Daten ergänzen
      var map_data = [
        [51.4467882, 6.5878486, "Duisburg", "#ff0000", "#000"],
        [48.155004, 11.4717963, "München", "#00ff00", "#ff0000"],
        [48.779301, 9.1071757, "Stuttgart", "#0000ff", "#000"],
        [51.2385861, 6.6742683, "Düsseldorf", "#00ff00", "#fff"],
      ];


      for (var i = 0; i < map_data.length; i++) {
        var entry = map_data[i];
        
        //Als circle darstellen
        var circle = L.circle([entry[0], entry[1]], { color: entry[4], fillColor: entry[3], radius: 10000 }).addTo(map).bindPopup(entry[2]);
        
        //oder mit marker, ist genauer (um https://leafletjs.com/reference.html#icon ergänzen für verschiedene Optik):
        var marker = L.marker([entry[0], entry[1]]).addTo(map).bindPopup(entry[2]);
      }
    }
    initMap();
    setPoints();
  </script>

</body>
</html>

Ergebnis sollte so aussehen:
1637399136331.png
bis auf, dass ich Duisburg beispielhaft schon angeklickt habe.

Die Koordinaten der Standorte wären dann mit Google rauszufinden, Beispiel:
HTML: 
[51.4467882, 6.5878486, "Duisburg", "#ff0000", "#000"],
nach Duisburg gegoogelt:
1637399445626.png

Der Rest hängt dann in erster Linie davon ab, wie weit Du reinzoomen möchtest. Wenn Städte reichen, dann bieten sich die circle an und Du kannst, wie in dem Beispiel, mit Farben arbeiten (und die marker rauslassen, hier ist es ja nun grade doppelt). Wenn es genauer sein soll, dann überspannen die circle zu viel Raum (sofern sie auch bei ganz Deutschland sichtbar sein sollen), dann solltest Du marker verwenden und eben die Icons anpassen, wie in dem Code auch angemerkt. In dem Datensatz dann eben die beiden Einträge für die Farbe rausnehmen und dafür den Iconnamen hinterlegen.

Das wärs dann auch schon, die index.html mit dem angepassten Datensatz sowie der wunschgemäßen Darstellung auf den Webserver werfen, die Tiles runterladen und die URL anpassen, die Leaflet-Dateien runterladen, ebenfalls auf den Server packen und die URLs anpassen, fertig. Markercluster könnte man zusätzlich noch integrieren, dazu steht der Link ja schon oben.
 
Das sieht aif jeden Fall schonmal sehr nach dem aus, was ich suche :)
Die Problematik ist nur, dass die einzelnen Marker zumindest in der Farben von Jedermann direkt in der Karte änderbar sein müssten (Wartung offen/ erledigt).
 
Und da das vermutlich auch für alle anderen ersichtlich sein soll genügt es nicht, wenn diese Einstellungen lokal (Cookie / Local Storage) gespeichert werden, richtig?

An der Stelle braucht es dann wohl eine Datenbank oder mindestens eine CSV-Datei dahinter und tatsächlich ein wenig Programmierarbeit. Die Variante mit der Datenbank wäre mehr Arbeit, da Du Dich ausserdem in SQL einarbeiten müsstest (es sei denn, Du bist darin bereits geübt), aber die Variante mit der CSV-Datei sollte nur dann gewählt werden, wenn die Nutzer nicht gleichzeitig damit arbeiten, andernfalls könnten sie ihre Änderungen dümmstenfalls überschreiben wenn sie im genau gleichen Moment etwas ändern.
 
tiermutter schrieb:
Die Problematik ist nur, dass die einzelnen Marker zumindest in der Farben von Jedermann direkt in der Karte änderbar sein müssten (Wartung offen/ erledigt).
Zum Vergrößern anklicken....
Narrens... äh, ich meine usersicher wäre z.B. sowas:
1637411052957.png
1637411132069.png
HTML: 
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0px;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <div id="map"></div>

  <script type="text/javascript">
    var map;

    function initMap() {
      map = new L.Map('map');
      var tile_url = 'https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png';
      //Tiles runterladen, dann den Pfad anpassen, z.B. http://tiles.server.local/{z}/{x}/{y}.png
      var copyright = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(tile_url, { minZoom: 5, maxZoom: 13, attribution: copyright });
      map.setView(new L.LatLng(51.2253467, 9.1186982), 6);
      map.addLayer(osm);
    }

    function setPoints() {

      //Hier die Daten ergänzen
      var map_data = [
        [51.4467882, 6.5878486, "Duisburg", "123", "0"],
        [48.155004, 11.4717963, "München", "456", "0"],
        [48.779301, 9.1071757, "Stuttgart", "789", "1"],
        [51.2385861, 6.6742683, "Düsseldorf", "159", "1"],
      ];

      for (var i = 0; i < map_data.length; i++) {
        var entry = map_data[i];

        //Farbe abhängig von Status
        if (entry[4] == "0") { var color = "#00ff00"; }
        else { var color = "#ff0000"; }

        //Als circle darstellen
        var circle = L.circle([entry[0], entry[1]], { color: color, fillColor: color, radius: 10000 }).addTo(map).bindPopup(genInfo(entry));

        //oder mit marker, ist genauer (um https://leafletjs.com/reference.html#icon ergänzen für verschiedene Optik):
        var marker = L.marker([entry[0], entry[1]]).addTo(map).bindPopup(genInfo(entry));
      }
    }

    $("body").on("click", ".m_open", function () {
      var id = $(this).parents("fieldset").attr("attr-id");
      alert(id + " wurde auf offen gesetzt");
    });

    $("body").on("click", ".m_done", function () {
      var id = $(this).parents("fieldset").attr("attr-id");
      alert(id + " wurde auf erledigt gesetzt!");
    });

    function genInfo(entry) {
      var info = '';
      info += '<fieldset attr-id="' + entry[3] + '">';
      info += '<legend>Wartung ' + entry[2] + ': </legend>';
      info += '<label for="maintenance-open-' + entry[3] + '">offen</label>';
      info += '<input type="radio" name="maintenance-" id="maintenance-open-' + entry[3] + '" class = "m_open"' + (entry[4] == "0" ? '>' : ' checked >');
      info += '<label for="maintenance-done-' + entry[3] + '">erledigt</label>';
      info += '<input type="radio" name="maintenance-" id="maintenance-done-' + entry[3] + '" class = "m_done"' + (entry[4] == "1" ? '>' : ' checked >');
      info += '</fieldset>';
      return info;
    }

    initMap();
    setPoints();
  </script>

</body>

</html>
In die Daten noch eine ID sowie 0 oder 1 für Wartung gesetzt, Farbe abhängig von Status, für den User pro Standort nur die Wahl, eines von beidem anzuklicken. Der Klick wird abgefangen, müsste dann halt noch verarbeitet bzw. an den Server geschickt werden: https://api.jquery.com/jquery.get/ - danach einfach Seite automatisch neu laden oder die Farbänderung zusätzlich einprogrammieren.

Die serverseitige Verarbeitung dann halt mittels PHP und wie erwähnt wahlweise DB oder CSV-Datei, PHP würde dann auch das generieren der Daten bei Aufruf übernehmen müssen.
 
Ich habe jetzt via Mobile den Link aus #10 aufgerufen. Klappt wunderbar und ist sehr genau. Wie geht's weiter? 😃
 
@rednag Für "Deinen" Anwendungsfall: Vergiss es einfach, ausser natürlich Du kannst noch die passende App dazu entwickeln (die GPS-Daten müssen ja auch irgendwie zum Server geschickt werden) 😜 Einfacher wäre vermutlich einfach traccar samt fertiger Client-App dafür zu nutzen (https://www.traccar.org/client/), falls das Szenario wie gewünscht unterstützt wird... ☺️
 
Das wäre in der Tat eine Alternative. Also Traccar und nicht ne App programmieren. 😀
Aber die Installation ist ja auch wieder nicht so ohne. Noch dazu wo ich die Hälfte eh nicht verstehe.
 
Naja, denke kaum, dass dieser Weg der einfachere sein wird (ohne Programmierkenntnisse) 😁 Aber Dein Anwendungsfall ist auch ein ganz anderer, als der von @tiermutter - verschiedene Problemfälle, verschiedene Lösung (wie das halt oft so ist) 🙃
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 45 (Mitglieder: 1, Gäste: 44)

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Themen
5.215
Beiträge
52.080
Mitglieder
4.954
Neuestes Mitglied
jakes

Teilen

Zurück
Oben