JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

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

JavaScript

(function($) {

    function dataLoaded(event) {
        // 'this' is layer
        //alert(this.features);
        this.map.zoomToExtent(this.getDataExtent());
        this.features[0].style = {
            fill: true,
            fillColor: "#00ff00"
        };
        this.features[1].style = {
            fill: true,
            fillColor: "#ff00ff"
        };
        this.features[2].style = {
            fill: true,
            fillColor: "#0000ff"
        };
        this.redraw();
    }

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

    var layer = new OpenLayers.Layer.Vector("GML", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fopenlayers.org%2Fdev%2Fexamples%2Fgml%2Fpolygon.xml'",
            format: new OpenLayers.Format.GML()
        }),
        eventListeners: {
            "featuresadded": dataLoaded
        }
    });

    console.log("Layer features # = " + layer.features.length);
    console.log("Layer features = " + layer.features);

    map.addLayers([wms, layer]);
    map.zoomToExtent(new OpenLayers.Bounds(-3.92, 44.34, 4.87, 49.55));

})(jQuery);