Layers

Layers contain various types of relevant data that is overlayed onto the map, making it visible to the user. You will normally have one base layer (see BaseMap Layer) and one or more other layers that overlay the base layer. These overlays will augment the base layer with things such as routing information, traffic, weather, etc.

Layers are added to your map through either the addLayer or addLayers methods. The addLayer method takes a single layer as a parameter, the addLayers method takes an array of one or more layers.

myMap.addLayer(
  new ALKMaps.Layer.BaseMap(
    "ALK Maps",
    {region: "NA"},
    {displayInLayerSwitcher: false}
  )
);

Visibility of the layers can be controlled either programmatically or by the user via the LayerSwitcher control.

BaseMap Layer

The BaseMap layer provides you with a map that allows you to choose both a map style and what features you would like to display on the map.

var baseMapLayer = new ALKMaps.Layer.BaseMap(
  "ALK Maps",
  {region: "EU"},
  {displayInLayerSwitcher: false}
);

Starting from version 1.2, the default projection for any BaseMap layer instance is Spherical Mercator.

Key Properties and Methods

The displayProjection property of the map object controls the projection that is displayed by the controls added to the map.

var map = new ALKMaps.Map("map", {
  displayProjection: new ALKMaps.Projection("EPSG:4326")
});

The transform method is available on various objects throughout ALKMaps. The main usage is with the LonLat object.

//From longitude/latitude to spherical mercator map
var center = new ALKMaps.LonLat(-100, 64);
center.transform(
  new ALKMaps.Projection("EPSG:4326"),
  map.getProjectionObject()
);

Starting in version 1.2, there are functions to transform entire arrays of ALKMaps.LonLat or ALKMaps.Geometry.Point objects between projections. This can be done by passing an array followed by the source and destination projections to either the ALKMaps.LonLat.transformArray or ALKMaps.Geometry.Point.transformArray functions.

Example: var lonLats = [
  new ALKMaps.LonLat(-75.173297, 39.942892),
  new ALKMaps.LonLat(-74.83153, 39.61703),
  new ALKMaps.LonLat(-74.438942, 39.362469)
];
lonLats = ALKMaps.LonLat.transformArray(
  lonLats,
  new ALKMaps.Projection("EPSG:4326"),
  map.getProjectionObject()
);

Routing Layer

The Routing layer allows you to generate and display routes base on two or more geocoded stops. Routes can be static or interactive.

var routingLayer = new ALKMaps.Layer.Routing( "Route Layer" );
routingLayer.addRoute({...});

See Routing for details on setting up the route layer and displaying routes.

Traffic Layer

The Traffic layer allows you to display real-time or historical traffic data overlayed on the current map.

The traffic layer is only intended to be used in the Spherical Mercator projection.

var trafficLayer = new ALKMaps.Layer.Traffic("ALK LiveTraffic;", {}, {});

See Traffic for details on setting up the traffic layer and displaying real-time or historical traffic data.

Vector Layer

The Vector layer allows you to overlay vector based information onto the map. Vector layers are commonly used with the EditPanel option of the NavPanel control.

var vectorLayer = new ALKMaps.Layer.Vector("Drawing Layer");

WMS Layer

The WMS layer allows you to display data served according to the Web Mapping Service standard overlayed on the current map.

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap(
  "ALK Maps",
  {style: ALKMaps.STYLE.MONOCHROME},
  {displayInLayerSwitcher: false, singleTile: true, sphericalMercator: false}
);
map.addLayer(layer);

var cloudLayer = new ALKMaps.Layer.WMS(
  "Visible Clouds",
  "http://mesonet2.agron.iastate.edu/cgi-bin/wms/goes/conus_vis.cgi",
  {
    request: "GetMap",
    service: "wms",
    Layers: "conus_vis_4km",
    format: "png",
    transparent: true,
    f: "image"
  },
  {
    isBaseLayer: false,
    opacity: 0.5,
    visibility: true,
    singleTile: true
  }
);
map.addLayer(cloudLayer);

WeatherRadar Layer

The WeatherRadar layer allows you to display real-time or historical weather data overlayed on the current map. Using the display parameter, you can choose to display either “radar” or “satellite” weather data.

Starting in version 1.2, the WeatherRadar layer will be in the Spherical Mercator projection by default.

var radarLayer = new ALKMaps.Layer.WeatherRadar(
  "Radar",
  {
    display: "radar"
  },
  {
    opacity: 1
  }
);

Markers Layer

The layer allows you to add markers on the current map.

var markerLayer = new ALKMaps.Layer.Markers("Marker Layer");