Developer Guide

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.

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer");
map.addLayers([layer,vectorLayer]);

map.setCenter(new ALKMaps.LonLat(-74.655522, 40.367494), 9);

var pointFeature = new ALKMaps.Feature.Vector(
	new ALKMaps.Geometry.Point(-74.655522, 40.367494), 
	null, 
	{
		pointRadius: 10,
		fillColor: "#4444FF",
		label: "Store #463",
		labelYOffset: 20,
		fontWeight: "bold",
		fontColor: "#0000AA"
	}
);

vectorLayer.addFeatures([pointFeature]);

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 paramter.

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer");
map.addLayers([layer,vectorLayer]);

map.setCenter(new ALKMaps.LonLat(-74.655522, 40.367494), 9);

var pointFeature = new ALKMaps.Feature.Vector(
	new ALKMaps.Geometry.Point(-74.655522, 40.367494), 
	null, 
	{
		externalGraphic: "http://www.alk.com/img/alk-logo-icon.png",
		graphicHeight: 27, 
		graphicWidth: 32
	}
);

vectorLayer.addFeatures([pointFeature]);

Lines

Lines are drawn using ALKMaps.Geometry.LineString

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer");
map.addLayers([layer,vectorLayer]);

map.setCenter(new ALKMaps.LonLat(-74.7, 39.65), 7);

var lineFeature = new ALKMaps.Feature.Vector(
	new ALKMaps.Geometry.LineString([
		new ALKMaps.Geometry.Point(-75.173297, 39.942892),
		new ALKMaps.Geometry.Point(-74.438942, 39.362469)
	]),
	null, 
	{
		strokeColor: "#EE33EE",
		strokeWidth: 5
	}
);

vectorLayer.addFeatures([lineFeature]);

LinearRing

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

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer");
map.addLayers([layer,vectorLayer]);

map.setCenter(new ALKMaps.LonLat(-75.7, 40.9), 4);
var points = [
		new ALKMaps.Geometry.Point(-74.0, 40.7),
		new ALKMaps.Geometry.Point(-77.0, 38.8),
		new ALKMaps.Geometry.Point(-80.0, 40.4),
		new ALKMaps.Geometry.Point(-77.6, 43.1)
	];
var ringFeature = new ALKMaps.Feature.Vector(
	new ALKMaps.Geometry.LinearRing(points),
	null, 
	{
		fillColor: "#AA0000",
		fillOpacity: 0.5,
		strokeColor: "#AA0000",
		strokeWidth: 3
	}
);

vectorLayer.addFeatures([ringFeature]);

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.

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {}, {displayInLayerSwitcher: false});
var vectorLayer = new ALKMaps.Layer.Vector("Vector Layer");
map.addLayers([layer,vectorLayer]);

map.setCenter(new ALKMaps.LonLat(-75.7, 40.9), 4);
var ring1 = [
			new ALKMaps.Geometry.Point(-74.0, 40.7),
			new ALKMaps.Geometry.Point(-77.0, 38.8),
			new ALKMaps.Geometry.Point(-80.0, 40.4),
			new ALKMaps.Geometry.Point(-77.6, 43.1)
		];
var ring2 = [
			new ALKMaps.Geometry.Point(-75.0, 40.7),
			new ALKMaps.Geometry.Point(-77.0, 39.8),
			new ALKMaps.Geometry.Point(-79.0, 40.4),
			new ALKMaps.Geometry.Point(-77.6, 42.1)
		];
var polyFeature = new ALKMaps.Feature.Vector(
	new ALKMaps.Geometry.Polygon([
		new ALKMaps.Geometry.LinearRing(ring1),
		new ALKMaps.Geometry.LinearRing(ring2)
	]),
	null, 
	{
		fillColor: "#0000AA",
		fillOpacity: 0.5,
		strokeColor: "#0000AA",
		strokeWidth: 3
	}
);

vectorLayer.addFeatures([polyFeature]);

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.

//ALKMaps.APIKey = "YOUR_KEY_HERE";

var map = new ALKMaps.Map("map");
map.setCenter(new ALKMaps.LonLat(-74.6, 40.25), 7);

//Define styles for normal and clustered points
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 : "";
		}
	}
});

pointStyleMap = new ALKMaps.StyleMap({
	default: pointStyle
});

//Add cluster strategy to vector layer
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);

//Add 20 random points to the map
var featureArray = [];
for (var i = 0; i < 20; i++) {
	var lon = Math.random() * 0.5 + -75.0;
	var lat = Math.random() * 0.5 + 40.0;
	var pointFeature = new ALKMaps.Feature.Vector(
		new ALKMaps.Geometry.Point(lon, lat)
	);

	featureArray.push(pointFeature);
}

vectorLayer.addFeatures(featureArray);

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.

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

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