Configuration Guide

The configuration options are what make Argo work. This guide will show you the options available to you. To skip to a working example, click here.

A note of welcome: Argo is still under active development. Suggestions and pull requests are most welcome.

Basic Structure

The Argo configuration looks like this at a high level:

{
  map: { /* map options */ },
  baseLayer: { /* base layer options */ },
  layers: [
    { /* layer options */ }
  ]
}

Map Options

The map options are for initial map setup and match the Leaflet Map options.

Option	Type	Default	Description
center	Array	None	An array for the initial center. ie. [lat, lng] or [39.952, -75.163]
zoom	Integer	None	The initial zoom level.
minZoom	Integer	None	The minimum zoom level supported.
maxZoom	Integer	None	The maximum zoom level supported.
maxBounds	Array	None	Restricts the map area to this bounding box, an array of arrays defining the southwest corner and the northeast corner. ie. [ [swLat, swLng], [neLat, neLng] ] or [ [39.786, -75.463], [40.118, -74.864] ]

Base Layer Options

This configures a single TileLayer as the base layer for the map. This section is completely optional and defaults to MapBox Streets tiles based on OpenStreetMap. Common options are listed below, and all options are defined here.

Option	Type	Default	Description
url	String	None	The URL template to the tile server. eg. http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png. See this description for details.
attribution	String	None	The string used to describes the layer data.

Layer Options

The layer configuration objects define each layer on your map, including the data source, style, legend, and popups.

Option	Type	Default	Description
id	String	None	The unique string identifier for this layer.
url	String	None	The URL to a GeoJSON feed.
type	String	jsonp	Defines the type of requests supported including jsonp, json, and geoserver. The geoserver type is available because its query string parameters are not standard.
visible	Boolean	false	Whether a layer is visible by default.
legend	Boolean	true	Whether a layer will appear in the legend.
title	String	None	The title of the layer that will appear in the legend.
description	String	None	What will describe the layer in the legend. HTML allowed.
popupContent	String	None	What will be displayed in the popup. Setting this to a falsey value will disable popups for this layer. Any property in the GeoJSON can be used to style the layer by wrapping it in double mustaches. ie. If the property bus_route_id exists on the GeoJSON and its value is Q29, then a popupContent of 'This is the {{bus_route_id}} bus.' will render as This is the Q29 bus.
rules	Array	None	The list of rules for styling this object.

Style Rules

Each style rule has two attributes: condition and style.

Option	Type	Default	Description
condition	String	None	Any JavaScript-accepted condition. Any property in the GeoJSON can be used to style the layer by wrapping it in double mustaches. ie. If the property bus_route_id exists on the GeoJSON, then '"{{bus_route_id}}" === "Q29"' will apply its style rule where bus_route_id equals the string "Q29". Note that string comparisons must wrap the token in double quotes.
style	Object	None	The style configuration for the layer. This maps to Leaflet's Path Layer options for polygon and polyline geometries. Note that point geometries are represented as a Circle Marker and also support a radius option (pixels, not meters).

Examples

All of these examples can be viewed on our demo. The complete configuration can be found here.

Study Area

This example shows the study area for this map. It does not appear in the legend and is visible by default.

{
  id: 'studyarea',
  url: 'http://gsdemo.dev.openplans.org/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=jackson_heights:studyarea&srsName=EPSG:4326&outputFormat=json',
  type: 'geoserver',
  legend: false,
  visible: true,
  rules: [
    {
      condition: 'true',
      style: {color: '#444444', opacity: 0.9, fillOpacity:0.1, weight:1.5}
    }
  ]
}

Bus Routes

This example show bus route polylines by mapping route ids to a specific color. The bus route is listed in the popup.

