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.
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 layed out in the table below.
Attributes |
||
---|---|---|
Parameter | Type | Description |
isMarker | Boolean |
This is a Read-Only attribute set to true by the system. |
markerType | String |
|
popupSize | ALKMaps.Size |
Specifies size of the marker's popup. (Optional) |
popupContentHTML | String |
HTML string used to populate the contents of the marker popup. (Optional) |
anchor | Object |
Object used to anchor the popup. The anchor parameter has two properties, size ALKMaps.Size and offset ALKMaps.Pixel . (Optional) |
overflow | String |
Setting for popup overflow style e.g. 'auto' (Optional) |
This example demonstrates how to create a VectorMarker with a popup using one of the basic markerTypes.
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
.
This example demonstrates the use of a "custom" markerType
, by adding a styleMap to your VectorMarkers layer.
In order to accomodate the need for the same interactive capabilites 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);