JSFiddle - React, Tailwind, and code Playground

by Kenny806

HTML

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

JavaScript

var map, layer;
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 markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new  OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);


marker = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon);

marker.events.register('mouseover', marker, function(evt) {
var newlonlat = randomLonLat();
var px = map.getPixelFromLonLat(newlonlat);
marker.moveTo(px);
OpenLayers.Event.stop(evt); });

markers.addMarker(marker);
 map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();

function randomLonLat() {
    var lon = (Math.random() * (180 + 180)) - 180;
    var lat = (Math.random() * (90 + 90)) - 90;
    return new OpenLayers.LonLat(lon, lat);
}