Vectors

Vector Layer

All the vector objects discussed in this section must be added to a Vector layer to be visible. The vector objects are added through the addFeatures method of the Vector layer.

Points

Points can be used to mark specific locations on the map. The point can be drawn and styled as either a point of a particular radius or as an image.

Vector points are drawn using the ALKMaps.Feature.Vector. The first parameter of the Vector object is a ALKMaps.Geometry.Point defining the location for the point. The second parameter is addition attributes related to the point. The third parameter is for style definition.

Image Points

In addition to manually styling the point, you can place an image at the desired location. This is done using different properties of the style parameter.

SVG Points

You now have the ability to specify custom SVG content for point vectors using the svg attribute of the given feature. The available properties of the svg object are explained in the table below.

Lines

Lines are drawn using ALKMaps.Geometry.LineString

Vector Arrows

You now have the ability to add arrows along or at the end of your ALKMaps.Geometry.LineString and ALKMaps.Geometry.MultiLineString vectors. This is done using the arrow styling properties added to the same style object parameter used to do the rest of your vector styling. Please see the table below for a description of these properties.

Please note that you cannot use a ALKMaps.StyleMap to add arrows to your vectors. The arrow style properties will only work if they are specified inside the style object parameter of the individual ALKMaps.Feature.Vector.

LinearRing

A ALKMaps.Geometry.LinearRing object represents a closed sequence of points that can be filled. LinearRings are constructed from an array of points.

Polygons

Polygons are constructed using a collection of ALKMaps.Geometry.LinearRing objects. The first ring object in the collection should represent the outer bounds of the polygon and the rest of the ring objects represent internal holes.

Clustering

If you have a vector layer with the potential of a high density of points, you may choose to use clustering to provide a cleaner visualization of those points.

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 vectors 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 vector either extremely close or at the exact same location, or if you only want to cluster at lower zoom levels where the vectors can appear too jumbled.

var clusterStrategy = new ALKMaps.Strategy.Cluster({
  distance: 20,
  threshold: 2
});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer", {
  strategies: [clusterStrategy],
  styleMap: pointStyleMap
});
map.addLayer(vectorLayer);

Cluster by Attribute/Rule

Starting in version 1.2, in addition to distance and threshold you have the ability to cluster by attribute and/or rule. This can be done by specifying the attribute and rule properties of your cluster strategy. If an attribute is specified, only features with matching values for the specified attribute will be clustered together. If a rule is specified, only features that satisfy the rule are eligible for clustering.

This cluster strategy will only cluster vectors together if they have the same “highway” attribute value.

var clusterStrategy = new ALKMaps.Strategy.Cluster({
  distance: 50,
  threshold: 2,
  attribute: "highway"
});

This cluster strategy will only cluster vectors containing a “Company” attribute with a value of “My Truck Company”.

var rule = new ALKMaps.Rule({
  filter: new ALKMaps.Filter.Comparison({
    type: ALKMaps.Filter.Comparison.EQUAL_TO,
    property: "Company",
    value: "My Truck Company"
  })
});

var clusterStrategy = new ALKMaps.Strategy.Cluster({
  distance: 50,
  threshold: 2,
  rule: rule
});

Styles

To make the most of clustering, you will want to vary the styling of clustered points. You can create a style for your points that uses dynamic values to changes the visualization based on clustering.

var pointStyle = new ALKMaps.Style(
  {
    strokeColor: "#116666",
    pointRadius: "${radius}",
    strokeWidth: 2,
    fillColor: "${fill}",
    label: "${label}"
  },
  {
    context: {
      fill: function(feature) {
        return feature.cluster ? "#99EEEE" : "#66AAAA";
      },
      radius: function(feature) {
        return feature.cluster ? 15 : 8;
      },
      label: function(feature) {
        return feature.cluster ? feature.cluster.length : "";
      }
    }
  }
);

Dynamic values in styles are handled via the context of the style. Each function in the context will receive the feature as a parameter to allow for inspection and use in the dynamic value. If the feature is a cluster, it will have a cluster property which is an array of the features in the cluster. More details are at Styling section