Marker setzen auf Landkarten und Hallenplänen

So sieht es aus, Beispiel 1 Landkarte:

So wird's gemacht:

1. Zwei Dateien von Leaflet in die eigene Webseite einbinden:

<!DOCTYPE html><html lang="de">
<head>
  <meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

2. Einen Container (map) einrichten und per JS mit einer Karte füllen.

49.9239 ist die Latitude (Breitengrad) und 8.49361 die Longitude (Längengrad) der Karten-Mitte, 6 ist der anfängliche Zoom-Faktor. Der Umcontainer (landkarte) dient lediglich als Rahmen des Objekts und für lokale CSS-Angaben.

<div id="landkarte">
<style scoped>
#map {
  width: 100%;
  height: 30em;
  border: .1pt solid #ccc;
  border-radius: 5px;
  z-index: 0;
}
</style>

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

<script>
var map = L.map("map").setView([49.9239,8.49361], 6);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,\
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}
).addTo(map);
</script>
</div><!-- id="landkarte" -->

3. Den ersten Marker setzen, hier auf die schon bekannte Koordinate:

<script>
var marker = L.marker([49.9239,8.49361]).addTo(map);
</script>

So sieht es aus, Beispiel 2 Hallenplan:

Klicke auf die Marker, um Text zu sehen.

So wird's gemacht:

1. Zwei Dateien von Leaflet in die eigene Webseite einbinden (wie Beispiel 1).

2. Eigenes Bild als Hintergrund:

<style scoped>
#messe {
  width: 100%;
  height: 30em;
  border: .1pt solid #ccc;
  border-radius: 5px;
  z-index: 0;
}
</style>
<div id="messe"></div>
<script>
var bounds = Object.create([[0, 0],[-1332, 3336]]); // Grenzen der Grafik
var messe = L.map('messe', {
  crs: L.CRS.Simple,
  minZoom: -2,
  maxBounds: bounds
});
messe.fitBounds(bounds);
var PlanLayer   = L.imageOverlay('img/hallenplan.png', bounds).addTo(messe);
</script>
</div><!-- id="hallenplan" -->

Das Bild kann beliebig im Koordinatensystem (y,x) platziert werden. Ich habe es in den zweiten Quadranten gelegt (y negativ, x positiv), weil 0,0 im Grafikprogramm Gimp links oben ist und die Positionen dort mit Bewegung der Maus angezeigt werden. Die Position x=500, y=1000 im Grafikprogramm wird in der Karte als y=1000 x=-500 eingetragen. y wird deshalb zuerst genannt, weil bei geografischen Koordinaten die Reihenfolge mit Breite,Länge vereinbart ist.

Zur Anschauung werden im Uhrzeigersinn die vier Ecken des Bildes markiert. Mit .bindPopup('links-oben') poppt der Text auf bei Klick auf den Marker:

<script>
L.marker([    0,   0]).addTo(messe).bindPopup('links-oben');    // y,x links-oben
L.marker([    0,3336]).addTo(messe).bindPopup('rechts-oben');   // y,x rechts-oben
L.marker([-1332,3336]).addTo(messe).bindPopup('rechts-unten');  // y,x rechts-unten
L.marker([-1332,   0]).addTo(messe).bindPopup('links-unten');   // y,x links-unten
</script>

sind, wirdWeil die Positionen der Marker im

Mit bounds wird ein Koordinatensystem (x,y) definiert. Der erste Wert [0,0] (y,x) ist die Position der Ecke unten-links. (Kontrolle: Marker auf diesen Wert) Damit der Hallenplan nicht aus der Sichtfläche hinausgeschoben werden kann, muss maxBounds gesetzt werden.

3. Eigenen Marker bekannt machen

Ein auffällig blinkender Kreis kann als animierte GIF-Grafik mit dem Programm Gimp erstellt werden. So wird er eingebunden:

<script>
var standort = L.icon({
    iconUrl: 'img/punkt_rot_blink.gif',
    shadowUrl: '',

    iconSize:     [30, 30], // size of the icon
    shadowSize:   [ 0,  0], // size of the shadow
    iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
    shadowAnchor: [ 0,  0],  // the same for the shadow
    popupAnchor:  [ 0,  0] // point from which the popup should open relative to the iconAnchor
});
</script>

4. Positionen markieren

In Gimp werden die Positionen auf dem Hallenplan abgelesen. Standort (x=792, y=1050) und Stand A-07 (x=1556, y=896). Dem Standort-Marker ist die bereits bekannte Grafik zuzuordnen ,{icon: standort}:

<script>
var treppe_links    = [[-1050,792],"Standort:   Treppe links"];
var A_07            = [[ -896,1556],"A-07   Reifen-Schorse"];
L.marker(treppe_links[0], {icon: standort}).addTo(messe).bindPopup(treppe_links[1]);
L.marker(A_07[0]).addTo(messe).bindPopup(A_07[1]); // Stand A-07 [y,x]
</script>

5. Optional: Positionen verbinden

Als Hilfestellung kann eine Linie zwischen Start und Ziel gezogen werden:

<script>
var travel = L.polyline([treppe_links[0], A_07[0]]).addTo(messe);
</script>