Marker einzeichnen

Dieses Beispiel zeigt, wie man zwei unterschiedliche Marker in die Karte einzeichnet. Sie können unter anderem die Größe eines Markers, seine Position im Kartenausschnitt und den Popup-Text festlegen.

Das Erstellen des Markers erfolgt in drei Schritten:

  • Die Karte wird initialisiert und hinzugefügt.
  • Die Marker werden definiert.
  • Die Marker werden der Karte hinzugefügt.

SmartMaps-Karte

Testbeispiel Icons und divIcons
Codebereich Bedeutung 
<div id="map" style="height: 400px; width: 500px;">
</div>
 Definiert den Bereich, in dem die Karte später angezeigt wird. Beachten Sie, dass die Karte eine Höhe erhalten muss, um sichtbar zu sein. 
<script></script>

An dieser Stelle steht das Skript, das auf die SmartMaps-API zugreift. Das Skript muss nach dem DIV stehen, in dem die Karte angezeigt werden soll.

Den API-Zugang erhalten Sie nach Registierung auf www.smartmaps.net 

ym.ready();
 Nach Abarbeitung des Callback ym.ready() sind sämtliche Abhängigkeiten aufgelöst und die eigentliche Kartenanwendung kann gestartet werden. 
var map = ym.map("map", {
	center: ym.latLng(49.021403, 8.439620),
	zoom: 19,
});

Mit var map = ym.map() wird die Karte intialisiert und geladen.

Durch den Parameter zoom geben Sie die initiale Zoomstufe der Karte an.

 
var icon = new modules.provider.Icon({
	iconUrl: 
		'http://cdn.yellowmap.de/yellowmaps

                 /img/marker.svg',
	iconRetinaUrl: 
		'http://cdn.yellowmap.de/yellowmaps

                 /img/marker.svg',
	iconSize: [30, 49],
	iconAnchor: [15, 49],
	popupAnchor: [0, -48]
});

Nach dem Initalisieren der Karte soll ein Marker-Icon hinzugefügt werden. Hierzu wird ein neues Icon mit folgenden Eigenschaften definiert:

Parameter Bedeutung
iconURL Pfad des Icons.
iconRetinaUrl Pfad des Icons für hochauflösende Geräte.
iconSize Die Größe des Icons (Breite und Höhe).
iconAnchor Die Stelle des Icons (Breite, Höhe), welches an der definierten Koordinate platziert wird.
popupAnchor Der Punkt, an dem das Popup erscheinen soll.
iconMarkerLatLng Koordinaten des Icons. 
var divIcon = ym.divIcon({
	className: 'markerIcon', 
	iconSize: [40, 40]});
 An dieser Stelle wird als zweiter Marker ein DIV-Icon festgelegt. 
var marker = window.marker = 
	new modules.provider.Marker(iconMarkerLatLng);
marker.setIcon(icon);
marker.addTo(map);
 Der erste Marker wird der Karte hinzugefügt. Wenn Sie weitere Marker zur Karte hinzufügen möchten, dann wiederholen Sie diesen Schritt. Achten Sie dabei darauf, dass die Marker sowie deren Koordinaten eigene Variablennamen haben, z.B. marker2 für Ihren 2. Marker.

Das Beispiel ist vollständig. Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen

Codebeispiel: Marker einzeichnen

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Testbeispiel Icons und divIcons</title>
	<!-- Hier wird beispielhaft eine Klasse für ein DIV-Icon definieren. -->
	<style>
	.markerIcon
	{
		width: 35px;
		height: 35px;
		background: #18345c;
		text-align: center;
		line-height: 34px;
		border-radius: 50%;
		border: 3px solid #ffffff;
		box-shadow: inset 1px 1px rgba(255,255,255,0.1),1px 1px 1px rgba(0,0,0,0.2);
		color: #fff;
		font-weight: bold;  
		font-size: 14px;  
	}
	</style>

</head>
<body>
	<div id="map-wrapper">
		<!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->	
		<div id="map" style="height: 400px; width: 500px;"></div>
	</div>
	<!-- SmartMaps-API einbinden -->
	<script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

	<script>
	ym.ready(function (modules) {

		var map = ym.map("map", {
			center: ym.latLng(49.021403, 8.439620),
			zoom: 19,
		});

		var icon = new modules.provider.Icon({
			iconUrl: 'http://cdn.yellowmap.de/yellowmaps/img/marker.svg',
			iconRetinaUrl: 'http://cdn.yellowmap.de/yellowmaps/img/marker.svg',
			iconSize: [30, 49],
			iconAnchor: [15, 49],
			popupAnchor: [0, -48]
		});

		var divIcon = ym.divIcon({className: 'markerIcon', iconSize: [40, 40]});

		// Koordinaten des Markers festlegen
		var iconMarkerLatLng = ym.latLng(49.021192, 8.439603);
		// Marker definieren
		var marker = window.marker = new modules.provider.Marker(iconMarkerLatLng);
		// icon des Markers definieren => SVG-Icon
		marker.setIcon(icon);
		// Marker einzeichnen
		marker.addTo(map);

		// Koordinaten des zweiten Markers festlegen
		var divIconMarkerLatLng = ym.latLng(49.021603, 8.439620);
		// Marker definieren
		var divIconmarker = window.marker = new modules.provider.Marker(divIconMarkerLatLng);
		// Icon des Markers definieren => DIV-Icon
		divIconmarker.setIcon(divIcon);
		// Marker einzeichnen
		divIconmarker.addTo(map);	

	});
</script>

</body>
</html>