Auch das auf cardo.Map 4 Technologie aufsetzende MapControl kann via IFrame oder Script-Tag eingebunden werden.
In den meisten Fällen ist die IFrame-Variante der Skript-Variante vorzuziehen, da es bei der Skript-Variante häufig zu Layoutproblemen im MapControl durch CSS-Regeln der Hauptseite kommt.
Einbindung per IFrame (bevorzugte Variante)
Das MapControl kann als IFrame in die Seite eingebettet werden:
<iframe style='width:500px; height:500px;' src="https://www.ihrserver.de/mapcontrol.aspx"></iframe>
Die IFrame-Variante (Datei mapcontrol.aspx) kappselt das MapControl gegenüber der umgebenden Seite komplett ab. Jedoch ist eine Interaktion mittels der JavaScript API aufgrund der "Same-Origin-Policy" nicht mehr möglich. (Anm.: Die Bereitstellung/Unterstützung einfacher Aufrufe mittels der browserseitig bereitstehenden Cross-Domain-Meassaging-Möglichkeiten könnte bei Bedarf realisiert werden.)
In der IFrame-Variante passt sich das MapControl automatisch an, wenn sich die Größe des IFrames ändert.
Einbindung per Skript-Tag
Dazu muss ein zur cardo.Map 3 Variante nahezu identischer Script-Aufruf in die Seite eingefügt werden, auch hier an der Stelle, wo die Karte erscheinen soll. (Anmerkung: Die Dateinamen unterscheiden sich nur an einer Stelle, wo ein Punkt durch einen Unterstrich ersetzt wurde. Dies erlaubt die Co-Existenz beider Varianten auf dem Server. Zudem haben einige Anti-Malware-Programme die doppelte Dateiendung der cardo.Map 3 Variante als "Verschleierung" des Dateityps moniert und evtl. geblockt.)
<script charset="utf-8" src="https://www.ihrserver.de/mapcontrol_js.aspx"> </script>
Die Karte "entfaltet" sich dann in dem sie umgebenden Containerelement, welches die Position und Größe bestimmt. Es muss dazu einen sogn. "block formating context" bilden, u. a. zu erreichen mittels position: relative; oder position: absolute; oder auch mit Tabellenzellen.
Typischerweise sieht das folgendermaßen aus:
...
<div style="position:relative; width:500px; height:400px;">
<script charset="utf-8" src="https://www.ihrserver.de/mapcontrol_js.aspx">
</script>
</div>
...
Automatische Größenanpassung der eingebetteten Karte
Das MapControl wird i. d. R. in einer fixen Größe in der Webseite eingebettet sein. Es erfolgt daher ohne weiteres Zutun auch keine Anpassung an den das MapControl umgebenden Container, sollte sich dieser nach dem initialen Seitenaufbau noch einmal in der Größe ändern. Es kann jedoch am Container-Element ein Attribut names "data-monitor-resize" gesetzt werden. Um die automatische Größenanpassung des MapControls zu aktivieren muss es den Wert "true" oder "1" enthalten.
...
<div data-monitor-resize="true" style="position:relative; width:500px; height:400px;">
<script charset="utf-8" src="https://www.ihrserver.de/mapcontrol_js.aspx">
</script>
</div>
...
(Da der HTML-Body das einzige HTML-Element ist, welches selbst über stattfindende Größenänderungen informiert, müssen andere Elemente aktiv überwacht werden. Dies geschiet mit einem Timer, der jede Sekunde die Größe prüft und ggf. reagiert. Aus diesem Grund sollte die Funktion nur aktiviert werden, wenn sie wirklich benötigt wird.)
Zum Einbetten des MapControls muss folgender Quelltext (script-Aufruf) in die Seite eingefügt werden und zwar an der Stelle, wo die Karte erscheinen soll.
<script charset="utf-8" src="http://cardomap.de/mapcontrol.js.aspx"> </script>
Die Karte "entfaltet" sich dann in dem sie umgebenden Containerelement, welches die Position und Größe bestimmt. Es muss dazu einen sogn. "block formating context" bilden, u. a. zu erreichen mittels position: relative; oder position: absolute; oder auch mit Tabellenzellen.
Typischerweise sieht das folgendermaßen aus:
...
<div style="position:relative; width:500px; height:400px;">
<script charset="utf-8" src="http://cardomap.de/mapcontrol.js.aspx">
</script>
</div>
...
Auch für das MapControl stehen die Aufrufparameter von cardo.Map zur Verfügung, mit denen Einfluß auf die angezeigten Inhalte (Grundkarte, sichtbare Themen, Kartenausschnitt) genommen werden kann.
Wenn die einbindende Seite mittels SSL verschlüsselt ist, muss auch das MapControl via https abgerufen werden. Dies ist natürlich nur dann möglich, wenn der jeweilige Portalbetreiber über ein SSL-Zertifikat verfügt und der Server entsprechend konfiguriert ist. Im Zweifel muss der Kontakt zum Portalanbieter gesucht werden. Steht keine SSL-Variante des Portals zur Verfügung, kann auch das MapControl nicht in SSL-verschlüsselten Seiten eingebettet werden.
Das MapControl kann über eine eigene CSS-Datei (default.css) im Aussehen angepasst werden, welche mit dem cardoMap ausgeliefert wird und daher bei jedem Update überschrieben wird. Gewünschte Anpassungen müssen entsprechend an IDU übermittelt werden, damit sie eingepflegt werden können.
Die Datei befindet sich in Pfad:
cardoMap3\<IhrProjektName>\Compact\default.css
Hinweis für Entwickler: Bei Differenz zwischen Entwicklungs- und Zielprojektnamen kann das Projekt auch per URL-Parameter ?project=<Name des Zielprojektes> vorgegeben werden (funktioniert nur im Debug-Build).