Programmierschnittstelle API 2 für CMS Day Communiqué: Beispiele Standort

Transkript

1 Eidgenössisches Departement für Verteidigung, Bevölkerungsschutz und Sport VBS armasuisse Bundesamt für Landestopografie swisstopo Programmierschnittstelle API 2 für CMS Day Communiqué: Beispiele Standort Standardmarkierung für Standort... 2 Standardmarkierung für Standort mit weiteren Hintergrunddaten... 7 Standardmarkierung für Standort mit PopUp mit weiteren Infos Polygon / Perimeter einzeichnen Mehrere Karten auf die gleiche Webseite API Generator Referenz & Weitere Informationen: geo.admin.ch API2 Schulung Winter /18

2 Beispiel 1: Standardmarkierung für Standort Ergebnis: 2/18

3 Schritt 1: Bestimmen Koordinaten Zoomen Sie über map.geo.admin.ch auf den gewünschten Ort Mit Rechtem Mausklick wird von gewünschter Position über Pop up Koordinaten zurückgegeben In diesem Beispiel: /18

4 Schritt 2: in CMS Redaktoren System für gewünschte Ziel Website API laden Header Code: <script type="text/javascript" src=" 4/18

5 Schritt 3: Erstellen Sie einen Neuen Paragraphen Schritt 4: Wählen Sie Ihren Paragraphentyp HTML 5/18

6 Schritt 5: HTML Code editieren Folgenden Code eingeben, wobei easting und northing auf die Koordinaten Werte aus Schritt 1 angepasst werden sollte <script type="text/javascript"> window.onload = init; function init() { var api1 = new GeoAdmin.API(); api1.createmap({ div: "mymap1", easting: , northing: , zoom: 3 api1.showmarker(); } // end init </script> <div id="mymap1" style="width:500px;height:340px;border:1px solid grey;padding: ;margin:10px!important;"></div> Schritt 6: Speichern und publizieren Standort ist jetzt eingebunden! 6/18

7 Beispiel 2: Standardmarkierung für Standort mit weiteren Hintergrunddaten Ergebnis: 7/18

8 Schritt 1: den gewünschten Datensatz in geo.admin.ch auswählen. In diesem Beispiel geht es um den Adressdatensatz Über die Funktionen Permalink (Karte einbinden) Kopieren sie die Adressen URL In diesem Beispiel hier ist es: &layers=ch.swisstopo.vec25gebaeude&layers_indices=5&layers_opacity=1 &layers_visibility=true&bgopacity=0&selectednode=node_ch.swisstopo.vec25-gebaeude1 Der Datensatz Identifikator für die Adressen ist in diesem Fall: ch.swisstopo.vec25gebaeude Schritt 2: Wie in Schritt 2-4 aus Übung 1 neuen Paragraph erstellen 8/18

9 Schritt 3: Wie in Schritt 5 aus Übung 1 HTML Code editieren Mit layers Wird der entsprechenden Datensatz hinzugefügt, Mit layers_opacity dessen Transparenz gesteuert Mit bgopacity wird die Transparenz der Pixelkarte gesteuert: 0 ist komplett transparent <script type="text/javascript"> window.onload = init; function init() { var api2 = new GeoAdmin.API(); api2.createmap({ div: "mymap2", easting: , northing: , zoom: 8, layers: 'ch.swisstopo.hiks-dufour,ch.swisstopo.vec25-gebaeude', layers_indices: '3,4', layers_opacity: '0.2,0.7', bglayer: 'pixelmaps-gray', bgopacity: 50 } // end init </script> <div id="mymap2" style="width:500px;height:340px;border:1px solid grey;padding: ;margin:10px!important;"></div> Schritt 4: Speichern und publizieren Standort ist eingebunden! Es erklärt sich nun von selbst wie eine Karte nur mit Luftbild und Markierung erstellt wird. 9/18

10 Beispiel 3: Standardmarkierung für Standort mit PopUp mit weiteren Infos Ergebnis 10/18

11 Schritt 1: Wie in Schritt 1-4 aus Übung 1 neuen Paragraph erstellen Schritt 3: Wie in Schritt 5 aus Übung 1 HTML Code editieren Wir generieren in A) eine Leere Karte. Die Funktion ShowMarker aus den vorgehenden Übungen erweitern wir. In B) fügen wir für einen Ort mittels folgenden Parametern: easting, northing die Koordinaten für den Standort ein html enthält den Inhalt des PopUps in Form von HTML, es können Text, Bilder etc eingefügt werden. In diesem Beispiel sind es Text und ein Logo <script type="text/javascript"> window.onload = init; function init() { //A ) Leere Karte var api3 = new GeoAdmin.API(); api3.createmap({ div: "mymap3", easting: , northing: , zoom: 6 //B) Wabern api3.showmarker(); api3.showpopup({ easting: , northing:197450, html: "<h1>swisstopo</h1><br>seftigenstrasse 264<br>P.O. Box 3084 Wabern<br> <img src=' />", title: "Wo können Sie uns finden?" } </script> <div id="mymap3" style="width:500px;height:340px;border:1px solid grey;padding: ;margin:10px!important;"></div> Schritt 4: Speichern und publizieren Standort mit PopUp sind eingebunden! Wenn mehrer Punkte eingebunden werden sollten, empfiehlt sich die Verwendung von KML files, eine Anleitung dazu unter: api_services/anl_tech.html#parsys_ /18

12 Beispiel 4: Polygon / Perimeter einzeichnen Ergebnis Schritt 1: Wie in Schritt 1 aus Übung 1 die Koordinaten des Perimeter erfassen. Bei unserem Beispiel haben wir einen Perimeter aus 4 Punkten/Koordinaten erfasst , , , , Wie in Schritt 1-4 aus Übung 1 neuen Paragraph erstellen. Schritt 3: Wie in Schritt 5 aus Übung 1 HTML Code editieren Wir generieren: in A) eine Leere Karte und zentrieren sie In B) Definition line styling, incl. width und colour der linie In C) Aggregation der Punkte zu Polygon (variable namens 'points'); Für jeden Punkte muss eine Zeile ausgfüllt werden. Mehr als 100 Punkte sind nicht zu empfehlen 12/18

