AngularJS and OpenLayers Test

See if Openlayers and AngularJS works well together

by hydrogen2oxygen

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.1/css/ol.css">
<script src="http://openlayers.org/en/v3.11.1/build/ol.js"></script>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
         <h1>AngularJS and OpenLayers Test</h1>

        <p>I try to demonstrate that ...</p>
    </div>
</div>
<div class="container">
    <div id="map"></div>
    <div> <a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Export PNG</a>
    </div>
    <div id="result"></div>
</div>
<!-- /container -->

JavaScript

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'data/geojson/countries.geojson',
            format: new ol.format.GeoJSON()
        })
    })],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */
        ({
            collapsible: false
        })
    }),
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

var exportPNGElement = document.getElementById('export-png');

if ('download' in exportPNGElement) {
    exportPNGElement.addEventListener('click', function (e) {
        map.once('postcompose', function (event) {
            var canvas = event.context.canvas;
            exportPNGElement.href = canvas.toDataURL('image/png');
            
            // stream PNG as TEXT $('#result').html(canvas.toDataURL());
            // See http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server
        });
        map.renderSync();
    }, false);
} else {
    var info = document.getElementById('no-download');
    /**
     * display error message
     */
    info.style.display = '';
}

var features = new ol.Collection();
var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: features
    }),
    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'
            })
        })
    })
});
featureOverlay.setMap(map);

var modify = new ol.interaction.Modify({
    features: features,
    // the SHIFT key must be pressed to delete vertices, so
    // that new vertices can be...