JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" style="width: 600px; height: 300px; border: 1px solid black"></div>
<div id="info"></div>
JavaScript
var map = new OpenLayers.Map({
div: "map",
center: new OpenLayers.LonLat(0, 0),
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
});
var basemap = new OpenLayers.Layer.WMS(
"Natural Earth",
"http://demo.opengeo.org/geoserver/wms",
{ layers: "topp:naturalearth" }
);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addLayer(basemap);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
var style = $.extend(true, {}, OpenLayers.Feature.Vector.style['default']); // get a copy of the default style
style.fillColor = "${getFillColor}";
var getRandomColor = function () {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
};
var myStyleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style(style, {
context: {
getFillColor: function (feature) {
return getRandomColor();
}
}
})
});
var gmlLayer = new OpenLayers.Layer.Vector("MyGMLLayer", {
styleMap: myStyleMap
});
var strGML = '<gml:featureMember xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/gml http://schemas.opengis.net/gml/3.1.1/profiles/gmlsfProfile/1.0.0/gmlsf.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><feature:feature xmlns:feature="http://example.com/feature"><feature:geometry><gml:LineString><gml:posList>37.96875 33.046875 26.71875 2.109375 64.6875 -9.140625</gml:posList></gml:LineString></feature:geometry></feature:feature><feature:feature xmlns:feature="http://example.com/feature"><feature:geometry><gml:Polygon><gml:exterior><gml:LinearRing><gml:posList>-75.9375 26.015625 -104.0625 -16.171875 -18.28125 -2.109375 -30.9375 26.015625 -75.9375...