Previous topic
Module 5 - Creating Web Services
Next topic
Module 7 - Customizing the web service
Module 5 - Creating Web Services
Module 7 - Customizing the web service
In this module you’re going to add a search functionality to the user interface. This search functionality will rely on the countries web service that you created in the previous module.
With this search functionality users will be able to click on the map and get a popup giving information about the clicked country.
We have to create a OpenLayers.Control.getFeature linked to our previously created controller, dealing in GeoJSON format:
var gf = new OpenLayers.Control.GetFeature({
protocol: new OpenLayers.Protocol.HTTP({
url: '/countries',
format: new OpenLayers.Format.GeoJSON()
})
});
Listening to the featureselected event of the Control, you might be able to add the feature to the vector layer and create a GeoExt.Popup anchored to this feature, displaying in it attributes of the the feature:
gf.events.on({
'featureselected': function(e){
if (arguments.callee.current_popup && arguments.callee.current_popup.anc) {
arguments.callee.current_popup.destroy();
}
var layer = map.getLayersByName('vector')[0];
layer.destroyFeatures();
layer.addFeatures([e.feature]);
arguments.callee.current_popup = new GeoExt.Popup({
feature: e.feature,
title: e.feature.data.pays,
html: e.feature.data.pays+' ('+e.feature.data.continent+')',
width: 200
});
arguments.callee.current_popup.show();
}
});
Then we add this control to the toolbar, wrapped in a GeoExt.Action:
actions.push(new GeoExt.Action({
iconCls: "info",
map: map,
toggleGroup: "tools",
allowDepress: false,
tooltip: "Get country information",
control: gf
}));
And some CSS in mapfishapp/public/app/css/main.css:
.info {
background-image:url(../img/info.png) !important;
height:20px !important;
width:20px !important;
}
and a link to the GeoExt.Popup‘s CSS in mapfishapp/public/index.html:
<link rel="stylesheet" type="text/css" href="lib/geoext/resources/css/popup.css" />
When clicking on a country you should get a popup looking like this:
Note that the AJAX responses may show that the database complains about EPSG:900913 code not being known. In that case, you may run the following INSERT statement in your database:
INSERT INTO spatial_ref_sys (srid,auth_name,auth_srid,srtext,proj4text) VALUES
(900913,'EPSG',900913,'PROJCS["Google Mercator", GEOGCS["WGS 84",DATUM["World Geodetic System 1984", SPHEROID["WGS 84", 6378137.0, 298.257223563, AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich", 0.0, AUTHORITY["EPSG","8901"]], UNIT["degree", 0.017453292519943295], AXIS["Geodetic latitude", NORTH], AXIS["Geodetic longitude", EAST], AUTHORITY["EPSG","4326"]], PROJECTION["Mercator (1SP)", AUTHORITY["EPSG","9804"]], PARAMETER["semi_major", 6378137.0], PARAMETER["semi_minor", 6378137.0], PARAMETER["latitude_of_origin", 0.0], PARAMETER["central_meridian", 0.0], PARAMETER["scale_factor", 1.0], PARAMETER["false_easting", 0.0], PARAMETER["false_northing", 0.0], UNIT["m", 1.0], AXIS["Easting", EAST], AXIS["Northing", NORTH], AUTHORITY["EPSG","900913"]]','+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs');
Bonus tasks
1. Change the OpenLayers.Control.GetFeature configuration so it sends requests as the user pauses on the map.