OLmaps: an integration of OpenLayers with ZK

OpenLayers is a state-of-the-art, open source web mapping solution that is actively developed and widely applied. Our ZK integration (OLmaps) tries to marry the power of OpenLayers with the simplicity of ZK. We have not yet written a full reference for our implementation, and some bugs remain. This page is, for now, the main documentation for OLmaps, in the learn by example fashion. It does not explain all the features of either OpenLayers or OLmaps. If you have any questions, feel free to write us at ecoinformatics(at)uvm.edu, or post a bug report or feature request using the links on the right.


The live example shows the basic feature of OLmaps: switching map layers. You can select a WMS map source, Google Maps, Virtual Earth or Multimap by using the control on the right. You can zoom in and out using your mouse wheel, double-clicking on the map, or dragging a bounding box while keeping the Shift key pressed.

 

 

In good ZK tradition, programming the example above is very simple. All it takes is the following XML code:

 

  1. <window border="none">
  2. <script type="text/javascript" 
  3.    src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=GKEY'></script>  
  4. 	<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
  5.     <script type="text/javascript" src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>
  6. 	<vbox id="map">
  7. 		<olmaps id="map1" width="500px" height="300px" zoom="1" >
  8. 			   <wmslayer name="OpenLayersWMS"
  9. 					uri="http://labs.metacarta.com/wms/vmap0"
  10. 					layers="basic" /> 			   
  11. 			   <googlemapslayer id="glayer" name ="google" mapType="normal" /> 			   
  12. 			   <virtualearthlayer id="vel" name="virtualearth"/>
  13. 			   <multimaplayer id="mmap" name="multimap" />
  14. 			   <olcontrol ctype= "layerswitch"/>
  15. 		</olmaps>
  16.  
  17. 	</vbox>
  18. </window>

Of course we want to be able to notify the server of anything the user does, listening to events triggered by moving the map and zooming. The next example shows the events generated by user interaction in the textbox below the map.

 

You have probably noticed the radio button at the bottom of the widget above. OpenLayers allows adding a  transparent "vector" layer where shapes (lines, points, and polygons) can be drawn by the user or through Javascript. OLmaps adds the server side to the picture. In the example below, you can draw, edit and modify features. As you do so, you can see the events being sent to the server in the text box. Notice that OLmaps talks to the server using Well-known Text Format (WKT), a widely used standard to communicate shapes that can be easily converted into Java 2d shape objects, using JTS or Geotools.

 

 

Communication of shapes with the server is of course bi-directional. In the example below, you can paste WKT for a shape in the textboxes and they will be drawn on the vector layer, using methods in the Java ZK peers directly. The WKT can come, for example, from a spatially enabled database. This example also shows how shapes can be customized in appearance, to differentiate them on the map.

 

Here's the full source code for the example above.

  1. <window border="none">
  2. 	<vbox id="map">
  3. 		<olmaps id="map1" width="500px" height="300px" zoom="1"  >			   
  4. 			   <wmslayer name="OpenLayers WMS"
  5. 				uri="http://labs.metacarta.com/wms/vmap0"
  6. 				layers="basic" />  			   
  7. 			   <vectorlayer id="vlayer" name="lines" editControl="navigate" >			   		
  8.  
  9. 			   </vectorlayer> 
  10. 		</olmaps>
  11.  
  12. 		<radiogroup onCheck="vlayer.editControl =self.selectedItem.label">
  13. 			<radio label="navigate"/>
  14. 			<radio label="polygon"/>
  15. 			<radio label="point"/>
  16. 			<radio label="line"/>
  17. 			<radio label="select"/>
  18. 			<radio label="drag"/>
  19. 			<radio label="modify"/>	
  20. 			<radio label="delete"/>			
  21. 		</radiogroup>
  22. 		Paste wkt specification here:
  23. 		<textbox id="finput" rows="5" cols="60" >
  24. 			<attribute name="value">
  25. POLYGON((-87.1875 53.4375,-86.484375 ...)) 		 
  26. 		 	</attribute>
  27. 		</textbox>	
  28. 		<button label="Add Feature" onClick=" vlayer.addFeature(finput.getValue());  "/>
  29. 		Paste another wkt specification here:
  30. 		<textbox id="finput1" rows="5" cols="60" >
  31. 			<attribute name="value">
  32. POINT(85.78125 54.84375)
  33. 			</attribute>
  34. 		</textbox>
  35. 		<button label="Add Custom Feature" >
  36. 			<attribute name= "onClick">
  37. 				 vlayer.addFeature(finput1.getValue(),"red","blue", "2" ); 
  38. 			</attribute>
  39. 		 </button>  
  40.  
  41. 	</vbox>
  42. </window>

Using full satellite imagery to allow users to precisely highlight features on the ground is very powerful way to solicit spatial input. We have found ourselves playing with the Google example below more than we should have.

 

The examples below only scratch the surface of what can be done with OLmaps. Please feel free to ask at ecoinformatics(at)uvm.edu or to report bugs and feature requests.