b-roll: Aaron introduces us to Argo, an easy way to make maps

We make many kinds maps here at OpenPlans. Some maps, like the animated bike share visualization and OTP Analyst, are very complex. Others like the Jackson Heights data maps are more straightforward. It is these straightforward data maps that present a great opportunity for us to give more control to our users.

Enter Argo. Argo is an experiment in configurable open source maps. Much like a non-coder can use WordPress to quickly get a blog up and running, Argo makes it easy for cities and organizations to quickly put simple maps online.

Overlays easy as checking a checkbox.

Argo is built on the popular Leaflet mapping library. Leaflet is quite robust, but in this case we prefer simplicity to flexibility and achieve that by limiting the number of options. Like I said, this is a tool for straightforward uses. Out of the box, Argo supports:

  • A map with configurable map bounds, zooms, and center point
  • One tile layer for the base map
  • One or more GeoJSON layers that can be styled based on a feature’s data
  • A legend to provide additional information and toggle a layer’s visibility

The configuration is a JSON object. All of Argo’s configuration options can be found in the project wiki and a working example can be found here.  Below is a short config example:

{
  map: {
    center: [40.74857, -73.88802],
    zoom: 15,
    minZoom: 13,
    maxZoom: 17
  },
  baseLayer: {
    url: 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png',
    attribution: '© OpenStreetMap contributors, CC-BY-SA.'
  },
  layers: [
    {
      id: 'trafficspeeds',
      url: 'http://example.com/data/trafficspeeds/',
      type: 'json',
      title: 'Traffic speeds',
      description: 'Average weekday and weekend speeds.',
      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}
        }
      ]
    }
  ]
}

Here is a working example using a configuration similar to the one above.

Even this config file can be intimidating for beginners, so Chris Abraham, our WordPress guru, has created a plugin to abstract most of the config into the WordPress admin interface. Check out the plugin page here. For busy city staff wanting to share GIS files on their project websites, Argo + PlanningPress makes it easy to put maps onto pages without getting into a complicated configuration process.

Please take Argo for a spin. As always, we appreciate your feedback.

b-roll is an ongoing series on the OpenPlans blog.

We’ll be giving you updates on in-progress work across our projects, straight from the code-writing floor and direct from the developers and designers working on them.

Check out our updates so far.