Aus Tabelle mit Koordinate und Text in einer Karte Marker mit Popups erstellen (Leaflet)

Markus_B · 2024-10-04T13:00:57.800Z

Ich habe eine Tabelle mit Koordinaten und Text. Mit den Koordinaten möchte ich in der Karte je einen Marker setzen, und mit dem Text das zugehörige Popup füllen.

Mit Leaflet habe ich das schon mal händisch mit einzelnen Daten erfolgreich ausprobiert:

// TN-1
L.marker([49.63, 11.0]).addTo(map)
  .bindPopup('<b>Teilnehmer:in 1</b><br>biete 2 Plätze im Auto<br>Teilnehmer@xyt.de').openPopup();

// TN-2
L.marker([49.63, 11.05]).addTo(map)
  .bindPopup('Teilnehmer:in 2').openPopup();

Wie erzeuge ich nun die Variablen “LatLon” und “Text” und damit den Marker mit Popup?
Und wie schreibe ich die zugehörige Schleife, die die Tabelle (XLS, CSV) abarbeitet?

fx99 · 2024-10-04T16:06:30.523Z

Wenn Du Dich mit html und javascript etwas auskennst, kann ich Dir ein Beispiel schicken. Ansonsten empfehle ich umap, siehe unter “Ausgelagerte Daten”.

Markus_B · 2024-10-04T16:26:40.244Z

HTML: ja, JS: c&p geht immer (und man lernt ja aus Beipielen - idealerweise mit Kommentaren im Code). Also: gern! Gruss, Markus

MichaelFS · 2024-10-08T06:00:08.214Z

Danke @fx99! Mit dem Beispiel würde auch ich gerne lernen …

qugeb · 2024-10-08T14:41:09.229Z

In qgis dürftest du die CSV importieren können und daraus kannst du dann z.B. ein geojson exportieren. Bin gerade unterwegs aber kann wenn ich Zuhause am PC bin nochmal nachsehen wie es gehen würde (leaflet kann aus allen Punkten einer geojson einen Marker mit Pop-up generieren) wenn du noch keine Lösung hast.

qugeb · 2024-10-10T09:29:16.928Z

Hier die Funktion onEachFeature ist genau das, was du brauchst
https://leafletjs.com/examples/geojson/

Und csv zu geojson konvertieren geht auch mit Online-Tools wie ich gesehen habe

fx99 · 2024-10-10T14:02:56.242Z

Hier ist beschrieben, wie es direkt mit einem csv geht:

github.com

HandsOnDataViz/leaflet-map-csv/blob/main/index.html

<!DOCTYPE html>
<html>
<head>
  <title>leaflet-map-csv</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <!-- Load Leaflet code library - see updates at http://leafletjs.com/download.html -->
  <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>

  <!-- Load jQuery and PapaParse to read data from a CSV file -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>

  <!-- Position the map with Cascading Style Sheet (CSS) -->
  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>

This file has been truncated. show original