OL3 Map with OSM
HTML
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css">
<div id="map" class="map"></div>
CSS
.map {
height: 400px;
width: 100%;
}
JavaScript
// Create the icon feature (geom + properties)
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([-274342,4416425]),
name: 'Tree'
});
// Set up style
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: 'http://openlayers.org/api/img/marker.png'
}))
});
iconFeature.setStyle(iconStyle);
// Create map with OSM base layer and the marker layer
var map = new ol.Map({
layers: [
new ol.layer.Tile(
{source: new ol.source.OSM()}
),
new ol.layer.Vector({
source: new ol.source.Vector({features:[iconFeature]})
})],
renderer: "canvas",
target: 'map',
view: new ol.View2D({
center: ol.proj.transform([-0.5, 39.5], 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});