map.army in Webseite einbinden

Die Web-Applikation map.army kann mit wenigen Zeilen Code in eine Webseite eingebunden werden. Zusätzlich können militärische Layer im MilX-Format direkt als URL Parameter geladen werden. Der folgende Artikel zeigt die dafür nötigen Schritte.

 

Einbinden via iFrame

Das Einbinden der Web-Applikation in eine Webseite kann über einen iFrame erfolgen. Mit dem folgenden Beispiel-Code wird map.army mit all seinen Funktionen in einem 800 Pixel breiten und 600 Pixel hohen Frame angezeigt. Die Definition für die im iFrame unterstützten Attribute wie Höhe, Breite, Rahmen, … kann hier gefunden werden.

<iframe src="https://www.map.army " width="800" height="600" frameborder="0"></iframe>

 

Hinweis: Läuft der iFrame in einem lokalen HTML File, nicht aber auf deiner Webseite? In diesem Fall muss sichergestellt werden, dass der Web Server sowie das CMS iFrames unterstützen. In den meisten CMS handelt es sich hierbei um einen Parameter, der aktiviert werden muss.

 

MilX-Layer via URL laden

Via die URL können Layer definiert werden, die beim Start von map.army direkt geladen werden. So kann beispielsweise eine interaktive Lage in einen Geschichtsblog integriert werden oder die eine aktuelle Katastrophenlage in einer Newsseite eingebunden werden:

Für die Einbindung sind die folgenden Schritte notwendig:

 

Schritt 1 – Layer oder Layersammlung speichern

Die militärische Lage mit Hilfe der Web Applikation map.army erstellen. Die Lage anschliessend in ein einzelnes MilX-File (Layersammlung) speichern. 

 

Schritt 2 – Upload und Testen

Das in Schritt 1 erstellte MilX-File auf den WebServer laden. Teste ob der Layer als File über den Webbrowser heruntergeladen werden kann. Beispiel eines Links zu einem Layer: www.gs-soft.com/CMS/files/Layer.milxlyz
Ist es nicht möglich das File über den Webbrowser herunterzuladen? Überprüfe in diesem Fall ob der WebServer das MilX Fileformat (MIME Type) unterstützt:

Apache MIME Type Definition
Beispiel der Konfiguration des MIME Types *.milxlyz und *.milxly

 

Schritt 3 - Cross-Origin Resource Sharing (CORS)

Unterstützt der WebServer CORS? Dies wird benötigt, damit die auf deinem WebServer MilX-Files durch den Webbrowser geladen werden. CORS muss für www.map.army freigeschaltet werden. Abhängig vom WebServer sind die folgenden Schritte notwendig:


Apache: Das *.htaccess file (im Ordner auf dem WebServer der das *.milxlyz File beinhaltet) soll folgende Berechtigung freigeschaltet werden:
Apache CORS aktivieren via .htaccess

Header add Access-Control-Allow-Origin: https://www.map.army

Hinweis: Fall kein *.htaccess File in diesem Ordner vorhanden ist, muss dieses generiert werden und die oben aufgeführte Berechtigung integriert werden.


IIS: Im GUI des IIS muss folgende Anpassung vorgenommen werden:
IIS CORS aktivieren - Schritt 1
IIS CORS aktivieren - Schritt 2

Als Alternative kann im web.config File (im Ordner der das *.milxlyz File beinhaltet) folgende Berechtigung freigeschaltet werden:
IIS CORS aktivieren via web.config

<?xml version="1.0" encoding="UTF-8"?>  
  <configuration>  
      <system.webServer>  
          <staticContent>  
              <mimeMap fileExtension=".milxlyz" mimeType="application/octet-stream" />  
          </staticContent>  
          <httpProtocol>  
              <customHeaders>  
                  <add name="Access-Control-Allow-Origin" value="     
    https://www.map.army" />
                </customHeaders>  
          </httpProtocol>  
      </system.webServer>  
  </configuration>

 

Schritt 4 - Test

Kann die Lage vom Webserver direkt auf map.army via URL Parameter geladen werden? Hierzu kann in folgendem Teil des Links " www.gs-soft.com/CMS/files/Layer.milxlyz" durch die URL auf den in den Schritten 1 und 3 bereitgestellten MilX-Layer ersetzt werden. Beispiel: https://www.map.army/?layer=www.gs-soft.com/CMS/files/Layer.milxlyz

 

Schritt 5 - Read-Only Parameter

Abhängig von der Anwendung sollen die in der Webseite eingebunden Layer editierbar sein oder nicht. Hierfür kann mit dem "readonly" Parameter die zu landenden Layer schreibgeschützt werden:

https://www.map.army/?layer=www.gs-soft.com/CMS/files/Layer.milxlyz;readonly

 

Schritt 6 - iFrame anpassen

Wurden die Schritte 1 – 5 erfolgreich durchgeführt und wurde der Layer in den Tests richtig angezeigt, so dann kann die Web Applikation inklusive URL Parameter via iFrame in die Webseite eingebunden werden (siehe "Einbinden via iFrame"). Hier ein Beispiel Code:

Beispiel 1:

<iframe src="https://www.map.army/?layer=www.gs-soft.com/CMS/files/Layer.milxlyz;readonly"  
width="800" height="600" frameborder="0" style="border:0"></iframe>  

Beispiel 2:

<iframe src="https://www.map.army/?layer=www.gs-soft.com/CMS/files/Demo-Layers.milxlyz;readonly"   
width="100%" height="98%" frameborder="0"></iframe>

 
Bei Fragen oder Unklarheiten unterstützten wir dich gerne im Forum.

Kontakt

  • gs-soft AG

    Delfterstrasse 10

    5000 Aarau

    Schweiz

    Telefon:
    +41 (0)62 832 20 40
    E-Mail:
    Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!


  • Language