CODEWITHSUNDEEP
javascriptarcgis-js-apiarcgis-serveresri-maps
Sarah Salar
Sarah Salar

Reputation: 303

popup window on web map

i have displayed my map on web by using arcgis javascript api sample. in the sample it display a popup window but on my side it does not. now i want to add popup window. i want when user click on the different type of soil a popup window will open and display the attributes of the layers

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create web map from JSON</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/>

    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map", 
        "esri/geometry/Extent",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        Extent,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();

        var webmap = {};
        webmap.item = {
          "title":"Soil Map",
         "snippet": "This map shows the Soil types",
          "extent": [[73.94251383600005, 31.02571637300008],[74.05297753900004, 31.11529292900019]]
        };

        webmap.itemData = {
          "operationalLayers": [{
            "url": "http://localhost:6080/arcgis/rest/services/Soil_Maps/soil_map/MapServer",
            "visibility": true,
            "opacity": 0.75,
            "title": "Soil Survey Map",
            
          }],
          "baseMap": {
            "baseMapLayers": [{
              "opacity": 1,
              "visibility": true,
              "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
              },{
              "isReference": true,
              "opacity": 1,
              "visibility": true,
              "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
              }],
            "title": "World_Terrain_Base"
          },
          "version": "1.1"
        };

        dom.byId("title").innerHTML = webmap.item.title;
        dom.byId("subtitle").innerHTML = webmap.item.snippet;

        arcgisUtils.createMap(webmap,"map").then(function(response){


          var map = response.map;



          //add the scalebar 
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get 
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response); 
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });

    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 1254

Answers (3)

YinchaoOnline
YinchaoOnline

Reputation: 188

you have misused "esri/urlUtils" module,it mainly provides utility methods to work with content from ArcGIS.com. So you can not use its createMap method to create map with your local arcgis server map service,instead you should publish your operational layers through arcgis.com,and get map item id.see how to Publish hosted feature layers by csv or featurelayer .

1.Using "esri/urlUtils" module to create map

you can create map using "esri/urlUtils" module's creatMap method either with json or itemid.

1) create web map by json,for complete code see
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapitem.html

webmap.itemData = {
                "operationalLayers": [{
                    "url": "xxx",// your map service goes here
                    "visibility": true,
                    "opacity": 0.75,
                    "title": "Soil Survey Map",
                    "itemId": "xx"//your map item id in arcgis.com
      }],...

NOTE:JSON should include your operational layer item id in arcgis.com

2) create web map by itemid(recommended),for complete code see
developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html

            ready(function () {

            parser.parse();

            //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
            //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items";
            arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20", "map").then(function (response) {
                //update the app
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;

                var map = response.map;



                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "legend");
                legendDijit.startup();
            });
        });

2.add popup,for some samples see developers.arcgis.com/javascript/3/jssamples/#search/Popup

If you have a lot maps to display,you should use featurelayer to add data to map.for details please see the ags js api documentation.

Upvotes: 0

Vikash Pandey
Vikash Pandey

Reputation: 5443

It is always recommended that we should use webmap/item id instead of webmap json.

Once you are able to get the webmap id or item id then using below code you can consume the webmap-

require([
        "dojo/parser",
        "dojo/ready",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/dom",
        "esri/map",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "dojo/domReady!"
      ], function(
        parser,
        ready,
        BorderContainer,
        ContentPane,
        dom,
        Map,
        urlUtils,
        arcgisUtils,
        Legend,
        Scalebar
      ) {
        ready(function(){

        parser.parse();


//***** change webmapid only
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(function(response){
          

          var map = response.map;



          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          //add the legend. Note that we use the utility method getLegendLayers to get
          //the layers to display in the legend from the createMap response.
          var legendLayers = arcgisUtils.getLegendLayers(response);
          var legendDijit = new Legend({
            map: map,
            layerInfos: legendLayers
          },"legend");
          legendDijit.startup();


        });


        });

      });
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">

    <script src="https://js.arcgis.com/3.20/"></script>
    <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">

      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
  </body>

Note:- Update the code as per comments in it

Hoping this will help you :)

Upvotes: 1

Vikash Pandey
Vikash Pandey

Reputation: 5443

well, As i can see in snippet code webmap json doesn't contain infowindow/popup configuration settings because of that i think its is not visible in you sample.

However recommended way is to create an online esri webmap which will handle all those complications for you. and add your esri mapserver in the webmap. after that configure the popup for the layer.

Creating a webmap is very simple process, below are the steps to do that-

  1. Choose basemap
  2. Add layers
  3. Change style
  4. Configure pop-ups
  5. Save map
  6. share the webmap

source webmap:- http://doc.arcgis.com/en/arcgis-online/reference/what-is-web-map.htm

source steps:- http://doc.arcgis.com/en/arcgis-online/get-started/get-started-with-maps.htm

If you need more info let me know i will update accordingly.

Hoping this will help you :)

Upvotes: 0

Related Questions