topic Conditonally showing map in ArcGIS JavaScript Maps SDK Questions

Conditonally showing map

vinayb — Fri, 27 Dec 2013 15:18:39 GMT

Hi ALl,

   I want to display map conditionally , that is lets i initailize the map once usign following code

     var extent = esri.geometry.Extent("some values");
     var map= esri.map("mapdiv",{extent});
     var baseLayer = new ArcGisDynamicMapServiceLayer(url);
     map.addLayer(baseLayer);
     var featureLayer = new FeatureLayer(url);
     map.addLayer(baseLayer);
   // sorry if some api as I am not in front of my code



As you noticed i am initalizing map to a particular div . We are planning to implement our app completly ajax based i,e header
and footer sections remains constant where as only the middle portion keeps on changing.On load of website since we show hte map
,when i want to display someother content where map is I have to either overide the existing content and load new content by
doing this i am losing map content hence i have to reload the map once again if i have to show the map.
I want to avoid doing this .Hence i decided to hide the map div and place it in some other location when i want to load some other content other then the map
and place div back again to original position and display the map.
    I have been able to implement this but i am facing an issue where once i hide the div and display it back agian even though
the map shows up but seenms like all featuer layer graphics are lost , i have implements mouse over which does not work
anything wrong in the approach?

Re: Conditonally showing map

JonathanUihlein — Mon, 30 Dec 2013 17:31:59 GMT

Could you create an example using http://jsfiddle.net/ ?

Re: Conditonally showing map

vinayb — Sun, 12 Dec 2021 07:40:18 GMT

I can use jsfidle since I am using more one html files , so I am writing the code below

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
<script>dojoConfig = {async: true, parseOnLoad: true}</script>

    <script src="http://js.arcgis.com/3.8/"></script>
 <script>
      var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle, 
        TooltipDialog, dijitPopup
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        
        var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID, 
            new Color([255,255,255,0.35]), 
            1
          ),
          new Color([125,125,125,0.35])
        );
        southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

        map.infoWindow.resize(245,125);
        
        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();
        
        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID, 
            new Color([255,0,0]), 3
          ), 
          new Color([125,125,125,0.35])
        );

        //close the dialog when the mouse leaves the highlight graphic
        map.on("load", function(){
          map.graphics.enableMouseEvents();
          map.graphics.on("mouse-out", closeDialog);
          
        });
                
        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        southCarolinaCounties.on("mouse-over", function(evt){
          var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
            + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
            + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
            + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";
  
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
          
          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog, 
            x: evt.pageX,
            y: evt.pageY
          });
        });
    
        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }

      });
 

     function showMap(){
       require(["dijit/layout/ContentPane","dojo/dom-construct"],function(layout,domConstruct){

            var contentPane =dijit.registry.byId("mapdiv");
               console.log(" contentPane"+contentPane);
                           contentPane.setHref("mapcontainer.html");
           contentPane.set("onDownloadEnd",function(){
            var mapNode = dojo.byId("map");
            dojo.byId("map").style.display="block";
            domConstruct.place(mapNode,dojo.byId('mapcontainer'),"last");
});
});

       
     }

     function hideMap(){
            var mapNode = dojo.byId("map");
            dojo.byId("map").style.display="none";

       require(["dijit/layout/ContentPane","dojo/dom-construct"],function(layout,domConstruct){
            domConstruct.place(mapNode,dojo.byId('hidecontent'),"last");
            dojo.byId("map").style.display="none";
            var contentPane =dijit.registry.byId("mapdiv");
               console.log(" contentPane"+contentPane);
                contentPane.setHref("load.html");
});

       
     }

    </script>
  </head>

  <body class="claro">
<div id="hidecontent"></div>
    <div id="mapdiv" data-dojo-type="dijit/layout/ContentPane" >
     
    <div id="map"></div>


</div>
<input type='submit' onclick='hideMap();'>
<input type='submit' value='show' onclick='showMap();'>
  </body>
