How to reuse map object

MartinStofanak · ‎08-29-2013

Hi,

i am new in the arcgis technology and i can't find solution to my problem.
I am creating a single page js application with at least 2 screens (ajax). User can switch between them as much as he likes.
There is a map on the second screen which is initialized every time when user switch to this screen (my problem).

I dont want to initialize this map every time the second screen is loaded, instead i want to keep map in memory and put it in html right away so the user doesnt need to wait for map initialization.

I have map stored in global variable, but i dont know how to insert it to some div container.

Sorry for my english.

Thanks.

JasonZou · ‎08-29-2013

This is a more HTML, CSS and Javascript question. What I would do is to create two DIVs, one for each screen as you call it. Both DIVs will occupy the same space every single moment. So when you switch to the map view, show map DIV and hide the other; and vice versa. This way, you only need to initialize the map once.

View solution in original post

JasonZou · ‎08-29-2013

This is a more HTML, CSS and Javascript question. What I would do is to create two DIVs, one for each screen as you call it. Both DIVs will occupy the same space every single moment. So when you switch to the map view, show map DIV and hide the other; and vice versa. This way, you only need to initialize the map once.

ZachLiu1 · ‎08-29-2013

A tab container may serve you well,

Is this what you want to do?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>App Title</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
        html, body {
            height: 100%;
            width: 100%;
            outline: hidden;
            padding: 0;
            margin: 0;
        }
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
        require([
            "dojo/parser",
            "dojo/ready",
            "dojo/dom",

            "esri/map",

            "dijit/layout/TabContainer",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",

            "dojo/domReady!"], function(parser, ready, dom, Map){

            var map = new Map("map", {
                center: [-56.049, 38.485],
                zoom: 3,
                basemap: "streets"
            });
        });
    </script>
</head>
<body class="claro">
<div id="content"
     data-dojo-type="dijit.layout.BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
    <div data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%; margin: 0;" region="center" tabPosition="bottom">
        <div data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props="title:'Screen1', selected:true">
            <span id="details">This is Screen One.</span>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" id="mapPane"
             data-dojo-props="title:'Map'">
            <div id="map"></div>
        </div>
    </div>


</div>
</body>
</html>

MartinStofanak · ‎08-30-2013

ZachLiu: This tabs looks interesting, but i can't have tabbed application.

zj_zou: I took idea from your post. When page is loaded for the first time map is initalized to some div which is hidden and it's located outside the div where views(screens) are changing. When the other view(screen with a map) is loaded i move the content of hidden container to loaded template.
It doesn't seem to me like clean solution, i thought that there would be some way to use initialized map object in js, but it works.

JasonZou · ‎08-30-2013

I don't know how you trigger the view switch. Here is an sample code to toggle the two views.

function switchView(viewName) {
  var divMap = dojo.byId("map");      // map is DIV id for the map view
  var divOther = dojo.byId("other");  // other is the DIV id for the other view

  dojo.style(divMap, "display", viewName === "map" ? "block" : "none");
  dojo.style(divOther , "display", viewName === "map" ? "none" : "block");   
}