AnsweredAssumed Answered

None of the widgets are working in my Application

Question asked by rajnayan.palav on Apr 24, 2017
Latest reply on May 4, 2017 by aldwingregorio12

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>

Outcomes