topic Re: How to reuse map object in ArcGIS JavaScript Maps SDK Questions

How to reuse map object

MartinStofanak — Thu, 29 Aug 2013 13:53:06 GMT

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.

Re: How to reuse map object

JasonZou — Thu, 29 Aug 2013 14:01:18 GMT

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.

Re: How to reuse map object

ZachLiu1 — Sun, 12 Dec 2021 01:13:34 GMT

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>

Re: How to reuse map object

MartinStofanak — Fri, 30 Aug 2013 10:18:29 GMT

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.

Re: How to reuse map object

JasonZou — Sun, 12 Dec 2021 01:13:37 GMT

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");   
}