MapQuest-GL.js

mqgl.Map.draw

Draw polygons, polylines, and circles on the map.

Methods

mqgl.Map.draw.line
mqgl.Map.draw.polygon
mqgl.Map.draw.circle

mqgl.Map.draw.line(points, color, thickness)

Draws a polyline on the map

Syntax

var map = new mqgl.Map('map', 'KEY');

map.load( () => {
  map.draw.line([[-104.984855, 39.738452], [-105.279266, 40.01583]], 'red', 4);
  map.fitBounds();
});

Parameters

  • points required array of multiple [lng, lat]

    An array of lng,lat arrays.

    Example: 2 point line

    [[-104.984855, 39.738452], [-105.279266, 40.01583]]

  • color string

    rgb, hex, or color name for the line.

  • thickness number

    An interger value for the thickness of the line (1 is thinnest).

Return Value

The DOM ID assigned to the line.

Visual Example

mqgl.Map.draw.polygon(points, color, opacity)

Draws a polygon on the map

Syntax

var map = new mqgl.Map('map', 'KEY');

map.load( () => {
  map.draw.polygon([[-104.984855, 39.738452], [-105.279266, 40.01583], [-105.084419, 40.585258], [-104.984855, 39.738452]], 'red', 0.8);
  map.fitBounds();
});

Parameters

  • points required array of multiple [lng, lat]

    An array of lng,lat arrays.

    Example: 2 point polygon

    [[-104.984855, 39.738452], [-105.279266, 40.01583]]

  • color string

    rgb, hex, or color name for the polygon.

  • opacity number

    The opacity of the fill. Range 0 - 1: 1 = opaque, 0 = transparent.

Return Value

The DOM ID assigned to the polygon.

Visual Example

mqgl.Map.draw.circle(center, radius, color, opacity)

Draws a circle on the map

Syntax

var map = new mqgl.Map('map', 'KEY');

map.load( () => {
  map.draw.circle([-104.984855, 39.738452], 6, 'red', 0.8);
  map.fitBounds();
});

Parameters

  • points required array [lng, lat]

    The center of the circle.

    Example:

    [-104.984855, 39.738452]

  • radius number

    The km radius of the circle.

  • color string

    rgb, hex, or color name for the circle.

  • opacity number

    The opacity of the fill. Range 0 - 1: 1 = opaque, 0 = transparent.

Return Value

The DOM ID assigned to the circle.

Visual Example