{
  id: 'transit',
  url: 'http://gsdemo.dev.openplans.org/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=jackson_heights:transit_linestrings&srsName=EPSG:4326&outputFormat=json',
  type: 'geoserver',
  title: 'Local bus routes',
  description: '<p>Local bus routes considered in this project: Q29, Q32, Q33, Q45, Q47, Q49, Q53.</p>',
  popupContent: 'This is the {{name}} bus.',
  rules: [
    {
      condition: '"{{name}}" === "Q29"',
      style: {color: '#3293fe', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q32"',
      style: {color: '#ac5a32', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q33"',
      style: {color: '#ff84ff', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q45"',
      style: {color: '#d53395', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q47"',
      style: {color: '#580faa', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q49"',
      style: {color: '#335bff', weight: 2, opacity: 0.9}
    },
    {
      condition: '"{{name}}" === "Q53"',
      style: {color: '#8332ac', weight: 2, opacity: 0.9}
    }
  ]
}

Traffic Speeds

This example displays traffic speeds by mapping the average speed property the to a green/yellow/red color scheme.

{
  id: 'trafficspeeds',
  url: 'http://gsdemo.dev.openplans.org/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=jackson_heights:roads&srsName=EPSG:4326&outputFormat=json',
  type: 'geoserver',
  title: 'Traffic speeds',
  description: '<p>Average weekday and weekend speeds. The colors indicate the fastest (green) to slowest (red) traffic speeds.</p><p>Average speed, miles per hour<br><img src="http://a841-tfpweb.nyc.gov/jackson-heights/wp-content/themes/tfp/img/speed-legend.png"></p>',
  popupContent: '{{WDAV}} mph',
  rules: [
    {
      condition: '{{WDAV}} <= 5',
      style: {color: '#fe6565', weight: 4, opacity: 0.9}
    },
    {
      condition: '{{WDAV}} > 5 && {{WDAV}} < 15',
      style: {color: '#fedf65', weight: 4, opacity: 0.9}
    },
    {
      condition: '{{WDAV}} >= 15',
      style: {color: '#65c165', weight: 4, opacity: 0.9}
    }
  ]
}

Street Vendors

This example maps individual street vendors where each point is styled identically and popups are disabled. Note that no property or popupContent are not defined.

{
  id: 'vendors',
  url: 'http://gsdemo.dev.openplans.org/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=jackson_heights:vendors&srsName=EPSG:4326&outputFormat=json',
  type: 'geoserver',
  title: 'Street vendors',
  description: '<p>Locations of street vendors were surveyed on several weekdays and weekends in Fall 2009.</p>',
  rules: [
    {
      condition: 'true',
      style: {color: '#444444', radius: 1, opacity: 0.9}
    }
  ]
}

Crashes

This example maps crash location points by count. The radius of the circle marker is determined by the number of crashes.

{
  id: 'crashes',
  url: 'http://gsdemo.dev.openplans.org/geoserver/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=jackson_heights:Ped_Crashes&srsName=EPSG:4326&outputFormat=json',
  type: 'geoserver',
  title: 'Crashes',
  description: '<p>Reported pedestrian and bicycle crashes within the study area between January 2005 and December 2007. Zoom in to see the number of crashes at each location.</p>',
  popupContent: '{{ICOUNT}} crashes',
  rules: [
    {
      condition: '{{ICOUNT}} > 0 && {{ICOUNT}} < 2',
      style: {color: '#973100', radius: 6, opacity: 0.9, fillOpacity: 0.2}
    },
    {
      condition: '{{ICOUNT}} >= 2 && {{ICOUNT}} < 4',
      style: {color: '#973100', radius: 12, opacity: 0.9, fillOpacity: 0.2}
    },
    {
      condition: '{{ICOUNT}} >= 4 && {{ICOUNT}} < 6',
      style: {color: '#973100', radius: 18, opacity: 0.9, fillOpacity: 0.2}
    },
    {
      condition: '{{ICOUNT}} >= 6',
      style: {color: '#973100', radius: 24, opacity: 0.9, fillOpacity: 0.2}
    }
  ]
}