Skip to content
This repository

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}
    }
  ]
}
Something went wrong with that request. Please try again.