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).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()),
	iconFav.clone(), 
	"Store #985",
	{ 
		map: map,
		mouseOver: true
	}    
);
markerLayer.addMarker(mkrFav);

map.setCenter(new ALKMaps.LonLat(-84.5, 40.5).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), 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).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()),
	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).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()),
					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).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), 7);

Marker2

The ALKMaps.Marker2 class provides a way to create completely customizable markers from user defined HTML or even SVG. The parameters for the constructor are explained in the table below.

Using the ALKMaps.Marker2 class also provides other advantages over the regular ALKMaps.Marker while a still using the same ALKMaps.Layer.Markers layer. For example ALKMaps.Marker2 markers can be clustered using the ALKMaps.Strategy.MarkerCluster strategy.

Parameter Type Description

id String ID of the marker

lonlat ALKMaps.LonLat Location of the marker

contentSize ALKMaps.Size Size of the content

contentHTML String HTML or SVG content string

closeBox

Object

Property	Type	Description
`size`	`ALKMaps.Size`	Size of the close box
`displayClass`	`String`	CSS class of the callback
`callback`	`Function`	Callback function called on closebox click

attributes

Object

Property	Type	Description
`popupSize`	`ALKMaps.Size`	Size of the popup
`popupContentHTML`	`String`	HTML contents of the popup
`anchor`	`Object`	Popup achor containing size and offset properties
`overflow`	`String`	Popup overflow style such as 'auto'.

HTML Content and Popup

//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);
				
map.setCenter(new ALKMaps.LonLat(-104.5, 40.5).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), 7);
                        
var content = '<div style="height: 40px; width: 60px; font-weight:bold; color:white;">My Marker2</div>';
    
var marker2 = new ALKMaps.Marker2("marker2", map.getCenter(), new ALKMaps.Size(60,40), content, 
    null,
    {
        popupSize: ALKMaps.Size(50,30),
        popupContentHTML: '<div>Marker2 Popup</div>',
        anchor: { size: new ALKMaps.Size(0, 0), offset: new ALKMaps.Pixel(65, 0) },
        overflow: "auto"
    }
);
marker2.backgroundColor = "black";
markerLayer.addMarker(marker2);

Anchored

By default the top left corner of the marker's div is placed at the specified location. If the marker's background color is transparent and/or the marker should be centered on the location, it can cause the illusion that the marker is being placed at the wrong location or that the marker is even moving when the map is zoomed out.

This issue can be resolved by instead using a ALKMaps.Marker2.Anchored marker allowing you to specify a pixel offset. The only difference is an additional anchor parameter directly after the content parameter. The anchor parameter is simply an object containing "size" ALKMaps.Size and "offset" ALKMaps.Pixel properties. This is demonstrated in the sample code below.

SVG Content

In this example the ALKMaps.Marker2.Anchored.topleft function is being used to create a marker placed at the top left corner of the original div. There are also topright, bottomleft, and bottomright functions as well.

//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);
				
map.setCenter(new ALKMaps.LonLat(-104.5, 40.5).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), 7);
                        
var content = '<svg width="34" height="34" xmlns="http://www.w3.org/2000/svg" >' +
    '<circle id="svgCircle" stroke="#FFF" fill="green" cx="16" cy="16" r="16" />' +
    '<text id="svgText" x="16" y="20" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="#FFF" textContent="1">1</text>' +
    '</svg>';
    
var marker2 = ALKMaps.Marker2.Anchored.topleft(
    "marker2",
    map.getCenter(),
    new ALKMaps.Size(34,34),
    content, 
    {
        size: new ALKMaps.Size(0,0),
        offset: new ALKMaps.Pixel(17,17)
    },
    null,
    null
);
marker2.backgroundColor = "transparent";
markerLayer.addMarker(marker2);

Clustering

If you have a markers layer with the potential of a high density of points, you may choose to use clustering to provide a cleaner visualization of those points. Please note that clustering will only work with ALKMaps.Marker2 markers.

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
map.setCenter(new ALKMaps.LonLat(-74.6, 40.25).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()), 7);

//Add cluster strategy to markers layer
var clusterStrategy = new ALKMaps.Strategy.MarkerCluster({ distance: 20, threshold: 2 });
var markerLayer = new ALKMaps.Layer.Markers("Marker Layer",
	{ 
		strategies: [clusterStrategy]
	});
map.addLayer(markerLayer);

//Add 20 random points to the map
var markersArray = [];
for (var i = 0; i < 20; i++) {
	var lon = Math.random() * 0.5 + -75.0;
	var lat = Math.random() * 0.5 + 40.0;
	
    var marker2 = new ALKMaps.Marker2(
        "marker2_" + i, 
        new ALKMaps.LonLat(lon, lat).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject()),
        new ALKMaps.Size(32,32),
        '<img width="30" height="30" src="'+ ALKMaps.IMAGE.TRUCK_GREEN + '"><img>', 
        null,
        null
    );
    marker2.backgroundColor = "transparent";
	markersArray.push(marker2);
}
markerLayer.addMarkers(markersArray);

Strategy

When clustering is enabled, the map will automatically cluster points on the chosen layer based on two criteria. The first is a distance specified in pixels. The second criteria is a threshold of the number of points.

You now have the ability to specify the maximum zoom level at which markers will be clustered by setting the maxZoomLevel property to the desired zoom level integer. You can set this property value inside the options object of your strategy definition. This can be useful when you have more than one marker either extremely close or at the exact same location, or if you only want to cluster at lower zoom levels where the markers can appear too jumbled.

var clusterStrategy = new ALKMaps.Strategy.MarkerCluster({ distance: 20, threshold: 2, maxZoomClustering: false });
var markerLayer = new ALKMaps.Layer.Markers("Marker Layer",
	{ 
		strategies: [clusterStrategy]
	});
map.addLayer(markerLayer);