None of the widgets are working in my Application

Jump to solution
04-24-2017 12:49 AM
New Contributor II


I am trying to add widgets (popup, search, basemaptoggle,etc) to my Map, but none of them are working.

Any help from anybody appreciated.

If I add any widget then the map does not show and I get a blank page.

Below is the sample code:

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with MapView - Create a 2D map</title>
  html, body,#mapDiv  {
 padding: 50px;
 height: 500px;
 width: 80%;
 position: absolute;

<!-- <link rel="stylesheet" href=""/> -->
            <!-- <link rel="stylesheet"  href=""/> -->

<link rel="stylesheet" href="">
<script src=""></script>
], function( Map,MapView,
      Graphic, Point,PictureMarkerSymbol,
      SimpleMarkerSymbol, SimpleLineSymbol,BasemapToggle){
var map = new Map({
    basemap: "topo",

  var view = new MapView({
    container: "mapDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom:17,  // Sets the zoom level based on level of detail (LOD)
    //center: [90, 22]  // Sets the center point of view in lon/lat        
    // 1 - Create the widget
       var toggle = new BasemapToggle({
          // 2 - Set properties
          view: view, // view that provides access to the map's 'topo' basemap
          nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap

        // Add widget to the top right corner of the view
        view.ui.add(toggle, "top-right");
    var pt = new Point({
//go to the given point;
       // Create a symbol for drawing the point
      <!-- var markerSymbol1 = new SimpleMarkerSymbol({ -->
        <!-- color: [226, 119, 40], -->
        <!-- outline: { // autocasts as new SimpleLineSymbol() -->
          <!-- color: [100, 100, 100], -->
          <!-- width: 1 -->
        <!-- } -->
      <!-- }); -->
        var markerSymbol = new PictureMarkerSymbol({
    url: "",
    width: 30,
    height: 50
       // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: pt,
        symbol: markerSymbol
// Add the graphics to the view's graphics layer[pointGraphic]);          


  <div id="mapDiv"></div>

0 Kudos
12 Replies
New Contributor II


I already tried this, but its not working.

Currently I am using JBOSS application Server, Can you let me know where should I keep the files?

I am using Eclipse (Windows Platform) for my application.


0 Kudos
MVP Esteemed Contributor

you are on your own there. I have no experience with JBOSS or Eclipse

0 Kudos
New Contributor III

HomeButton will do this. Please note that HomeButton will get the initial extent of the map and set it as your original extent, some sort of. 

0 Kudos