JSFiddle - React, Tailwind, and code Playground

by João Rodrigues

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<div id="map" style="width: 400px; height: 300px;"></div>

JavaScript

var map, shapeLayer, wmsLayer, highlightControl;

window.onload = function() {
    
    map = new OpenLayers.Map('map');
    
    wmsLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0?",
        {layers: 'basic'},
        {'attribution': 'Provided by OSGeo'}
    );
    
    shapeLayer = new OpenLayers.Layer.Vector('Foo');
    
    map.addLayers([wmsLayer, shapeLayer]);
    map.zoomToMaxExtent();
    
    var data = [
        {name: 'aaaa', score: 100, wkt: 'POINT(-25 -25)'},
        {name: 'bbbb', score: 32, wkt: 'POINT(0 0)'},
        {name: 'cccc', score: 93, wkt: 'POINT(25 25)'},
        {name: 'dddd', score: 46, wkt: 'POINT(50 50)'}
    ]
    
    var format = new OpenLayers.Format.WKT();
        
    for (var i = 0, len = data.length; i < len; i++) {
        var feature = format.read(data[i].wkt);
        feature.attributes = {
            name: data[i].name,
            score: data[i].score
        }
        shapeLayer.addFeatures(feature);
    }
    
    highlightControl = new OpenLayers.Control.SelectFeature(shapeLayer, {
        hover: true,
        highlightOnly: true,
        renderIntent: "temporary"
    });
    
    highlightControl.events.on({
        featurehighlighted: function(evt) {
            
            var lonlat = new OpenLayers.LonLat(
                evt.feature.geometry.x,
                evt.feature.geometry.y
            );
            
            var html = 'Name: ' +
                       evt.feature.attributes.name + '<br />' +
                       'Score: ' + 
                       evt.feature.attributes.score;
            
            var popup = new OpenLayers.Popup.Anchored(
                'myPopup',
                lonlat,
                new OpenLayers.Size(150, 60),
                html, 
                {size: {w: 14, h: 14}, offset: {x: -7, y: -7}},
                false
            );
          
            evt.feature.popup = popup;
            map.addPopup(popup);
  ...