</html>

MapContainer.html


<div id="mapcontainer">
</div>

load.html

l


<div id="temp">
</div>

Please I am just using two html files here the map container.html file will contain map div well I am adding the div of map
when to that html through js when I load it.Now other html files I load are like load.html file

Please let me know if my approach is right.I am able to show my issue here since it complicated code I will try on that again but you can get the basic feel on this.

Re: Conditonally showing map

JonathanUihlein — Sun, 12 Dec 2021 07:40:21 GMT

Made some changes. Let me know what you think.

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script>dojoConfig = {async: true, parseOnLoad: true}</script>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, dialog;
      require([
      "dojo/dom-construct", "dojo/on", "dojo/dom",
      "esri/map", "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
      "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
      "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
      "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
      domConstruct, on, dom,
      Map, FeatureLayer,
      SimpleFillSymbol, SimpleLineSymbol,
      SimpleRenderer, Graphic, esriLang,
      Color, number, domStyle, 
      TooltipDialog, dijitPopup
      ) {
      map = new Map("map", {
        basemap: "streets",
        center: [-80.94, 33.646],
        zoom: 8,
        slider: false
      });

      window.myMap = map;

      var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
        mode: FeatureLayer.MODE_SNAPSHOT,
        outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
      });
      southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

      var symbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID, 
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID, 
          new Color([255,255,255,0.35]), 
          1
        ),
        new Color([125,125,125,0.35])
      );
      southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
      map.addLayer(southCarolinaCounties);

      map.infoWindow.resize(245,125);

      dialog = new TooltipDialog({
        id: "tooltipDialog",
        style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
      });
      dialog.startup();

      var highlightSymbol = new SimpleFillSymbol(
        SimpleFillSymbol.STYLE_SOLID, 
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID, 
          new Color([255,0,0]), 3
        ), 
        new Color([125,125,125,0.35])
      );

      //close the dialog when the mouse leaves the highlight graphic
      map.on("load", function(){
        map.graphics.enableMouseEvents();
        map.graphics.on("mouse-out", closeDialog);
        
      });
              
      //listen for when the onMouseOver event fires on the countiesGraphicsLayer
      //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
      southCarolinaCounties.on("mouse-over", function(evt){
        var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
          + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
          + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
          + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";

        var content = esriLang.substitute(evt.graphic.attributes,t);
        var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
        map.graphics.add(highlightGraphic);
        
        dialog.setContent(content);

        domStyle.set(dialog.domNode, "opacity", 0.85);
        dijitPopup.open({
          popup: dialog, 
          x: evt.pageX,
          y: evt.pageY
        });
      });

      function closeDialog() {
        map.graphics.clear();
        dijitPopup.close(dialog);
      }

      on(dom.byId("hideMapBtn"), "click", function(){
        console.log("HIDE");
        
        window.myMap.container.style.display="none";
        var mapNode = dojo.byId("map");
        domConstruct.place(mapNode,dojo.byId('hidecontent'),"last");
        
        var contentPane =dijit.registry.byId("mapdiv");
        contentPane.setHref("load.html");
        
      });

      on(dom.byId("showMapBtn"), "click", function(){
        console.log("SHOW");
        
        if(window.myMap.container.style.display == "none"){
          
          var contentPane =dijit.registry.byId("mapdiv");
          contentPane.setHref("mapcontainer.html");
          contentPane.set("onDownloadEnd",function(){
            var mapNode = dojo.byId("map");
            domConstruct.place(mapNode,dojo.byId('mapcontainer'),"last");
            window.myMap.container.style.display="block";
          });
        }
      });
    });
    </script>
  </head>

  <body class="claro">
<div id="hidecontent"></div>
    <div id="mapdiv" data-dojo-type="dijit/layout/ContentPane" >
    <div id="map"></div>
    </div>
<input id="hideMapBtn" type='submit'>
<input id="showMapBtn" type='submit' value='show'>
  </body>
</html>