A custom panel with only one map loaded and the GPS coordinates of the device loaded when you choose a device in a ruban dashboard :

Some CSS and Javascript files are already loaded with ruban then you don't have to load again this files in the view.html :

Load your personal view.js file.

In the panel.js file you need to define your personal view.js file and the other library you want .

The order to define and to declare is really important, it have to be the same order in the define part and in the function part !

In this example I load my personal view.js file and I initialize it as a View object.

define([
"dojo/_base/declare",
"ruban/panel",
"jquery",
"d3",
"./view" //HERE I define my view.js file at the root of my custom panel directory
],
function(
declare,
Panel,
$,
d3,
View // HERE my View Object.
){

1.1. Initialize your View.

initView: function(context) {
this.view = new View();
this.view.init(context);
}

2. Load The ESRI component in your View.

In your view.js file you have to define the components of ESRI you want to load :

The order to define and to declare is really important, it have to be the same order in the define part and in the function part !

define([
"dojo/_base/declare",
"jquery",
"underscore",
"esri/map",
"esri/toolbars/draw",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],

function(
declare,
$,
_,
Map,
Draw,
Point,
SimpleMarkerSymbol,
PictureMarkerSymbol,
InfoTemplate,
Graphic,
GraphicsLayer
) {

3. Initialize the map.

To initialize the ESRI map, you have to write in your init function of your view.js file.

map = new Map("map", {

basemap: "streets",
center: [ 0, 0 ],
zoom: 4,
slider: true,
showInfoWindowOnClick: true

});

Browser not supported