Leaflet Map Control
Display Objects from a Single DataSource on a Map
Technologies > User Interface Add-Ins> Geographic Information System (GIS) Views > Map with Single Datasource (Leaflet)
In this example the user selects one or more properties and then presses the "Show Properties" button to display markers for the selected properties on the map.
In the view data source, include the property latitude, and longitude:
<dataSource id="pr_ds"> <table name="property" role="main"/> <field name="pr_id" table="property"/> <field name="area_manual" table="property"/> <field name="value_market" table="property"/> <field name="value_book" table="property"/> <field name="lat" table="property"/> <field name="lon" table="property"/> </dataSource>
Create markers for properties:
var dataSource = 'pr_ds'; var geometryFields = ['property.lon', 'property.lat']; var titleField = 'property.pr_id'; var contentFields = ['property.area_manual', 'property.value_market', 'property.value_book']; var markerProperties = { radius: 8 }; this.mapControl.createMarkers( dataSource, geometryFields, titleField, contentFields, markerProperties);
Marker Properties Parameters
|
Parameter |
Description |
|
Data Source |
The data source associated with these markers. |
|
Geometry Fields |
The geometry fields ( lat, lon ) which define the location of the assets. |
|
Title Field |
The data field which will appear in the title of the information window. |
|
Content Fields |
The data fields will appear in the body of the information window. |
|
Marker Properties |
The options that define the marker’s physical appearance and behavior. Options include: radius, fillColor, fillOpacity, stroke, color, weight, renderer, useClusters. markerActionTitle, and markerActionCallback |
The data source and the restriction for the selected rows is passed to the showMarkers() method:
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);
View: http://localhost:8080/archibus/ab-leaflet-single-datasource-map.axvw