None of the widgets are working in my Application

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

Hello,

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>
<html>
<head>
<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>
<style>
  html, body,#mapDiv  {
 padding: 50px;
 height: 500px;
 width: 80%;
 position: absolute;
    }
</style>

<!-- <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"/> -->
            
            <!-- <link rel="stylesheet"  href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"/> -->

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
  "esri/Map",
    "esri/views/MapView",
  "esri/Graphic",
  "esri/geometry/Point",
    "esri/symbols/PictureMarkerSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
    "esri/widgets/BasemapToggle"
   "dojo/domReady!"
], 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({
 latitude:53.350140,
longitude:-6.266155
    });
//go to the given point
    
    view.center=pt;
                                
       // 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: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
    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
      view.graphics.addMany([pointGraphic]);          
});


     

</script>
</head>
<body>
  <div id="mapDiv"></div>
</body>
</html>

0 Kudos
12 Replies
RajnayanPalav
New Contributor II

Hi,

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.

Regards

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
AldwinGregorio
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