JSFiddle - React, Tailwind, and code Playground
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;
//var lat = Math.random() * 90;
//var lon = Math.random() * 180;
var lonlat = new OpenLayers.LonLat(lon, lat);
lonlat.transform(new OpenLayers.Projection("EPSG:4324"), new OpenLayers.Projection("EPSG:4326"));
return lonlat;
}