angular-openlayers-directive icon indicating copy to clipboard operation
angular-openlayers-directive copied to clipboard

How to use Overlay

Open oiacrasec opened this issue 8 years ago • 1 comments

Does someone have a example for me how to use overlay without marker, please?

Example:

$scope.$on('openlayers.map.singleclick', function(event, data) {
    // open overlayer in data['coord'] position
});

oiacrasec avatar Sep 28 '16 12:09 oiacrasec

I already managed to get it working in conventional way(but sometimes there is a easier way to do it)

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var overlay = new ol.Overlay(({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
}));

closer.onclick = function () {
    overlay.setPosition(undefined);
    closer.blur();
    return false;
};

olData.getMap().then(function (nativeOl3Map) {
    // access the native ol3 map here
    nativeOl3Map.addOverlay(overlay);
});
vm.click_position = [];

$scope.$on('openlayers.map.singleclick', function(event, data) {
    vm.click_position = data['coord']
});

$scope.$on('openlayers.layers.geojson.click', function (event, feature) {
    $scope.$apply(function () {
        if (feature) {
            var props = feature.getProperties();
            if(props['type'] === 'shape') {
                overlay.setPosition(vm.click_position);
            }
        }
    });
});

oiacrasec avatar Sep 28 '16 13:09 oiacrasec