Page title

Verwendung

Es sind nur wenige, einfache Schritte nötig, um die hier verfügbaren Karten-Kacheln in Ihrem eigenen Projekt verwenden zu können:

1. Laden Sie die Karten-Kacheln nach dem Kauf über die Seite Status herunter.
2. Erstellen Sie zwei Ordner auf der höchsten Ebene Ihrer Webseite ("js" und "map"). Sie können dies mit Ihrer FTP-Software tun.
3. Laden Sie leaflet (JS library) von https://leafletjs.com/ herunter
4. Jetzt müssen Sie die Dateien auf Ihren Webserver hochladen

Wenn Sie SSH-Zugang haben und damit vertraut sind (schneller)	Wenn nicht (langsamer)
4.1 Laden Sie die zip-Datei(en) mit den Karten-Kacheln in das "map"-Verzeichnis hoch. 4.2 Laden Sie die leaflet zip-Datei(en) in das js-Verzeichnis. 4.3 Entpacken Sie alle Dateien über SSH mit dem Linux-Kommando "unzip".	4.1 Entpacken Sie die Karten-Kacheln auf Ihrem PC und laden Sie alle Kacheln/Ordner mit Ihrer FTP-Software auf Ihren Server in das "map"-Verzeichnis hoch. 4.2 Entpacken Sie auch die leaflet zip-Dateien/Ordner und laden Sie alles in den "js"-Ordner hoch.

5. Erstellen Sie eine neue .html-Datei wie beispielsweise index.html
6. Fügen Sie den Beispielcode (Abschnitt Vollständiges Code-Beispiel) in die erstellte html-Datei ein, speichern Sie die Datei und laden Sie sie auf Ihren Webserver auf die gleichen Ebene wie Ihre js- und maps-Ordner hoch.
7. Öffnen Sie die index.html Datei in Ihrem Webbrowser.

Beispiel

Integration von Leaflet

Um leaflet zu verwenden, müssen Sie lediglich leaflet von https://leafletjs.com/ herunterladen, den Inhalt der zip-Datei in Ihren js-Ordner einfügen und die folgenden zwei Zeilen in das head-Element Ihrer Website einfügen:

<link rel="stylesheet" href="./js/leaflet/leaflet.css" /> <script src="./js/leaflet/leaflet.js"></script>

Nach dem Einfügen können Sie leaflet auf Ihrer Webseite mit JS-Befehlen verwenden. Dies wird im nächsten Abschnitt genauer erklärt.

Verwendung von Leaflet

Erstellen Sie ein div-Element auf Ihrer Website mit dem Namen "mapDiv", wie beispielsweise <div id="mapDiv" style="width:100%; height:700px;"></div>, in dem die Karte angezeigt werden soll.

Fügen Sie das folgende Beispiel (JS) in die Webseite unterhalb des div-Elements ein:

<script> var leafletController; // the controller on the map to enable/disable groups on the map var mapOptions = { center: [49.450944, 11.077876], // here we set the initial map center. In this case this is Nuremberg/Germany zoom: 12, // here we set the initial zoom level. Zoom levels of the map tiles you download are from 12 to 18 minZoom: 12, // define here the min zoom level. If the user reached this min zoom level zooming out is not possible maxZoom: 18, // define here the max zoom level. If the user reached the max zoom level zooming in is not possible zoomSnap: 2, // this means that the zoom is skipped every second level. You zoom is like 12-14-16-18 zoomDelta: 2 // this means the zoom controls skips every second level (this has to be the same as zommSnap!) }; mymap = L.map('mapDiv', mapOptions); // initialize the map to the mapDiv element L.tileLayer("https://www.sightmap.de/map/tiles/{z}/{x}/{y}.png", { // here you have to setup the path to your map tiles like /map/ or /map/tiles/ this depends on your folder structure attribution: '<a href="https://sightmap.de">SightMap</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' // here we set up some required copyright information for osm }).addTo(mymap); </script>

Vollständiges Code-Beispiel

Erstellen Sie eine index.html-Datei und fügen Sie den folgenden Code in die Datei ein. Anschließend speichern Sie die Datei und laden sie auf Ihren Webserver in das Verzeichnis hoch, in dem Sie die Verzeichnisse map und js erstellt haben.

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="/sightmap/servlets/js/leaflet/leaflet.css" />
   <script src="/sightmap/servlets/js/leaflet/leaflet.js"></script>
</head>
<body>
   <h1>My Map</h2>
   <div id="mapDiv" style="width:100%; height:700px;"></div>

var mapOptions = {
         center: [49.450944, 11.077876], // here we set the initial map center. In this case this is Nuremberg/Germany<br />
         zoom: 12, // here we set the initial zoom level. Zoom levels of the map tiles you download are from 12 to 18<br />
         minZoom: 12, // define here the min zoom level. If the user reached this min zoom level zooming out is not possible<br />
         maxZoom: 18, // define here the max zoom level. If the user reached the max zoom level zooming in is not possible<br />
         zoomSnap: 2, // this means that the zoom is skipped every second level. You zoom is like 12-14-16-18 <br />
         zoomDelta: 2 // this means the zoom controls skips every second level (this has to be the same as zommSnap!)<br />
      };
      mymap = L.map('mapDiv', mapOptions); // initialize the map to the mapDiv element<br />

