|
Back to Gallery
|
|
This is a live app on a customer's website. It may be down for maintenance or other changes, due to the customer's schedule and needs.
This app uses OpenLayers and MapServer to present points of interest (POIs) in Barcelona. This is used by local chambers of commerce and city planners to track trends in business growth.
- The map is presented in 3 languages, and the entire app customizes itself to your language of choice. The "language pack" approach allows easy expansion to more languages or more language-sensitive elements.
- The entire app is designed around loose coupling between the server-side data and the browser's viewer. The list of layers, for example, is loaded at runtime without any hardcoded layer names or IDs. This allows for the administration interface to define new layers and points, and to "rebuild" the appropriate files when they're ready.
- Not shown is the administration interface. Simple yet powerful, it allows for start-to-finish management. POIs can be exported as XLS, updated and re-imported via XLS, edited directly in the admin interface via a drag-and-drop interface, and correlated against the government's web services for validation.
- Additional error-checking mechanisms in the admin interface include checks for duplicate points, points wth the same spatial location (usually due to them being on the same property lot), and probably-bad UTF-8 character encodings.
- The date slider at the top allows for the state of businesses to be seen at various points in history. This makes use of event handlers in JavaScript, and filters and parameter substitution in MapServer.
- The Estadistiques (Statistics) layers are computed from the data, comparing the number of POIs in various categories; for example, one can compare "all restaurants" to "all bars" and get a feel for which is more prevalent in a region. These charts are built via a wizard interface, allowing new piechart-layers to be defined at will by the customer.
- The map uses WMS to draw the POIs and to query them for information, instead of loading vector points into the browser via KML. This is because of the relatively low ceiling on placing markers into a browser; after a few hundred POIs a browser becomes slow and can crash. For the number of POIs we have, a few hundred is insufficient, but the WMS approach scales into hundreds of thousands of POIs per layer.
This app presented a number of challenges and customizations, of which we're quite proud.
- Many of OpenLayers' tools have been overridden or rewritten to better fit the customer's needs. The "link to this map" had to incorporate the date slider, had to open in a popup, and needed to incorporate the logical separation between four types of layers: basemaps, overlays, POIs, and pie charts.
- The layer switching tools use a Google-inspired style for choosing the basemaps and the additional "info" elements.
- The native projection (SRS) of all data here is European UTM, and conversion between Europeam UTM and Google's SPherical Mercator is notoriously inaccurate, causing points to appear out of place. Simple yet powerful customizations were made to the WMS layers to reproject tiles on the fly, causing them to line up more accurately.
|
|
A picture is worth a thousand words. A working example is worth a thousand pages.
|
|
|
|
|