Community

Conditonally showing map

346
3
12-27-2013 07:18 AM
vinayb
by
New Contributor III
‎12-27-2013 07:18 AM
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?
0 Kudos
3 Replies
JonathanUihlein
by Esri Regular Contributor
Esri Regular Contributor
‎12-30-2013 09:31 AM
Could you create an example using http://jsfiddle.net/ ?
0 Kudos
vinayb
by
New Contributor III
‎01-06-2014 06:09 AM
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.
0 Kudos
JonathanUihlein
by Esri Regular Contributor
Esri Regular Contributor
‎01-06-2014 08:02 AM
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>
0 Kudos