L.tileLayer("https://www.sightmap.de/map/tiles/{z}/{x}/{y}.png", { // here you have to setup the path to your map tiles like /map/ or /map/tiles/ this depends on your folder structure<br />
         attribution: '<a href="https://www.sightmap.de">SightMap</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' // here we set up some required copyright information for osm<br />
      }).addTo(mymap);
   </script>
</body>
</html>

Das vollständige Codebeispiel mit der Erweiterung um Marker, können Sie hier einmal eigenständig ansehen.

Erläuterung von Optionen und Einstellungen

Für die vollständige Beschreibung von leaflet verwenden Sie bitte die sehr gute Beschreibung, Einführung und API-Dokumentation auf https://leafletjs.com/

Die Beschreibung der Optionen center, zoom, minZoom, maxZoom, zoomSnap und zoomDelta haben Sie bereits in den Inline-Code-Beschreibungen in den vorherigen Abschnitten gesehen.

Hinzufügen von Markern

Wenn Sie einen Marker zur Karte hinzufügen möchten, müssen Sie einige wenige zusätzliche kurze Codeschnipsel (JS) nach dem Code in den obigen Abschnitten hinzufügen:

Zuerst müssen Sie ein oder mehrere Bilder hinzufügen, die den Marker darstellen sollen.

Nun können beliebig viele Marker auf der Karte hinzugefügt werden. In diesem Beispiel werden die Marker in zwei verschiedene Gruppen gruppiert.

Nun müssen die Marker gruppiert werden.

Nach der Gruppierung muss der Controller auf der rechten oberen Seite der Karte erstellt werden, um die Markergruppen auf der Karte anzeigen/ausblenden zu können.

Nach der Erstellung der Controller-Gruppen müssen wir den Controller zur Karte hinzufügen.

Abschließend müssen die Gruppen der Karte hinzufügt werden.

Vollständiges Codebeispiel mit Markern.

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="./js/leaflet/leaflet.css" />
   <script src="./js/leaflet/leaflet.js"></script>
</head>
<body>
   <h1>My Map</h2>
   <div id="mapDiv" style="width:100%; height:700px;"></div>

var mapOptions = {
         center: [49.450944, 11.077876], // here we set the initial map center. In this case this is Nuremberg/Germany
         zoom: 12, // here we set the initial zoom level. Zoom levels of the map tiles you download are from 12 to 18
         minZoom: 12, // define here the min zoom level. If the user reached this min zoom level zooming out is not possible
         maxZoom: 18, // define here the max zoom level. If the user reached the max zoom level zooming in is not possible
         zoomSnap: 2, // this means that the zoom is skipped every second level. You zoom is like 12-14-16-18 
         zoomDelta: 2 // this means the zoom controls skips every second level (this has to be the same as zommSnap!)
      };
      mymap = L.map('mapDiv', mapOptions); // initialize the map to the mapDiv element

L.tileLayer("https://www.sightmap.de/map/tiles/{z}/{x}/{y}.png", { // here you have to setup the path to your map tiles like /map/ or /map/tiles/ this depends on your folder structure
         attribution: '<a href="https://www.sightmap.de">SightMap</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' // here we set up some required copyright information for osm
      }).addTo(mymap);

// ### Create the marker icons ###
var icons = {}; // the icon array
icons['blue'] = L.icon({ // you can add as many icons as you want
iconUrl: './js/leaflet/images/marker-icon-2x.png', // url to the image of the icon
iconSize:[25, 41], // size of the icon
iconAnchor:[12, 40], // point of the icon which will correspond to marker's location
popupAnchor:[1, -42] // point from which the popup should open relative to the iconAnchor
});

// ### Add marker ###
var marker = [[], []]; // the markers as an array with 5 arrays. Each array represent is a list of marks in the same visited category (visited, ..., not visited) and the last one is the favorite marker list
//Create two example marker: (you can create as many markers as you want and push it to the marker[0] or marker[1] array in this example
marker[0].push(
L.marker(
[49.450044, 11.070876], // the GPS position of the marker
{icon: icons['blue']} // which icon should be chosen
)
.bindPopup('PopUp of marker 1') // set a popup. You can use html here!
);

marker[1].push(
L.marker(
[49.450944, 11.077876], // the GPS position of the marker
{icon: icons['blue']} // which icon should be choosen
)
.bindPopup('PopUp of marker 2') // set a popup. You can use html here!
);

// ### Group the marker ###
var markerGroups = [[], []]; // the group of the markers (we need this to display it on the map and enable/disable the groups over the controller)
markerGroups[0] = L.layerGroup(marker[0]);
markerGroups[1] = L.layerGroup(marker[1]);

// ### Create the controller groups ###
overlayMaps = {};
overlayMaps['MarkerGroupName1'] = markerGroups[0];
overlayMaps['MarkerGroupName2'] = markerGroups[1];

// ### Add the controller to the map (top-right) ###
leafletController = L.control.layers(null, overlayMaps); // creates the controller
leafletController.addTo(mymap); // adds the marker to the map

// ### adds the marker layer with the marker to the map ###
for(var i=0; i<2; ++i)
mymap.addLayer(markerGroups[i]);
   </script>
</body>
</html>

Das vollständige Codebeispiel mit der Erweiterung um Marker, können Sie hier einmal eigenständig ansehen.