JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="http://dev.openlayers.org/releases/OpenLayers-2.13/lib/OpenLayers.js"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13/theme/default/style.css">
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13/examples/style.css">
 <body onload="init()">
    <h1 id="title">Markers Layer Example</h1>
    <div id="tags">Marker, event, mousedown, popup, inco</div>
    <div id="shortdesc">Show markers layer with different markers</div>
    <div id="map" class="smallmap"></div>
    <div id="docs">
        <p>This is an example of an OpenLayers.Layers.Markers layer that shows
        some examples of adding markers.  Also demonstrated is registering a
        mousedown effect on a marker.</p>
    </div>
  </body>

CSS

#OpenLayers_Feature_Vector_33 {
  background-color: rgba(255,255,0,0.5) !important;
    width:5px !important;
    height:5px !important;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid black;
}
.fuffi {
  background-color: rgba(255,255,0,0.5) !important;
    width:5px !important;
    height:5px !important;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid black;
    
  -webkit-animation: pulse 2s ease-out !important;
			animation: pulse 2s ease-out;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
		}
		@-webkit-keyframes pulse {
			from { stroke-width: 15; stroke-opacity: 1; }
			to { stroke-width: 50; stroke-opacity: 0; }
		}
		@keyframes pulse {
			from { stroke-width: 15; stroke-opacity: 1; }
			to { stroke-width: 50; stroke-opacity: 0; }
		}

JavaScript

var map, layer;

        function init(){
           // OpenLayers.ProxyHost="/proxy/?url=";
            map = new OpenLayers.Map('map');
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
                
            map.addLayer(layer);
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
             var options = {
             renderers: ["SVG", "Canvas", "VML"]
             };
            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry",options);
            
            map.addLayer(vectorLayer);
            
          var style_church = {
                pointerEvents: "visiblePainted",
                symbol: "symbol_catalog.svg#symbol-church",
                width: 20,
                height: 20
            };
            var point = new OpenLayers.Geometry.Point(0,0);
            var pointFeature = new OpenLayers.Feature.Vector(point, null
                                                            // , style_church
                                                            );
            vectorLayer.addFeatures([pointFeature]);
            console.log(vectorLayer);
            
            var markers = new OpenLayers.Layer.Markers( "Markers" ,
                                                       {renderers: ["Canvas", "SVG", "VML"]});
            map.addLayer(markers);

            var size = new OpenLayers.Size(0,0);
           // var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://dev.openlayers.org/releases/OpenLayers-2.13/img/marker.png',size
                                           //,offset
                                          );
            console.log(icon);
            icon.imageDiv.className += "fuffi";
            markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));

           
          
            map.addControl(new...