Developer Guide

Markers

The ALKMaps.Layer.Markers layer allows you to add markers on the current map.

Simple Marker

There are four parameters for creating a new ALKMaps.Marker object. The first parameter is an ALKMaps.LonLat object containing the location where the marker will be placed on the map. The second parameter is an ALKMaps.Icon used to specify the graphic and size used to display the marker. The third parameter is an optional string parameter containing a text label that will be displayed when a mouse is hovering over the marker. The fourth and final parameter is an options object described in the table below.

Parameter	Type	Description
`map`	`ALKMaps.Map`	The map this marker is attached to.
`mouseOver`	`Boolean`	When a label is supplied, if mouseOver is true, label will show only on mouse over; otherwise label will always show. Default: true
`offset`	`ALKMaps.Pixel`	Label offset in pixels.
`eventListeners`	`Object`	Used to specify what to do when each event is triggered.

Once you have created a ALKMaps.Marker object, you can add it to your ALKMaps.Layer.Markers layer using the addMarker function.

//ALKMaps.APIKey = "YOUR_KEY_HERE";
		
var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
map.addLayer(layer);
					
var markerLayer = new ALKMaps.Layer.Markers("Marker Layer");
map.addLayer(markerLayer);
					
var iconFav = new ALKMaps.Icon(ALKMaps.IMAGE.FAVORITE, new ALKMaps.Size(30,30));
var mkrFav = new ALKMaps.Marker(
	new ALKMaps.LonLat(-84.5, 40.5),
	iconFav.clone(), 
	"Store #985",
	{ 
		map: map,
		mouseOver: true
	}    
);
markerLayer.addMarker(mkrFav);

map.setCenter(new ALKMaps.LonLat(-84.5, 40.5), 6);

Note that if you pass an icon into the Marker constructor, it will take that icon and use it. This means that you should not share icons between markers -- you use them once, but you should clone() for any additional markers using that same icon.

Marker with Popup

In order to anchor a popup to your marker that appears when the marker is clicked, you will need to use the eventListeners property of the options parameter object. The eventListeners property of ALKMaps.Marker supports three events "markerover" which is triggered when the mouse is over a marker, "markerout" triggered when the mouse exits a marker, and "markerclick" triggered when the mouse clicks on a marker. Inside the function for the "markerclick" (or "markerover") event listener you will create a new ALKMaps.Popup.Anchored or ALKMaps.Popup.FramedCloud object, and pass the ALKMaps.Icon object used to create your marker as the 5th parameter in order to anchor it. Finally you will pass your marker to the addPopup function of your ALKMaps.Map.

//ALKMaps.APIKey = "YOUR_KEY_HERE";
		
var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
map.addLayer(layer);
					
var markerLayer = new ALKMaps.Layer.Markers("Marker Layer");
map.addLayer(markerLayer);
					
var iconTruck = new ALKMaps.Icon(ALKMaps.IMAGE.TRUCK_GREEN, new ALKMaps.Size(30,30));
var mkrTruck = new ALKMaps.Marker(
	new ALKMaps.LonLat(-104.5, 40.5),
	iconTruck.clone(), 
	null, // Set label text to null in order not to show default label.
	{ 
		map: map,
		eventListeners:{            
			// Show popup when click on the marker icon
			"markerclick": function(evt){
				var fpopup = new ALKMaps.Popup.FramedCloud("FramedCloud1",
					new ALKMaps.LonLat(-104.5, 40.5),
					new ALKMaps.Size(180, 800),
					"<p><b>Driver status:</b> Dispatched<br/><b>Cell Phone:</b>12345678<br/></p>",
					iconTruck,
					true        // Show close icon
				);        
				map.addPopup(fpopup, true);
				return false; // In order to cancel default marker over event handler
			}
		}
	}    
);
markerLayer.addMarker(mkrTruck);

map.setCenter(new ALKMaps.LonLat(-104.5, 40.5), 7);

Developer Guide

Leaflet Guide

OpenLayers Guide

Markers

Simple Marker

Marker with Popup