Draw markers

This example shows how to draw two different markers into the map. Among other things, you can define the size of a marker, its position in the map section and the popup text.

The marker is created in three steps:

  • The map is initialized and added.
  • The markers are defined.
  • The markers are added to the map.

SmartMaps map

Testbeispiel Icons und divIcons
Code area Meaning 
<div id="map" style="height: 400px; width: 500px;">
</div>
 Defines the area where the map will be displayed later. Note that the map must be given a height to be visible. 
<script></script>

At this point you will find the script that accesses the SmartMaps API. The script must be after the DIV in which the map is to be displayed.

You will receive API access after registering on www.smartmaps.net 

ym.ready();
 After processing the callback ym.ready() all dependencies are resolved and the actual map application can be started. 
var map = ym.map("map", {
	center: ym.latLng(49.021403, 8.439620),
	zoom: 19,
});

With var map = ym.map() the map is initialized and loaded.

With the parameter zoom you specify the initial zoom level of the map.

 
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]
});

After initializing the map, a marker icon should be added. For this purpose a new icon with the following properties is defined:

Parameter Bedeutung
iconURL Path of the icon.
iconRetinaUrl Path of the icon for high-resolution devices.
iconSize The size of the icon (width and height in pixel).
iconAnchor The part of the icon (width and height in pixel), which is put at the location of the defined coordinate.
popupAnchor The point (width and height in pixel) at which the popup should appear. 
var divIcon = ym.divIcon({
	className: 'markerIcon', 
	iconSize: [40, 40]});
 At this point, a DIV icon is defined as the second marker. 
var marker = window.marker = 
	new modules.provider.Marker(IconMarkerLatLng);
	marker.setIcon(icon);
	marker.addTo(map);
 The first marker is added to the map.

The example is complete; you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey

Code example: Draw in markers

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test example icons and divIcons</title>
	<!-- Here is an example of how to define a class for a DIV icon. -->
	<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">
		<!-- Predefined DIV element into which the map is loaded. -->	
		<div id="map" style="height: 400px; width: 500px;"></div>
	</div>
	<!-- Include SmartMaps API -->
	<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]});

		// Set marker coordinates
		var IconMarkerLatLng = ym.latLng(49.021192, 8.439603);
		// Define markers
		var marker = window.marker = new modules.provider.Marker(IconMarkerLatLng);
		// define icon of the marker => SVG-Icon
		marker.setIcon(icon);
		// Draw markers
		marker.addTo(map);

		// Set coordinates of the second marker
		var divIconMarkerLatLng = ym.latLng(49.021603, 8.439620);
		// Define markers
		var divIconmarker = window.marker = new modules.provider.Marker(divIconMarkerLatLng);
		// Define marker icon => DIV icon
		divIconmarker.setIcon(divIcon);
		// Draw markers
		divIconmarker.addTo(map);	

	});
</script>

</body>
</html>