JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<div id="map" style="height: 400px; width: 400px;"></div>
JavaScript
var iconGeometry = new ol.geom.Point([637125.42195, 8172199.19090669]);
var wmsLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var view = new ol.View({
center: [637125.42195, 8172199.19090669],
zoom: 14
});
var iconFeature = new ol.Feature({
geometry: iconGeometry,
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'https://evernote.com/media/img/getting_started/skitch/android/android-location_icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [wmsLayer, vectorLayer],
target: 'map',
view: view,
//controls: []
});
map.on('movestart', function (evt) {
iconGeometry.setCoordinates(evt.coordinate);
});