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=""> 
    <style type="text/css"> 
        #map { 
            width: 800px; 
            height: 512px; 
            border: 1px solid black; 
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script> 
    <script src=""></script> 

    <script type="text/javascript"> 
         var result_style = OpenLayers.Util.applyDefaults({ 
             strokeWidth: 3, 
             strokeColor: "#ff0000", 
             fillOpacity: 0 

        // 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, 
            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 =; 
            var feature = new OpenLayers.Feature.Vector(geometry); 

            // set default position 
            map.zoomToExtent(new OpenLayers.Bounds(-13737893, 
  <body onload="init()"> 
    <div id="map"></div>