ol.interaction.Draw

by ahocevar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<div id="map"></div>

CSS

#map {
    width: 512px;
    height: 256px;
}

JavaScript

var source = new ol.source.GeoJSON({
    url: 'https://rawgit.com/openlayers/ol3-workshop/master/src/data/layers/7day-M2.5.json'
});
var draw = new ol.interaction.Draw({
    source: source,
    type: 'Point'
});

var map = new ol.Map({
    target: 'map',
    interactions: ol.interaction.defaults().extend([draw]),
    layers: [
    new ol.layer.Tile({
        title: "Global Imagery",
        source: new ol.source.TileWMS({
            url: 'http://demo.boundlessgeo.com/geoserver/wms',
            params: {
                LAYERS: 'nasa:bluemarble'
            }
        })
    }),
    new ol.layer.Vector({
        title: 'Earthquakes',
        source: source,
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: '#0000FF'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000000'
                })
            })
        })
    })],
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 1
    })
});