JavaScript Bibliothek für interaktive Landkarten Leaflet - Official Site
<!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>
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" -->
<script> var marker = L.marker([49.9239,8.49361]).addTo(map); </script>
Klicke auf die Marker, um Text zu sehen.
<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>
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.
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>
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>
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>