Open side-bar Menu
 GISCafe Guest
Andreas Hocevar
Andreas Hocevar
Andreas works on the development and architecture of Boundless SDK, OpenLayers 3. Previously he’s worked on the development of OpenLayers 2, GeoExt, and GeoExplorer. Andreas is an accomplished open source developer; he is an active steering committee member for both OpenLayers and GeoExt . He has … More »

Census Mapping Made Easy with OpenLayers 3

 
July 8th, 2014 by Andreas Hocevar

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: , , , , , , , , , , , ,

Category: Boundless

Logged in as . Log out »




© 2024 Internet Business Systems, Inc.
670 Aberdeen Way, Milpitas, CA 95035
+1 (408) 882-6554 — Contact Us, or visit our other sites:
TechJobsCafe - Technical Jobs and Resumes EDACafe - Electronic Design Automation GISCafe - Geographical Information Services  MCADCafe - Mechanical Design and Engineering ShareCG - Share Computer Graphic (CG) Animation, 3D Art and 3D Models
  Privacy PolicyAdvertise