None of the widgets are working in my Application

1176
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
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

12 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

RajnayanPalav
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
RajnayanPalav
New Contributor II

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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 

0 Kudos
RajnayanPalav
New Contributor II

Hello,

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos