None of the widgets are working in my Application

RajnayanPalav · ‎04-24-2017

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>

});
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 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>

RobertScheitlin__GISP · ‎04-24-2017

Rajnayan,

You had some simple errors in your code:BasemapToggle require, then everything after line 55 was outside your require code block because of your misplaced });

<!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 {
      margin: 50px;
      height: 500px;
      width: 80%;
      position: absolute;
    }
  </style>

  <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;

      var markerSymbol = new PictureMarkerSymbol({
        url: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
        width: 20,
        height: 20
      });

      // 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎04-24-2017

Rajnayan,

You had some simple errors in your code:BasemapToggle require, then everything after line 55 was outside your require code block because of your misplaced });

<!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 {
      margin: 50px;
      height: 500px;
      width: 80%;
      position: absolute;
    }
  </style>

  <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;

      var markerSymbol = new PictureMarkerSymbol({
        url: "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png",
        width: 20,
        height: 20
      });

      // 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RajnayanPalav · ‎04-24-2017

Robert,

Thank you for correcting my silly mistake. You are a savior.

I have one more query if you don't mind to answer.

Can't we write the "require" and "function" block separately? Like below:

require(["esri/Map","esri/views/MapView",...]);

function(Map,Mapview,....)

{.....}

If I try to do above then it doesn't work.

My aim is to pass the Lat/long value dynamically from another source.

Something like this:

var pt=new Point(x,y)

{

longitude=x;

latitude=y;

};

Is this possible?

Warm Regards

RobertScheitlin__GISP · ‎04-25-2017

Rajnayan,

I think what you are looking for is a global var that you can set outside the require block.

<script>
    var lat, lon;
    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 pt = new Point({
        latitude: lat,
        longitude: lon
      });
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RajnayanPalav · ‎04-25-2017

Hello,

Its done. Thank you

Can you let me know if there is some method to automatically bring back to initial point on Map if user pans/zooms away from initial point?

Regards

RobertScheitlin__GISP · ‎04-26-2017

You can disable navigation. Is that what you are after?

RajnayanPalav · ‎05-01-2017

Hi,

No. But if the user goes on Panning and zooming and then he wants to come back to original view then is there any functionality/button by which user can come back to initial view/point of map.

Also I am messed up with the API, I have downloaded the ArcGis API for Javascript 4.3 version, but I dont know how to use it. To brief, as of now I am directly using the code in Javascript and using the functions including the module, but how do I configure the API with my Application directly?

Can you please help?

RobertScheitlin__GISP · ‎05-02-2017

Rajnayan,

but how do I configure the API with my Application directly

Are you asking how to host the API directly instead of using the esri CDN?

As far as a button to return to the original extent you can configure and use the Home widget:

Home | API Reference | ArcGIS API for JavaScript 4.3

RajnayanPalav · ‎05-02-2017

Hello,

Are you asking how to host the API directly instead of using the esri CDN? --> Yes.

RobertScheitlin__GISP · ‎05-02-2017

You start by downloading the API:

SDK Downloads | ArcGIS for Developers

Then you follow the instructions (install.html) inside the download for hosting the API.