Create a Vector layer and draw a polygon on it (02.index.html)

  • Create a custom style for the vector layer
  • Create a Vector layer and add it to the map
  • Create a WKT parser and read a polygon, this create an OpenLayers?.Geometry.Polygon object
  • Create a OpenLayers?.Feature.Vector with the polygon and add it to the vector layer 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <style type="text/css"> 
        #map { 
            width: 800px; 
            height: 512px; 
            border: 1px solid black; 
        } 
    </style> 
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=foobar"></script> 

    <script type="text/javascript"> 
         var result_style = OpenLayers.Util.applyDefaults({ 
             strokeWidth: 3, 
             strokeColor: "#ff0000", 
             fillOpacity: 0 
         }, OpenLayers.Feature.Vector.style['default']); 

        // global variables 
        var map, parser, result, downtown; 

        function init() { 
            map = new OpenLayers.Map('map', {projection: "EPSG: 54004", 
                                             units: "m", 
                                             maxResolution: 156543.0339, 
                                             maxExtent: new OpenLayers.Bounds(-20037508, 
                                                                              -136554022, 
                                                                              20037508, 
                                                                              136554022) 
                                            }); 
            map.addControl(new OpenLayers.Control.LayerSwitcher()); 
            map.addControl(new OpenLayers.Control.MousePosition()); 

            // create and add layers to the map 
            var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite", 
                                                                {type: G_NORMAL_MAP}); 
            downtown = new OpenLayers.Layer.Vector("Downtown data area", 
                                                 {style: result_style});
            result = new OpenLayers.Layer.Vector("Routing results", 
                                                 {style: result_style}); 

            map.addLayers([satellite, downtown, result]); 

            // create a feature from a wkt string and add it to the map 
            parser = new OpenLayers.Format.WKT(); 
            var wkt = "POLYGON((-13737893 6151394, -13737893 6141906, -13728396 6141906, -13728396 6151394, -13737893 6151394))"; 
            var geometry = parser.read(wkt); 
            var feature = new OpenLayers.Feature.Vector(geometry); 
            downtown.addFeatures([feature]);

            // set default position 
            map.zoomToExtent(new OpenLayers.Bounds(-13737893, 
                                                   6141906, 
                                                   -13728396, 
                                                   6151394)); 
        } 
    </script> 
  </head> 
  <body onload="init()"> 
    <div id="map"></div> 
  </body> 
</html>