13 <script type="text/javascript"> window.onload = init; function init() { //A ) Leere Karte api4 = new geoadmin.api(); api4.createmap({ div: "mymap4", easting: , northing: , zoom: 5 vectorlayer = new OpenLayers.Layer.Vector("Vector Layer"); //B)Definition line styling, incl. width und colour der linie: var style_poly = { strokecolor: "#000000", strokeopacity: 1, strokewidth: 2, fillcolor: "#00FF00", fillopacity: 0.6 }; //C Aggregation der Punkte zu Polygon (variable namens 'points') var points = []; points.push(new OpenLayers.Geometry.Point(600065, )); points.push(new OpenLayers.Geometry.Point(600065, )); points.push(new OpenLayers.Geometry.Point(602065, )); points.push(new OpenLayers.Geometry.Point(603065, )); //create a polygon feature from the array of points and using the style from above var linearring = new OpenLayers.Geometry.LinearRing(points); var polygonfeature = new OpenLayers.Feature.Vector(linearRing, null, style_poly); vectorlayer.addfeatures([polygonfeature]); //add it to the map api4.map.addlayer(vectorlayer); } </script> <div id="mymap4" style="width:500px;height:340px;border:1px solid grey;padding: ; margin:10px!important;"></div> Schritt 4: Speichern und publizieren 13/18

14 Mehrere Karten auf die gleiche Webseite 14/18

15 HTML CODE Erste HTML Komponent Code: alle Karten-Code und div für die erste Karte <script type="text/javascript"> window.onload = init; function init() { // first map var api1 = new GeoAdmin.API(); api1.createmap({ div: "mymap1", easting: , northing: , zoom: 6 // second map var api2 = new GeoAdmin.API(); api2.createmap({ div: "mymap2", easting: , northing: , zoom: 6, layers: 'ch.swisstopo.hiks-dufour,ch.bfs.gebaeude_wohnungs_register', layers_indices: '3,4', layers_opacity: '0.2,0.7', bglayer: 'pixelmaps-gray', bgopacity: 50 // third map var api3 = new GeoAdmin.API(); api3.createmap({ div: "mymap3", easting: , northing: , zoom: 1 api3.showpopup({ html: "<h1>swisstopo</h1><br>seftigenstrasse 264<br>P.O. Box 3084 Wabern<br> <img src=' />", title: "What is your location?" // fourth map var api4 = new geoadmin.api(); api4.createmap({ div: "mymap4", easting: , northing: , zoom: 5 15/18

16 vectorlayer = new OpenLayers.Layer.Vector("Vector Layer"); var style_poly = { strokecolor: "#000000", strokeopacity: 1, strokewidth: 2, fillcolor: "#00FF00", fillopacity: 0.6 }; var points = []; points.push(new OpenLayers.Geometry.Point(600065, )); points.push(new OpenLayers.Geometry.Point(600065, )); points.push(new OpenLayers.Geometry.Point(602065, )); points.push(new OpenLayers.Geometry.Point(603065, )); //create a polygon feature from the array of points and using the style from above var linearring = new OpenLayers.Geometry.LinearRing(points); var polygonfeature = new OpenLayers.Feature.Vector(linearRing, null, style_poly); vectorlayer.addfeatures([polygonfeature]); api4.map.addlayer(vectorlayer); } // end init </script> <!-- div for first map --> <div id="mymap1" style="width:510px;height:340px;border:1px solid grey;padding: ; margin:10px!important;"></div> Zweite HTML Komponent Code: div für die zweite Karte <div id="mymap2" style="width:510px;height:340px;border:1px solid grey;padding: ; margin:10px!important;"></div> Dritte HTML Komponent Code: div für die dritte Karte <div id="mymap3" style="width:510px;height:340px;border:1px solid grey;padding: ; margin:10px!important;"></div> Vierte HTML Komponent Code: div für die vierte Karte <div id="mymap4" style="width:510px;height:340px;border:1px solid grey;padding: ; margin:10px!important;"></div> 16/18

17 API Generator Um der Code für Day-CMS einfach zu generieren, eine Webanwendung ist zur Verfügung (nur mit FireFox Browser benutzbar): In Page Properties / Meta Tags / Header Code : geo.admin.ch API Header Code einfügen API Generator Code kopieren und in HTML Komponent einfügen, dann Die Karte ist jetzt eingebunden! 17/18

18 Referenz & Weitere Informationen: Komplette API Referenz ist abrufbar 18/18