Leaflet Map Control
Display Objects from Multiple DataSources on a Map
Technologies > User Interface Add-Ins > Geographic Information System (GIS) Views > Map with Multi-Datasource (Leaflet)
This example allows the user to display both properties and buildings on the same map.
Because properties and buildings come from two different data sources, a separate marker property is created for each data source. Create markers for both buildings and properties:
// buildings var blDataSource = 'bl_ds'; var blGeometryFields = ['bl.lon', 'bl.lat']; var blTitleField = 'bl.bl_id'; var blContentFields = ['bl.address1', 'bl.city_id', 'bl.state_id', 'bl.ctry_id']; var blMarkerProperties = { radius: 8, fillColor: '#377eb8' }; this.mapControl.createMarkers( blDataSource, blGeometryFields, blTitleField, blContentFields, blMarkerProperties ); // properties var prDataSource = 'pr_ds'; var prGeometryFields = ['property.lon', 'property.lat']; var prTitleField = 'property.pr_id'; var prContentFields = ['property.area_manual', 'property.value_market', 'property.value_book']; var prMarkerProperties = { radius: 12 }; this.mapControl.createMarkers( prDataSource, prGeometryFields, prTitleField, prContentFields, prMarkerProperties );
Create event handlers for both ‘Show Buildings’ and ‘Show Properties’ to show the markers:
// buildings bl_list_onShowBuildings: function(rows) { var selectedRows = this.bl_list.getSelectedRows(rows); var restriction = new Ab.view.Restriction(); if(selectedRows.length !== 0 ) { for (var i = 0; i < selectedRows.length; i++) { restriction.addClause('bl.bl_id', selectedRows[i]['bl.bl_id'], "=", "OR"); } } else { restriction.addClause('bl.bl_id', 'null', "=", "OR"); } this.mapControl.showMarkers('bl_ds', restriction); } // properties pr_list_onShowProperties: function(rows) { var selectedRows = this.pr_list.getSelectedRows(rows); var restriction = new Ab.view.Restriction(); if(selectedRows.length !== 0 ) { for (var i = 0; i < selectedRows.length; i++) { restriction.addClause( 'property.pr_id', selectedRows[i]['property.pr_id'], "=", "OR"); } } else { restriction.addClause('property.pr_id', 'null', "=", "OR"); } this.mapControl.showMarkers('pr_ds', restriction); }
See: Display Objects from a Single DataSource on a Map
View: http://localhost:8080/archibus/ab-leaflet-multi-datasource-map.axvw