VectorMarkers

The ALKMaps.Layer.VectorMarkers layer is a new layer available in version 1.2. The VectorMarkers layer incorporates many of the desirable attributes of markers and the ALKMaps.Layer.Markers layer without having many of the limitations that come with using regular markers. Markers on the VectorMarkers layer can have popups, can be styled from a list of premade types or custom styled to your own specifications, and unlike the ALKMaps.Layer.Markers layer the ALKMaps.Layer.VectorMarkers layer can be used interactively in conglomeration with multiple layers.

Create a New Marker

You can add a new marker to your VectorMarkers layer using the createMarker function. The three parameters are a ALKMaps.LonLat object, an attributes object, and an optional style object for custom styling. The list of possible attributes is laid out in the table below.

Using a Basic markerType

This example demonstrates how to create a VectorMarker with a popup using one of the basic markerTypes.

Using The Style Parameter

This example demonstrates how to create and style a VectorMarker using the style parameter. If using the style parameter, you do not need to specify a markerType.

Using Custom markerType

This example demonstrates the use of a “custom” markerType, by adding a styleMap to your VectorMarkers layer.

FeatureEvent

In order to accommodate the need for the same interactive capabilities seen in the ALKMaps.Layer.Markers layer with the new ALKMaps.Layer.VectorMarkers layer, a new control was created. The ALKMaps.Control.FeatureEvent control allows you to control event handling over multiple layers.

The feature event control can be used on the ALKMaps.Layer.Vector and ALKMaps.Layer.Routing layers as well, but by default every VectorMarker comes with the attribute isMarker set to true. This allows you to filter out other feature events using the featureAttributesFilter, so that only VectorMarkers are affected.

For further information on the ALKMaps.Control.FeatureEvent control, please visit the FeatureEvent section of the Controls guide page: FeatureEvent

var eventSelect = new ALKMaps.Control.FeatureEvent(
  [vectorMarkersLayer, routingLayer],
  {
    featureAttributesFilter: [{property: "isMarker", value: true}]
  }
);
map.addControls([eventSelect]);
eventSelect.activate();

// Display VectorMarker popup on click
var clickHandler = function (event) {
  event.feature.createPopup(true);
  // passing true will cause the popup to be displayed with a close button.
  map.addPopup(event.feature.popup, true);
  // passing true for the second parameter will cause all other popups to close when this popup is opened.
  event.feature.popup.show();
};
vectorMarkersLayer.events.register("featureclicked", this, clickHandler);