Ich hab eine Karte erstellt, in die ich Cafés, Kneipen etc mit kostenlosem WLAN-Zugang in Regensburg eintragen will: Kostenloses WLAN in Regensburger Cafés, Kneipen etc.
Dazu nutze ich die JavaScript-Library Leaflet, die in Zusammenarbeit map tiles von OpenStreetMap eine Karte erzeugt. Das ganze geht in der Grundversion richtig leicht, nur der Anleitung auf der Webseite folgen und man hat – wenn nichts schiefgeht und man sich auch ne API von cloudmade.com holt – innerhalb von zehn Minuten eine Karte mit einem Marker darauf.
Ich wollte allerdings nicht jedes zusätzliche Lokal per HTML und JavaScript eintragen, sondern nur in ein CSV-File. Damit verkompliziert sich die Angelegenheit ein bisschen. Jedoch bietet leaflet-simple-csv ein gutes Framework.
Leider funktionieren dann die Maptiles von cloudmade.com nicht mehr, den Grund konnte ich nicht rausfinden. Stattdessen musste ich mich mit den weniger schönen Karten von MapQuest zufrieden geben – dafür erfordert das Hinzufügen neuer WLAN-Spots nur Updates in einer Text-Datei.
Auf ein Hindernis bin ich noch kurz vor Schluss gestoßen, als ich Bootstrap verwenden wollte, um die Seite responsiv zu halten: Bindet man nur
id="map"
erscheint keine Karte. Die Lösung ist eine zusätzlich Klasse/ID um
id="map"
herum, die explizit eine Höhe festlegt.