Openlayers - Events

by Jonatas Walker

HTML

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

CSS

html, body, #map{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

JavaScript

var map = new ol.Map({
    target: document.getElementById('map'),
    view: new ol.View({
        center: [-2152466, 2856910],
        zoom: 2
    }),
    layers: [
        new ol.layer.Tile({
            style: 'Aerial',
            source: new ol.source.MapQuest({ layer: 'osm' })
        })
    ]
});
map.on('pointermove', function(evt){
    if(evt.dragging){
        //user interacting
        console.info('dragging');
    }
});
map.on('key', function(evt){
    console.info(evt);
    console.info(evt.originalEvent.keyIdentifier);
});
map.getTargetElement().addEventListener('keydown', function(evt){
	console.info('keydown');
    console.info(evt);
    console.info(evt.keyIdentifier);
});
map.getView().on('change:center', function(evt){
    console.info('change:center');
    console.info(evt);
    
});
map.getView().on('change:resolution', function(evt){
    console.info('change:resolution');
    console.info(evt);
    
});
var myInteraction = new  ol.interaction.Interaction({
    handleEvent: function(evt) {
        console.info(evt);
        console.info(evt.dragging);
        console.info(evt.originalEvent);
    }
});
//map.addInteraction(myInteraction);