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.

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.

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