JSFiddle - React, Tailwind, and code Playground

by devdatta

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>

CSS

#map{
    width:450px;
    height:400px;
}

            /* avoid pink tiles */
            .olImageLoadError {
                background-color: transparent !important;
            }

JavaScript

var map = new OpenLayers.Map('map');

var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

map.addLayers([wmsLayer,polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());

var  polygon= new OpenLayers.Control.DrawFeature(polygonLayer,OpenLayers.Handler.Polygon);

map.addControl(polygon);


map.setCenter(new OpenLayers.LonLat(0, 0), 3);

//activate the control
polygon.activate();

polygonLayer.events.register('featureadded',polygonLayer, onAdded);


function onAdded(ev){
var poly=ev.feature.geometry;
    var gml = new OpenLayers.Format.GML({ 
                  format: OpenLayers.Format.GML.v3,
                  formatOptions: {
                       srsName: "urn:x-ogc:def:crs:EPSG:4326", 
                  }
             });

    var geomout = gml.buildGeometry.polygon.apply(gml,[poly]);
   console.log(geomout)   
}