Skip to main content

mGIS Widgets


mGIS Widget wrapper includes many out-of-the-box widgets.These widgets provide standard functions to easily create GIS web portals.

This wrapper has all of the parameters that allow configuration and customization.

These widgets are categorized as integrated In-panel widgets which can be added to your app.

List of Available mGIS Widgets

1.Map View- 2D and 3D
3.Basemap Option
4.Basic Map Tools



How to use mgis widget?

  • Add mgis-widget script into html page
  <script src="./widgets.js"></script>
  • Declare widget container where widget to be initialized
  <div id="widgetContainer" style="height: 600px; width: 800px;"></div>
  • Declare widget options
// Widget options
var widgetOptions = {
"widgetName": "map-widget", //Name Of The Widget
"widgetKey": "", // Access Token as widget key
"widgetOptions":{ // Widget Options
"mapViewMode": "2d", // Default view mode map 2d or 3d
"defaultBaseMap": "mmi-raster", // Set Default Base Map
"defaultView": { // Set Default View Of The Map
"center": [
"zoom": 12
"mapControls": true, // Show/Hide map controls
"workViewName": "styleTest", // Load default workview
  • Create Instance of mgis-widget
// Create widget
var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);
  • Initialize mgis-widget
  // Initialize widget
  • Update widget properties
  //Change View Mode
"mapViewMode": viewMode

//Show Map Controls
"mapControls": true
  • Available Otions

    OptionTypeDefault ValueDescription
    widgetNameStringName of the widget
    widgetKeyStringUse Access Token as widget key
    widgetOptionsObjectwidgetOptionsWidget options
    • widgetOptions
    OptionTypeDefault ValueDescription
    mapViewModeString2d2d View mode of the map
    3d3d View mode of the map
    defaultBaseMapStringmmi-rasterMMI Raster
    mmi-vectorMMI Vector
    hr-imageryHR Imagery
    hr-imagery-hybridHR Imagery Hybrid
    bhuvan-satelliteBhuvan Satellite
    bhuvan-hybridBhuvan Hybrid
    no-basemapNo Basemap
    BSMP2HGoogle Hybrid
    BSMP3RDGoogle Road
    BSMP5Here Map
    defaultViewObjectSet the default view of the map
    mapControlsBooleantrueShow the map controls
    falseHide the map controls
    workViewNameStringSet the workview name to load the workview data
    • defaultView
    OptionTypeDefault ValueDescription
    centerArraySet the center of the map. [lat,long]
    zoomNumberSet the zoom level of the map