[Question, Feature] How to catch up Map widget zoom event and do some custom action?

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

会搭讪的茄子 · 【出行提示】大兴机场快轨票免费领！具体方法在 ...· 1 月前 ·

坐怀不乱的生菜 · 懲教知多啲· 1 月前 ·

冷冷的橡皮擦 · Input section GLOBAL· 2 月前 ·

忐忑的眼镜 · 合肥地铁最新进展！沿线146个地铁口房价曝光 ...· 4 月前 ·

不羁的烈马 · 以1小时59分40秒完赛创造历史 ...· 10 月前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Description
My dashboard have two widgets - entity table (sensors) and map (sensor locations). Depending on what zoom level is I want to list only a set of my sensors that locate in the region that map displays now.

As I understand I need to create custom widget that re-use TB map widget. Then somehow catch up zoom event and finally make Device type Query based on geo-coordinates.

Any ideas about this challenge?)

I found working solution based on TB dynamic filter described by @JacksonBowe in #5298 and #6253 .

In the Widgets Library section save the OpenStreetMap widget as my custom one.

Enter widget edit mode and add the following code to


    self.onInit

to catch up zoom and drag events:

self.onInit = function() {
    let attributeService = self.ctx.$scope.$injector.get(self.ctx.servicesMap.get('attributeService'));
    self.ctx.map = new TbMapWidgetV2('openstreet-map', false, self.ctx);
    self.ctx.map.map.map.on('zoomend', function() {
        updateMapBoudaries(self.ctx.map.map.map.getBounds(), 'SiloMap_');
    self.ctx.map.map.map.on('dragend', function() {
        updateMapBoudaries(self.ctx.map.map.map.getBounds(), 'SiloMap_');
    function updateMapBoudaries(bounds, attributePrefix) {
        let prefix = attributePrefix || '';
        var geoAttributes = [
            { key: prefix + 'SouthWestLatitude', value: bounds.getSouthWest().lat },
            { key: prefix + 'SouthWestLongitude', value: bounds.getSouthWest().lng },
            { key: prefix + 'NorthEastLatitude', value: bounds.getNorthEast().lat },
            { key: prefix + 'NorthEastLongitude', value: bounds.getNorthEast().lng },
        attributeService.saveEntityAttributes(
             {'entityType': 'USER', 'id': self.ctx.currentUser.userId},
            'SERVER_SCOPE',
            geoAttributes
        ).subscribe(
            ok => {
                console.log('SUCCESS');
           error =>{
                console.log('Error: ', error);
Go to the dashboard and create new filter to check if Map widget window contains device bases on its longitude and latitude attribute values. The algorithm I took from Leaflet.js library
return (sw2.lat >= sw.lat) && (ne2.lat <= ne.lat) &&
		     (sw2.lng >= sw.lng) && (ne2.lng <= ne.lng);
sw, ne - boundary points of Map widget window, sw2.lng / ne2.lng - device longitude, sw2.lat/  ne2.lat- device latitude