tombatossals / angular-openlayers-directive

AngularJS directive to embed an interact with maps managed by the OpenLayers library
http://tombatossals.github.io/angular-openlayers-directive/
MIT License
282 stars 183 forks source link

How to use Overlay #327

Open oiacrasec opened 8 years ago

oiacrasec commented 8 years ago

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 commented 8 years ago

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);
            }
        }
    });
});