Skip to main content

Markers

Contents

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.

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.

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 theALKMaps.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 anchor containing size and offset properties
overflow String Popup overflow style such as 'auto'.

HTML Content and Popup

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.

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.

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);
Last updated November 23, 2021.
Contents