#

## OpenLayers Workshop

# Styling Vector Layers

1. We’ll start with a working example that displays building footprints in a vector layer over a base layer. Open your text editor and save the following as `map.html` in the root of your workshop directory:

       <html>
           <head>
               <title>My Map</title>
               <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
               <style>
                   #map-id {
                       width: 512px;
                       height: 256px;
                   }
               </style>
               <script src="openlayers/lib/OpenLayers.js"></script>
           </head>
           <body>
               <h1>My Map</h1>
               <div id="map-id"></div>
               <script>
                   var medford = new OpenLayers.Bounds(
                       4284890, 254385,
                       4288865, 258380
                   );
                   var map = new OpenLayers.Map("map-id", {
                       projection: new OpenLayers.Projection("EPSG:2270"),
                       units: "ft",
                       maxExtent: medford,
                       restrictedExtent: medford,
                       maxResolution: 2.5,
                       numZoomLevels: 5
                   });

                   var imagery = new OpenLayers.Layer.WMS(
                       "Medford Streets & Imagery",
                       "/geoserver/wms",
                       {layers: "medford"}
                   );
                   map.addLayer(imagery);

                   var buildings = new OpenLayers.Layer.Vector("Buildings", {
                       strategies: [new OpenLayers.Strategy.BBOX()],
                       protocol: new OpenLayers.Protocol.WFS({
                           url: "/geoserver/wfs",
                           featureType: "medford_buildings",
                           featureNS: "http://medford"
                       })
                   });
                   map.addLayer(buildings);

                   map.zoomToMaxExtent();
               </script>
           </body>
       </html>

2. Open this `map.html` file in your browser to see orange buildings over the base layer: http://localhost/ol_workshop/map.html

3. With a basic understanding of styling in OpenLayers, we can create an `OpenLayers.StyleMap` that displays buildings in different colors based on the size of their footprint. In your map initialization code, replace the constructor for the `buildings` layer with the following:

       var buildings = new OpenLayers.Layer.Vector("Buildings", {
           strategies: [new OpenLayers.Strategy.BBOX()],
           protocol: new OpenLayers.Protocol.WFS({
               url: "/geoserver/wfs",
               featureType: "medford_buildings",
               featureNS: "http://medford"
           }),
           styleMap: new OpenLayers.StyleMap({
               "default": new OpenLayers.Style({
                   strokeColor: "white",
                   strokeWidth: 1
               }, {
                   rules: [
                       new OpenLayers.Rule({
                           filter: new OpenLayers.Filter.Comparison({
                               type: OpenLayers.Filter.Comparison.LESS_THAN,
                               property: "shape_area",
                               value: 3000
                           }),
                           symbolizer: {
                               fillColor: "olive"
                           }
                       }),
                       new OpenLayers.Rule({
                           elseFilter: true,
                           symbolizer: {
                               fillColor: "navy"
                           }
                       })
                   ]
               })
           })
       });

4. Save your changes and open `map.html` in your browser: http://localhost/ol_workshop/map.html

   Buildings colored by footprint area.

### Navigation

- index
- modules |
- next |
- previous |
- OpenLayers Workshop »
- Vector Layers »
- Styling Vector Layers