In the first part of this series we showed how to generate a GeoJSON representation of spatial data we had stored in the database. We then created a web service to serve that data to an OpenLayers client application. In this part, we will create a simple OpenLayers-based client application to display our data on a map.
First, our application will need access to the OpenLayers library. The best way to do this is to download the latest version of the library from the OpenLayers website and host it on you web server. However, OpenLayers also hosts an updated live version of the library that is available at http://www.openlayers.org/api/OpenLayers.js . For simplicity in this demonstration, we will use this version. We will also use the OpenLayers-hosted CSS default theme (http://openlayers.org/dev/theme/default/style.css ) and image files (http://openlayers.org/dev/img ).
With these libraries in place, all we have to do is create a simple web application that uses the OpenLayers API to create a map, and populate it with our road data. Copy the following contents into a file called map.html.
Note: Information on the specific OpenLayers APIs used can be found in the OpenLayers Documentations
// Set the tool icon images to load from the OpenLayers website
OpenLayers.ImgPath = 'http://openlayers.org/dev/img/';
// Set the base style for the map
var styleMap = new OpenLayers.StyleMap({
'default': new OpenLayers.Style({
'strokeWidth': 3,
'strokeColor': '#00aa00'
})
});
// Set a unique style for each type of highway
styleMap.addUniqueValueRules("default", "highway", {
"motorway": {strokeColor: '#0000FF', strokeWidth: 4},
"primary": ,
"motorway_link": ,
"secondary": ,
"tertiary": ,
"residential": ,
"path": ,
"unclassified": ,
});
// Create an OpenLayers map
var map = new OpenLayers.Map('map');
// Create an OpenLayers layer and load with GeoJSON data
var layer = new OpenLayers.Layer.Vector("Roads", )
});
// Add the layer to the map
map.addLayer(layer);
// Zoom the map to the extents of the data
map.zoomToExtent(new OpenLayers.Bounds(-80.8080, 43.1154, -80.6915, 43.1534));
The last thing we need to do is create a web service (map.html) that will serve up the file we just created.
CREATE PROCEDURE sa_map()
BEGIN
CALL sa_set_http_header('Content-Type', 'text/html');
SELECT xp_read_file('map.html');
END;
CREATE SERVICE "map.html"
TYPE 'RAW'
USER DBA
AUTHORIZATION OFF
URL OFF
AS CALL sa_map();
Now we can browse to our new service at http://localhost/map.html (your URL may be different if you started your web server on a port other than 80).
