Leaflet Map Control
Show an Esri Map
Technologies > User Interface Add-Ins> Geographic Information System (GIS) Views > Simple Map – Esri (Leaflet)
This example shows a map view with a simple Esri map.
To use the leaflet map control with Esri layers in a view, include the following JavaScript and CSS files in the AXVW:
<!-- leaflet js library --> <css url="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" /> <js url="http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js" /> <!-- esri leaflet library --> <js url="http://cdn.jsdelivr.net/leaflet.esri/1.0.0-rc.8/esri-leaflet.js" /> <!-- archibus leaflet map control --> <js file="ab-leaflet-map.js"/> <css file="ab-leaflet-map.css"/>
The map appears inside a <div> element using a custom HTML panel:
<panel type="html" id="mapPanel"> <title translatable="true">Map</title> <html> <div id="mapDiv"></div> </html> </panel>
In JavaScript, create an instance of the Ab.view.ConfigObject. Set the configObject mapImplementation to ‘Esri’:
var configObject = new Ab.view.ConfigObject(); configObject.mapImplementation = ‘Esri’;
In JavaScript, create an instance of the Ab.leaflet.Map control, passing the <panel> id, <div> id, and a panel configObject:
this.mapControl = new Ab.leaflet.Map('mapPanel', 'mapDiv', configObject);
View: http://localhost:8080/archibus/ab-leaflet-esri-map.axvw