Census Mapping Made Easy with OpenLayers 3

Three months ago, Paul Ramsey created a tutorial that builds an example census mapping application using OpenGeo Suite. Since then, we’ve released OpenGeo Suite 4.0, which includes early access to OpenLayers 3, and we’ve updated the tutorial to use OpenLayers 3 instead of GeoExt.

A Different Approach
GeoExt, a combination of ExtJS and OpenLayers 2, allows one to create web applications without writing any HTML and CSS, which was useful back when all browsers behaved differently. However, with HTML5 and CSS3 available in all modern browsers, a more modular stack adds flexibility.

With GeoExt, the easiest way to read in the list of available census variables (topics) was to pre-process them and load them as JSON. Rather than spending much time on user interface work, we’ve added Bootstrap to leverage the JQuery dependency and save some lines of JavaScript code. With JQuery, a few lines of code are enough to create drop-down options directly from the lines of the original metadata text file:

$.get(“../data/DataDict.txt”, function(response) {   // We start at line 3 – line 1 is column names, line 2 is not a variable   $(response.split(‘\n’).splice(2)).each(function(index, line) {     $(‘#topics’).append($(‘<option>’)       .val(line.substr(0, 10).trim())       .html(line.substr(10, 105).trim()));   }); });

The HTML side of this drop-down is straightforward, with Bootstrap’s form-controlCSS class providing a nice appearance:

<select id=”topics” class=”form-control”></select>

Simpler API
Our focus at Boundless is to make it easier for application developers to leverage geospatial data and services, so one of our goals for OpenLayers 3 was to create a simple API for basic mapping tasks. The simple API becomes obvious when looking at the map initialization code:

olMap = new ol.Map({   target: ‘map’,   renderer: ol.RendererHint.CANVAS,   layers: [osmLayer, wmsLayer],   view: new ol.View2D({     center: [-10764594.0, 4523072.0],     zoom: 5   }) });

Compare this to the old OpenLayers 2 and GeoExt code:

olMap = new OpenLayers.Map({   projection: “EPSG:900913”,   units: “m”,   layers: [wmsLayer, osmLayer] }); olMap.setCenter([-10764594.0, 4523072.0], 5);  var viewPort = new Ext.Viewport({   layout: “fit”,   items: [{     xtype: “gx_mappanel”,     ref: “mappanel”,     map: olMap   }] });

Flexible Integration
Another goal was flexibility when combining OpenLayers 3 with other JavaScript libraries. This flexibility became obvious when adding interaction to learn more about the data behind the map in the tutorial application. An OpenLayers Overlay adds arbitrary markup to the map:

var popup = new ol.Overlay({   element: $(‘#popup’) }); olMap.addOverlay(popup);

When information about the selected point is available, the overlay is anchored to the map at the coordinates of the click event. The markup for the popup comes from a Bootstrap Popover:

function (info) {   popup.setPosition(event.getCoordinate());   $(‘#popup’)     .popover({content: info.join(”)})     .popover(‘show’); }

Try OpenLayers 3
OpenLayers 3 is a flexible mapping library that plays very well with tools that familiar to web developers. The experience of porting an existing GeoExt application to OpenLayers 3 was pleasant and straightforward. With the simple OpenLayers 3 API and the integration of Bootstrap and JQuery, adding geospatial components (map and popup anchored to the map) to the application was no more challenging than adding any other dynamic component to any web app.

Visit the official website or try our census mapping tutorial to learn more about using OpenLayers 3.

Tags: Andreas Hocevar, boundless, boundlessgeo, census map, extjs, geoext, geospatial, jquery, json, mapping, mobile, opengeo, openlayers

Category: Boundless

This entry was posted on Tuesday, July 8th, 2014 at 1:09 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.