JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<h1 id="title">Feature Events Example</h1>

<div id="tags">
    feature, select, hover
</div>

<div id="shortdesc">Feature hover and click events</div>

<div id="map" class="smallmap"></div>
<div id="docs">
    <p id="result">Hover over or click features on the map.</p>
    
    <p>This example shows how to use the 'featureclick', 'nofeatureclick',
        'featureover' and 'featureout' events to make features interactive.
        Look at the <a href="feature-events.js">feature-events.js</a> source
        code to see how this is done.</p>
    
    <p>Note that these events can be registered both on the map and on
        individual layers. If many layers need to be observed, it is
        recommended to register listeners once on the map for performance
        reasons.</p>
</div>

CSS

#result {
    height: 60px;
    width: 514px;
    font-size: smaller;
    overflow: auto;
    margin-top: 5px;
}

JavaScript

var layerListeners = {
    featureclick: function(e) {
        log(e.object.name + " says: " + e.feature.id + " clicked.");
        return false;
    },
    nofeatureclick: function(e) {
        log(e.object.name + " says: No feature clicked.");
    }
};

var style = new OpenLayers.StyleMap({
    'default': OpenLayers.Util.applyDefaults(
        {label: "${l}", pointRadius: 10},
        OpenLayers.Feature.Vector.style["default"]
    ),
    'select': OpenLayers.Util.applyDefaults(
        {pointRadius: 10},
        OpenLayers.Feature.Vector.style.select
    )
});

var sldXml = '<?xml version="1.0" encoding="utf-8"?><StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">	<NamedLayer>		<Name>Layer</Name>		<UserStyle>			<Name>default</Name>			<Title>default</Title>			<Abstract/>			<FeatureTypeStyle>				<Rule>					<Title>Title</Title>					<PointSymbolizer>						<Graphic>							<ExternalGraphic>								<OnlineResource xlink:type="simple" xlink:href="http://openlayers.org/dev/examples/img/check-round-green.png" />								<Format>image/png</Format>							</ExternalGraphic>							<Size>								<ogc:Literal>20</ogc:Literal>							</Size>						</Graphic>					</PointSymbolizer>				</Rule>			</FeatureTypeStyle>		</UserStyle>		<UserStyle>			<Name>select</Name>			<Title>select</Title>			<Abstract/>			<FeatureTypeStyle>				<Rule>					<Title>Title</Title>					<PointSymbolizer>						<Graphic>							<ExternalGraphic>								<OnlineResource xlink:type="simple" xlink:href="http://openlayers.org/dev/examples/img/check-round-green.png"...