nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

map vs app.map

jaykapalczynski

Confused here...working on integrating a couple examples...

one references map and the other one app.map

https://developers.arcgis.com/javascript/jssamples/widget_print_esri_request.html

app.map = new esri.Map("map", {           basemap: "hybrid",           center: [-117.447, 33.906],           zoom: 17,           slider: false         });

https://developers.arcgis.com/javascript/jssamples/widget_basemap.html

map = new Map("map", {           basemap: "topo",           center: [-105.255, 40.022],           zoom: 13         });

I have the example with app.map working () but I then try and bring in the Basemap gallery and that one only has map referenced...how do I modify this to work
THE basemap selector appears but when I select a map nothing happens.
I tried this

var basemapGallery = new BasemapGallery({       showArcGISBasemaps: true,       app.map: map     }, "basemapGallery");      basemapGallery.startup();

    var basemapGallery = new BasemapGallery({       showArcGISBasemaps: true,       map: map     }, "basemapGallery");      basemapGallery.startup();      basemapGallery.on("error", function(msg) {       console.log("basemap gallery error:  ", msg);     });

 var map;     var app = {};     require([         "dojo/ready",         "dojo/on",         "dojo/_base/connect",         "dojo/dom",         "dojo/dom-construct",         "dojo/parser",         "dijit/registry",         "esri/layers/FeatureLayer",      "esri/layers/ArcGISDynamicMapServiceLayer",      "esri/InfoTemplate",         "esri/renderers/UniqueValueRenderer",         "esri/renderers/SimpleRenderer",         "esri/symbols/SimpleMarkerSymbol",         "esri/symbols/SimpleLineSymbol",   "dijit/layout/BorderContainer",   "dijit/layout/ContentPane",   "esri/map",   "esri/dijit/BasemapGallery",   "esri/request",   "esri/config",         "dojo/_base/array",   "esri/dijit/Print",   "esri/tasks/PrintTemplate",   "esri/arcgis/utils",   "esri/domUtils",   "esri/dijit/Popup",   "dojo/domReady!"     ], function(         ready,         on,         connect,         dom,         domConstruct,         parser,         registry,         FeatureLayer,      ArcGISDynamicMapServiceLayer,      InfoTemplate,      UniqueValueRenderer,      SimpleRenderer,      SimpleMarkerSymbol,      SimpleLineSymbol,         BorderContainer,         ContentPane,         Map,         BasemapGallery,         esriRequest,         esriConfig,         arrayUtils,         Print,         PrintTemplate,         arcgisUtils,         domUtils,         Popup     ) {  //ready(function(){      parser.parse();      //setup event handlers for the next/previous buttons     on(dom.byId("previous"), "click", selectPrevious);     on(dom.byId("next"), "click", selectNext);      esri.config.defaults.io.proxyUrl = "https://junk.gov/proxypage_net/proxy.ashx";       app.map = new esri.Map("map", {        basemap: "topo",        center: [-77.4329, 37.5410],        zoom: 7,        slider: false     });      // add graphics for pools with permits     var permitUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/PoolPermits/MapServer/1";     var poolFeatureLayer = new FeatureLayer(permitUrl, {       mode: FeatureLayer.MODE_SNAPSHOT     });     app.map.addLayer(poolFeatureLayer);      var TestUrl2 = "https://map.gov/arcgis/rest/services/Map/Map_Readonly/FeatureServer/0";     var FeatureLayer2 = new FeatureLayer(TestUrl2, {       mode: FeatureLayer.MODE_SNAPSHOT     });     app.map.addLayer(FeatureLayer2);      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps  var basemapGallery = new BasemapGallery({  showArcGISBasemaps: true,  map: map  }, "basemapGallery");  basemapGallery.startup();      basemapGallery.on("error", function(msg) {       console.log("basemap gallery error:  ", msg);     });    });

Find more posts tagged with

Accepted answers

TimWitt

It seems they used app.map and app.printURL within a list, which you can see by looking at var app ={};

For your purpose you needed to reference the map (which the map name was app.map) in your Basemap gallery.

If you change the name from app.map to just map and then change "map: app.map" to "map: map" your basemap widget should still work.

Sometimes its hard for me to explain 🙂

All comments

JonathanUihlein

that makes sense....I am just wondering WHY the examples do it both ways. if there is no reason or benefit to use app.map why use it in some examples and not in others. Makes learning a bit more difficult.

Whats the purpose of the list????

At least I know now....I thank you for your patience and thoughts.
Cheers

Hi Jay,

There is no 'right' way to do something when it comes to code.
There are common methodologies and structural styles that people use when they code.
Most of the time, there is never a 'best' way to do something because it comes down to preference.

When using a library, there are certain structural or syntax requirements, but the basic rules of Javascript still apply.

In this specific example, the 'app' variable is simply an array, declared outside of the DOJO scope, populated with objects that the author wanted to use in his application without having to worry about scope. The author can access their 'app' array and get the contents from anywhere in the script.

This is a basic Javascript concept that users need to understand before using any library.

If you are looking for a good book on Javascript basics, I suggest picking up "Javascript: The Good Parts" (http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742)

jaykapalczynski

that makes sense....I am just wondering WHY the examples do it both ways. if there is no reason or benefit to use app.map why use it in some examples and not in others. Makes learning a bit more difficult.

Whats the purpose of the list????

At least I know now....I thank you for your patience and thoughts.
Cheers

TimWitt

jaykapalczynski

so you are saying that I dont need the app.map this is something the example did differently?
If so whats the benefit of using it? very confused.

EDIT: I got my example working just confused why different examples are using app.map instead of map...why the different usages?

TimWitt

You are right it is app.map because they declared this first.

var app = {};

jaykapalczynski

why do the ESRI examples have app.map then????

TimWitt

Jay,

the app.map and map are just names for your map. In your Basemagallery, the first map will always be map, only what is behind the ":" changes depending in what you have named your map.

I recommend naming your map always map (i.e. map = new esri.Map("map"....) this will cut down on confusion 🙂

Tim

jaykapalczynski

Think I got it...

map: app.map

not

app.map: map

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.