[OpenLayers-Users] colored points of interest on map

[Greg Allensworth]

On 8/18/2011 7:40 AM, askMe wrote:
> Hello ! I need a map upon which there are various areas of interest. Map is
> black-white and when user clicks on area of interest, it becomes colored. I
> invesigated basic guides, but didn't find easy way to do this. I would
> appreciate for showing at least starting point on how to do this

One way you could do it, *assuming* that the black-and-white map layer 
you describe is WMS.

* Add a Layer.Vector to your map, which will store the colored vectors.

* Add a Control.WMSGetFeatureInfo which will fetch info about the map 
when you click it.

* Configure the server side such that the returned feature info is the 
geometry of the clicked shape. For example, the feature info could be 
the geometry in WKT format. That would depend on your map-server 
software; with MapServer it would be done with query templates.

* Have the Control.WMSGetFeatureInfo callback read the response text 
(the WKT) and add that new Feature to the Layer.Vector. This would be 
done with the OpenLayers.Format.WKT read() method, the Vector layer's 
removeAllFeatures() method, and the Vector layer's addFeatures() method.

Benefits of this method of doing it:

* The vector feature is in the browser's memory, so can have advanced 
behaviors such as mouse-overs, dragging and editing.

Drawbacks:

* Downloading vector data may be slow, if the shape is particularly 
complex in its vertices.
* Options for styling the vector overlay are limited: color and opacity 
and line type are about it. You couldn't show a colored topo map, for 
example, just a colored outline & fill.



Another method:

* Start with your black-n-white WMS layer.

* Add a second WMS layer, which points at the color version of that same 
layer. I assume that you have both the color and black-n-white version 
available?

* On the map-server side, have the color WMS layer use a filter to only 
fetch the one specified feature.
In MapServer this would be something like:
    FILTER "country_id=%FEATUREID%"
In GeoServer you would use CQL in your query string:
    &CQL_FILTER=STATE_NAME%3D%22California%22

The idea here is a WMS service which shows only 1 map feature at a time, 
based on the URL given.

* Add a Control.GetFeatureInfo which will fetch the feature-ID, and then 
merge that feature-ID into the color-layer's WMS params. This has 3 
parts: a) configuring the GetFeatureInfo to fetch feature info, and b) 
having the server's query template return the feature-ID; 3) calling 
mergeNewParams() on the color-layer to change its WMS URL.

A basic sort of flow would be this:

    var bw = OpenLayers.Layer.WMS("blacknwhite", { layer:'bw'});
    var color = OpenLayers.Layer.WMS("color1", { layer:'color', 
featureid:0 });
    map.addLayers([bw,col.or]);

    map.addControl(new OpenLayers.Control.getFeatureInfo(
       eventListeners: {
          getfeatureinfo: function(evt) {
              var FeatureID = evt.text;
              color.mergeNewParams({featureid:FeatureID});
              color.redraw();
          }
       }
    ));

Advantages of this approach:
Raster download means that the number of vertices is not relevant, can 
be faster.
The coloring is whatever your map-server would produce, e.g. colored 
topo or photo.

Drawbacks:
Somewhat more complex, involving server-side filtering in your 
map-server software.



A third method:

Use SLDs to specify the styling for the layer when it is requested. The 
idea is that when you request the WMS layer, you can specify 
more-complex stylings such as "and feature # 123 is blue and green"

I can't say a lot about this one, having only used SLDs once.

Advantages:
Uses fewer requests to the server, since it doesn't fetch the ID# and 
then re-request an image.

Disadvantages:
More complex, learning SLDs and how your map-server handles SLDs.
Same color flexibility as vectors: photos or topo maps are out, fill and 
stroke are your options.

-- 
Greg Allensworth, Web GIS Developer
BS  A+  Network+  Security+  Linux+  Server+
GreenInfo Network - Information and Mapping in the Public Interest
564 Market Street, Suite 510  San Francisco CA 94104
PH: 415-979-0343 x302  FX: 415-979-0371    email: gregor at greeninfo.org
Web: www.GreenInfo.org     www.MapsPortal.org

Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org