<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tutorial: ActiveMap erste Schritte</title>
<!-- im einfachsten Fall reichen die beiden folgenden Referenzen: -->
<link rel="stylesheet" href="http://support.activemapjs.de/cdn/activemap.complete.css" />
<script src="http://support.activemapjs.de/cdn/activemap.complete.js"></script>
</head>
<body id="seite">
<!--Leaflet-Kartenbereich-->
<div id="mapid" style="position:absolute; left:350px; top:10px; width:80%; height:90%"></div>
<!--Feld f�r Maus-Over-Meldungen-->
<div><span id="statustext"></span></div>
<script>
// Anlegen des Adapters und der Kartencontrol
var adap = AM.Leaflet.leafletActiveMapAdapter({
div: "mapid", // Name des divs, der die Karte enthalten soll
options: { center: [51.5, 10], zoom: 6, zoomAnimation: false, fadeAnimation: false }
});
var mymap = new AM.ActiveMap({ adapter: adap });
// Stra�enkarte als Hintergrund laden...
var tileLayer = mymap.getLayers().addLayer({
type: AM.LayerTypes.TileLayer,
url: 'http://sg.geodatenzentrum.de/wmts_topplus_web_open/tile/1.0.0/web/default/WEBMERCATOR/{z}/{y}/{x}.png',
options: {
maxZoom: 18,
attribution: '� Bundesamt f�r Kartographie und Geod�sie 2017, Datenquellen: http://sg.geodatenzentrum.de/web_public/Datenquellen_TopPlus_Open.pdf'
}
});
// Interaktive ActiveMap Gebietsebene laden...
var al = mymap.getLayers().addLayer({
type: AM.LayerTypes.AreaLayer,
url: "http://support.activemapjs.de/vt/kreise/{z}/{x}_{y}.pbf",
geoDataUrl: "http://support.activemapjs.de/vt/kreise/layerinfos.json",
maxZoom: 9,
options: { attribution: "ActiveMapJS (L+T)" }
});
// zun�chst alle Gebiete halbtransparent hellgrau F�rben
al.setDefaultBrush({ color: '#CCCCCC', opacity: 0.5 });
// f�r alle weiteren Arbeiten mit Gebieten sollten wir warten, bis die
// Karte fertig geladen wurde. Dazu h�ngen wir uns an das Ready-Ereignis.
al.geodataready.on(onAreaLayerReady);
function onAreaLayerReady(e) {
// alle Geodaten liegen vor.
// alle Gebiete im Nummernintervall 03000..07000 rot einf�rben
al.getAreas().getWithinInterval("03000", "07000").setBrush({ color: '#FF0000' });
}
// au�erdem soll noch f�r die aktuelle Mausposition das �berfahrene Gebiet
// angezeigt werden. Dazu h�ngen wir uns an das ObjectHit-Ereignis.
al.objecthit.on(onAreaLayerObjectHit);
var statustext = document.getElementById("statustext");
function onAreaLayerObjectHit(e) {
let statusText = "";
statustext.textContent = "";
if (e.Area) {
// wenn ein Gebiet getroffen wird, den Statustext updaten.
statusText = al.getAreas().getArea(e.Area).getName();
}
statustext.textContent = statusText;
}
</script>
</body>
</html>