JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css">
<script src="http://openlayers.org/en/master/build/ol-debug.js"></script>
<div class="row-fluid">
    <div class="span12">
        <div id="map" class="map"></div>
        <button id="draw">Draw</button>
        <button id="nodraw">NoDraw</button>
        <div id="coordinate">
          <label>lat</label><p id="lat"></p>
          <label>lon</label><p id="lon"></p>
        </div>
    </div>
</div>

CSS

button {
    width: 100px;
    background: green;
    color: white;
    height: 100px;
}

JavaScript

var geometryFunction, source, map, draw;

var init = function () {
    var raster = new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'sat'
        })
    });
    source = new ol.source.Vector({
        wrapX: false
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
};

function addInteraction() {

    var ct = 0;
    draw = new ol.interaction.Draw({
        source: source,
        type: 'Polygon',
        geometryFunction: function (c, g) {
            if (goog.isDef(g)) {
                g.setCoordinates(c);
            } else {
                g = new ol.geom.Polygon(c);
            }
            if (c[0].length > ct) {
                console.log('click coord : ' + c[0][c[0].length - 1]);
                ct = c[0].length;
            } else {
                console.log('move coord : ' + c[0][c[0].length - 1]);
                
            }
            
            return g;
        }
    });

    map.addInteraction(draw);

}

init();
$('button').on('click', function () {
    map.removeInteraction(draw);
    addInteraction();
});
$('button#draw').on('click', function () {
    map.removeInteraction(draw);
    addInteraction();
    $('p#lat').text("s");
    $('p#lon').text("s");
});
$('button#nodraw').on('click', function () {
    map.removeInteraction(draw);
});