Resizing and scalebar to a Query Map

Question

Hi all, am new and I am having some difficulty displaying a scale bare when I use a query map. I cannot seem to figure out how to add a scalebar and insure my maps resize. Here is my code: QueryTask with geometry, results as an InfoWindow Click on a state to get more info. When state is highlighted, move mouse over state to get more info.

Newbie Test

derekswingley1 · Answer

Awesome, glad I could help.

MichaelRiddle · Answer

I'm not sure I completely understand your question but here are a few things I noticed: -you're using a map service in web mercator(wkid 102100) but specifying a geographic extent(wkid 4326). Use esri.geometry.geographicToWebMercator() to convert your extent before passing it to your map: var initialExtent = new esri.geometry.Extent({"xmin":-120.227821999585,"ymin":20.5332698820995,"xmax":-65.9816769016675,"ymax":71.4062353670687,"spatialReference":{"wkid":4326}}); map = new esri.Map("mapDiv", { extent: esri.geometry.geographicToWebMercator(initialExtent) }); -you're adding a tile map service but using the dynamic map service constructor. Use: var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); -to handle resizing of the browser use this: dojo.connect(map, 'onLoad', function() { // handle resize of the browser dojo.connect(dijit.byId('map'), 'resize', map,map.resize); //Listen for click event on the map, when the user clicks on the map call executeQueryTask function. dojo.connect(map, "onClick", executeQueryTask); }); Note: the map's onLoad event is also where you should connect your onClick handler Here's a tweaked version of your whole page: QueryTask with geometry, results as an InfoWindow Click on a state to get more info. When state is highlighted, move mouse over state to get more info.

Newbie Test

Thanks for your help. It is exactly what I was looking for... It cleared a few things up for me that I was having a hard time understanding.

derekswingley1 · Answer

I'm not sure I completely understand your question but here are a few things I noticed: -you're using a map service in web mercator(wkid 102100) but specifying a geographic extent(wkid 4326). Use esri.geometry.geographicToWebMercator() to convert your extent before passing it to your map: var initialExtent = new esri.geometry.Extent({"xmin":-120.227821999585,"ymin":20.5332698820995,"xmax":-65.9816769016675,"ymax":71.4062353670687,"spatialReference":{"wkid":4326}}); map = new esri.Map("mapDiv", { extent: esri.geometry.geographicToWebMercator(initialExtent) }); -you're adding a tile map service but using the dynamic map service constructor. Use: var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); -to handle resizing of the browser use this: dojo.connect(map, 'onLoad', function() { // handle resize of the browser dojo.connect(dijit.byId('map'), 'resize', map,map.resize); //Listen for click event on the map, when the user clicks on the map call executeQueryTask function. dojo.connect(map, "onClick", executeQueryTask); }); Note: the map's onLoad event is also where you should connect your onClick handler Here's a tweaked version of your whole page: QueryTask with geometry, results as an InfoWindow Click on a state to get more info. When state is highlighted, move mouse over state to get more info.

Newbie Test