Tutorial - Markers

Create a map with a tile layer, define some data, and create a feature layer.

Step 1

Active

Inactive

Create a marker feature and set the data. The default marker feature looks just line a point feature -- circles with borders.

Step 2

Active

Inactive

Markers have many different symbols and style options:

symbol: the symbol shape, enumerated in geo.markerFeature.symbols. This includes ellipse, triangle (isosceles triangles), rectangle, oval, and drop. There are symmetric repeating patterns such as cross4, flower6, star5, jack6, and drop8, where the number is the rotational symmetry from 2 to 16.
symbolValue: a number that modifies how the symbol appears, usually in the range of [0, 1]. This is often the ratio of the minor axis of the symbol to its major axis. For triangle, it is the length of the base side compared to the identical sides.
rotation: the rotation in radians.
rotateWithMap: a boolean; if true, the symbol rotates when the map is rotated. If false, it remains in the same orientation on the screen.
radius: in pixels. This includes the stroke width, if any.
strokeWidth: the width of the stroke around the symbol in pixels.
scaleWithZoom: one of the values defined in geo.markerFeature.scaleModes. If none, the symbols remains the same size when the map is zoomed. This can also be fill, stroke, or all, in which case the symbol will change size when the map is zoomed. The radius and strokeWidth are in pixels at zoom level 0.
fillColor
fillOpacity
strokeColor
strokeOpacity:

Step 3

Active

Inactive

When scaling a marker with the map, the radius and stroke width are the values at zoom level 0.

Step 4

Active

Inactive

Markers are drawn efficiently, even if they all have different styles. This creates a large sample of symbols, each with a different style.

let count = 1000, markers = [];

for (let i = 0; i < count; i += 1) {
  let symbol = Math.floor(Math.random() * geo.markerFeature.symbols.length);
  let symbolValue = Math.random();
  if (symbol === geo.markerFeature.symbols.triangle) {
    // triangles use a larger range than most symbols
    symbolValue *= 2;
  } else if (symbol >= geo.markerFeature.symbols.arrow && symbol < geo.markerFeature.symbols.arrow + geo.markerFeature.symbols.arrowMax) {
    // arrow symbols can take an array to specify their shape
    symbolValue = [
      Math.random(),
      Math.random(),
      Math.random() > 0.1 ? Math.random() : 0,
      Math.random() >= 0.5
    ];
    if (symbol >= geo.markerFeature.symbols.arrowBase) {
      symbolValue[0] /= 2;
      symbolValue[1] /= 2;
      symbolValue[2] /= 2;
    }
  }
  markers.push({
    x: Math.random() * 50 - 120,
    y: Math.random() * 40 + 10,
    radius: Math.random() * 30 + 5,
    strokeWidth: Math.random() > 0.1 ? Math.random() * 5 : 0,
    symbol: symbol,
    symbolValue: symbolValue,
    fillColor: {r: Math.random(), g: Math.random(), b: Math.random()},
    fillOpacity: Math.random(),
    strokeColor: {r: Math.random(), g: Math.random(), b: Math.random()},
    strokeOpacity: 0.5 + Math.random() * 0.5,
    rotation: Math.random() * Math.PI * 2
  });
}
feature.data(markers).position(d => d).style({
  radius: d => d.radius,
  strokeWidth: d => d.strokeWidth,
  symbol: d => d.symbol,
  symbolValue: d => d.symbolValue,
  fillColor: d => d.fillColor,
  fillOpacity: d => d.fillOpacity,
  strokeColor: d => d.strokeColor,
  strokeOpacity: d => d.strokeOpacity,
  rotation: d => d.rotation,
  scaleWithZoom: geo.markerFeature.scaleMode.none,
  rotateWithMap: true
}).draw();

Step 5

Active

Inactive