mGIS Widgets

Introduction

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
2. Workview
3. Basemap Option
4. Basic Map Tools
5. 3D Landmark
6. Real View
7. Tour

Demo

How to use mgis widget?

• Add mgis-widget script into html page

  <script src="https://mgis.mappls.com/mGIS_widgets/widgets.js"></script>

• Declare widget container where widget to be initialized

  <div id="widgetContainer" style="height: 600px; width: 800px;"></div>

• Available Otions

Option	Type	Default Value	Description
widgetName	String		Name of the widget
widgetKey	String		Use Access Token as widget key
widgetOptions	Object	widgetOptions	Widget options

• widgetOptions

Option	Type	Default Value	Description
mapViewMode	String	2d	View mode of the map: "2d" or "3d"
defaultBaseMap	String	mmi-raster	Default base map options: "mmi-raster", "mmi-vector", "hr-imagery", "hr-imagery-hybrid", etc.
defaultView	Object		Default view settings for the map (see below for details)
mapControls	Boolean	true	Whether to show map controls (true/false)
workViewName	String		Name of the workview to load workview data
Scene	Array		Scene options for adding 3D Landmark GLTF Object or 3D Landmark tile on Cesium (see below for details)

• defaultView

Option	Type	Default Value	Description
center	Array		Center of the map [latitude, longitude]
zoom	Number		Zoom level of the map

• Scene

Option	Type	Default Value	Description
timeline	Boolean		Show/hide timeline bar from the scene
landmarkOptions	Object		Landmark options for adding 3D landmarks on the scene (see below for details)

• landmarkOptions

Option	Type	Default Value	Description
type	String	GLTF	Type of 3D object: ".gltf" for GLTF object
		TILESET	"TILESET" for 3D tileset (collections of multiple tiles)
		TILE	"TILE" for 3D tile (single tile)
name	String		Name of the 3D object or tileset
url	String		URL of the 3D landmark object or tileset
latitude	Number		Latitude used to set the initial view of the 3D landmark object
longitude	Number		Longitude used to set the initial view of the 3D landmark object
height	Number		Height of the 3D landmark object or tileset

Map View-2D and 3D

• 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": [
          28.7041,
          77.1025
        ],
        "zoom": 12
      },
      "mapControls": true, // Show/Hide map controls
    }
  }

• Create Instance of mgis-widget

// Create widget
  var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);

• Initialize mgis-widget

  // Initialize widget
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

Workview

• 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": [
          28.7041,
          77.1025
        ],
        "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
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "workViewName": 'ww5'
  });

Basemap Option

• 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": [
          28.7041,
          77.1025
        ],
        "zoom": 12
      },
      "mapControls": true, // Show/Hide map controls
    }
  }

• Create Instance of mgis-widget

// Create widget
  var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);

• Initialize mgis-widget

  // Initialize widget
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

Basic Map Tools

• 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": [
          28.7041,
          77.1025
        ],
        "zoom": 12
      },
      "mapControls": true, // Show/Hide map controls
    }
  }

• Create Instance of mgis-widget

// Create widget
  var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);

• Initialize mgis-widget

  // Initialize widget
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

3D Landmark

• 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": [
          28.7041,
          77.1025
        ],
        "zoom": 12
      },
      "mapControls": true, // Show/Hide map controls
      "workViewName": "styleTest", // Load default workview,
      "Landmark3D":["BatchedThe_Clock_Tower","BatchedNew_Academic_Building"], //Show 3d Landmark - Applicable for view mode 3d only
    }
  }

• Create Instance of mgis-widget

// Create widget
  var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);

• Initialize mgis-widget

  // Initialize widget
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

  //Show 3d Landmark - Applicable for view mode 3d only
  mgisWidget.setWidgetProperties({
    "Landmark3D": ['BatchedMAX_AND_EXPORT_Chunk_02_04']
  });

Real View

• 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": [
          28.7041,
          77.1025
        ],
        "zoom": 12
      },
      "mapControls": true, // Show/Hide map controls
      "workViewName": "styleTest", // Load default workview,
      "Landmark3D":["BatchedThe_Clock_Tower","BatchedNew_Academic_Building"], //Show 3d Landmark - Applicable for view mode 3d only
      "enableRealView":true, // Show/Hide Real View
    }
  }

• Create Instance of mgis-widget

// Create widget
  var mgisWidget = new MGIS.Widget('widgetContainer',widgetOptions);

• Initialize mgis-widget

  // Initialize widget
  mgisWidget.init();

• Update widget properties at run time

  //Change View Mode
  mgisWidget.setWidgetProperties({
    "mapViewMode": viewMode
  });

  //Show Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": true
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "mapControls": false
  });

  //Hide Map Controls
  mgisWidget.setWidgetProperties({
    "workViewName": 'ww5'
  });

  //Show 3d Landmark - Applicable for view mode 3d only
  mgisWidget.setWidgetProperties({
    "Landmark3D": ['BatchedMAX_AND_EXPORT_Chunk_02_04']
  });

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!

@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223