OpenLayers Example

http://openlayers.org/dev/examples/transition.html

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
  <h1 id="title">OpenLayers Example</h1>

  <div id="tags">
    vector, feature, symbolizer, filter, comparison, labeling, light
  </div>

  <p id="shortdesc">Demonstrate fill, stroke, and graphic property of symbolizers.</p>

  <div id="map" class="smallmap"></div>

  <div id="docs">
    This example shows how to use symbolizers with defaults for stroke, fill, and
    graphic. This also allows to create labels for a feature without the feature
    rendered. Click on the label in the middle to see selection of features with
    labelSelect set to true.
  </div><br />

  <p>Possibly the .kml file needs to be local. <a href=
  "http://openlayers.org/dev/examples/transition.html">Original OpenLayers
  Example</a>.</p>

JavaScript

(function($) {

        var map;

        function init() {
            map = new OpenLayers.Map('map');
            
            var layer = new OpenLayers.Layer.WMS( 'OpenLayers WMS',
                    'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'} );
            map.addLayer(layer);
            
            // allow testing of specific renderers via '?renderer=Canvas', etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
            
            var vectorLayer = new OpenLayers.Layer.Vector('Simple Geometry', {
                styleMap: new OpenLayers.StyleMap({
                    'default': new OpenLayers.Style(null, {
                        rules: [
                            new OpenLayers.Rule({
                                symbolizer: {
                                    graphic: false,
                                    label: 'Label for invisible point',
                                    labelSelect: true,
                                    fontStyle: 'italic'
                                },
                                filter: new OpenLayers.Filter.Comparison({
                                    type: '==',
                                    property: 'topic',
                                    value: 'point_invisible'
                                })
                            }),
                            new OpenLayers.Rule({
                                symbolizer: {
                                    stroke: true,
                                    fill: true,
                                    label: 'Polygon with stroke and fill defaults'
                                },
                                filter: new OpenLayers.Filter.Comparison({
                                    type: '==',
                                    property: 'topic',
                     ...