JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<div id="map" class="map"></div>
CSS
.map {
height: 100%;
width: 100%;
}
JavaScript
// init map
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'}) // Street mapa -> osm
})
],
// pos on map
view: new ol.View({
center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
var vectorSource = new ol.source.Vector({
//create empty vector
});
var markers = [];
function AddMarkers() {
//create a bunch of icons and add to source vector
for (var i=0;i<50;i++){
var x= Math.random()*360-180;
var y= Math.random()*180-90;
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([x,y], 'EPSG:4326', 'EPSG:3857')),
name: 'Marker ' + i
});
markers[i]= [x,y];
vectorSource.addFeature(iconFeature);
}
//create the style
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'http://upload.wikimedia.org/wikipedia/commons/a/ab/Warning_icon.png'
}))
});
//add the feature vector to the layer vector, and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: iconStyle
});
return vectorLayer;
}
var layerMarkers = AddMarkers();
map.addLayer(layerMarkers);
...