Resizing and scalebar to a Query Map

MichaelRiddle · ‎10-10-2011

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>QueryTask with geometry, results as an InfoWindow</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<style type="text/css">
      html, body {height: 100%; width: 100%; margin: 1; padding: 0;}
      body{background-color:#730; overflow:hidden; font-family: "Trebuchet MS"; border:5px solid black}
      #map{overflow:hidden; padding:0;}
   .AppTitle{font-size:3em; color: yellow;}
   .esriScalebar{height: 60%;}
</style>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript" language="Javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.query");

dojo.require("dojo.parser");

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("esri.dijit.Scalebar");

var map, queryTask, query;
var symbol, infoTemplate;

    function init() {
        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: initialExtent
        });

//create and add new layer
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(layer);

//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
dojo.connect(map, "onClick", executeQueryTask);

//build query task
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");

//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
//dojo.connect(queryTask, "onComplete", showResults);

//build query filter
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME", "STATE_ABBR", "SQMI", "MALES", "FEMALES"];

//create the infoTemplate to be used in the infoWindow.
//All ${attributeName} will be substituted with the attribute value for current feature.
infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "Abbreviation: ${STATE_ABBR}<br />Square Miles: ${SQMI}<br /> # of Males: ${MALES}<br /> # of Females: ${FEMALES}");

symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));

}

function executeQueryTask(evt) {
//onClick event returns the evt point where the user clicked on the map.
//This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
query.geometry = evt.mapPoint;

//Execute task and call showResults on completion
queryTask.execute(query, showResults);
}

function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();

var features = featureSet.features;

//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(features,function(feature){
var graphic = feature;
graphic.setSymbol(symbol);

//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);

//Add graphic to the map graphics layer.
map.graphics.add(graphic);

});

dojo.connect(map.graphics, "onMouseMove", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );

}

dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
Click on a state to get more info. When state is highlighted, move mouse over state to get more info.
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>


    </script>
</head>
<body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 100%; height: 100%;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
   <div dojotype="dijit.layout.ContentPane" region="top" style="width: 100%; height: 20%;">
   <div style="position: absolute; top: 60px; left:900px;"> <span class="AppTitle"> Newbie Test</span> </div>
</div>
    </div>
</body>
</html>

derekswingley1 · ‎10-10-2011

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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
<!--The viewport meta tag is used to improve the presentation and behavior of the samples 
on iOS devices--> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
<title>QueryTask with geometry, results as an InfoWindow</title> 
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css"> 
<style type="text/css"> 
html, body {height: 100%; width: 100%; margin: 1; padding: 0;} 
body{background-color:#730; overflow:hidden; font-family: "Trebuchet MS"; border:5px solid black} 
#map{overflow:hidden; padding:0;} 
.AppTitle{font-size:3em; color: yellow;}
.esriScalebar{height: 60%;}
</style> 

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script> 
<script type="text/javascript" language="Javascript"> 
dojo.require("esri.map"); 
dojo.require("esri.tasks.query"); 
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.Scalebar");

var map, queryTask, query; 
var symbol, infoTemplate; 

function init() { 
  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)
  }); 

  //create and add new layer 
  var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 
  map.addLayer(layer); 

  dojo.connect(map, 'onLoad', function() {
    // handle resize of the browser
    dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

    dojo.connect(map, "onClick", executeQueryTask); 
  });

  //build query task 
  queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"); 
  query = new esri.tasks.Query(); 
  query.returnGeometry = true; 
  query.outFields = ["STATE_NAME", "STATE_ABBR", "SQMI", "MALES", "FEMALES"]; 

  //create the infoTemplate to be used in the infoWindow. 
  //All ${attributeName} will be substituted with the attribute value for current feature. 
  infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "Abbreviation: ${STATE_ABBR}<br />Square Miles: ${SQMI}<br /> # of Males: ${MALES}<br /> # of Females: ${FEMALES}"); 

  symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5])); 

} 

function executeQueryTask(evt) { 
  query.geometry = evt.mapPoint; 
  queryTask.execute(query, showResults); 
} 

function showResults(featureSet) { 
  //remove all graphics on the maps graphics layer 
  map.graphics.clear(); 
  var features = featureSet.features; 
  dojo.forEach(features,function(feature){ 
    var graphic = feature; 
    graphic.setSymbol(symbol); 

    //Set the infoTemplate. 
    graphic.setInfoTemplate(infoTemplate); 

    //Add graphic to the map graphics layer. 
    map.graphics.add(graphic); 
  }); 

  dojo.connect(map.graphics, "onMouseMove", function(evt) { 
    var g = evt.graphic; 
    map.infoWindow.setContent(g.getContent()); 
    map.infoWindow.setTitle(g.getTitle()); 
    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); 
  }); 
  dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} ); 
} 

dojo.addOnLoad(init); 
</script> 
</head> 
<body class="claro"> 
Click on a state to get more info. When state is highlighted, move mouse over state to get more info. 
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div> 
</body> 


</script> 
</head> 
<body class="claro"> 
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" 
style="width: 100%; height: 100%;"> 
<div id="map" dojotype="dijit.layout.ContentPane" region="center"> 
</div> 
<div dojotype="dijit.layout.ContentPane" region="top" style="width: 100%; height: 20%;">
<div style="position: absolute; top: 60px; left:900px;"> <span class="AppTitle"> Newbie Test</span> </div>
</div>
</div>
</body> 
</html>

MichaelRiddle · ‎10-16-2011

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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
<!--The viewport meta tag is used to improve the presentation and behavior of the samples 
on iOS devices--> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
<title>QueryTask with geometry, results as an InfoWindow</title> 
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css"> 
<style type="text/css"> 
html, body {height: 100%; width: 100%; margin: 1; padding: 0;} 
body{background-color:#730; overflow:hidden; font-family: "Trebuchet MS"; border:5px solid black} 
#map{overflow:hidden; padding:0;} 
.AppTitle{font-size:3em; color: yellow;}
.esriScalebar{height: 60%;}
</style> 

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script> 
<script type="text/javascript" language="Javascript"> 
dojo.require("esri.map"); 
dojo.require("esri.tasks.query"); 
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.Scalebar");

var map, queryTask, query; 
var symbol, infoTemplate; 

function init() { 
  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)
  }); 

  //create and add new layer 
  var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 
  map.addLayer(layer); 

  dojo.connect(map, 'onLoad', function() {
    // handle resize of the browser
    dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

    dojo.connect(map, "onClick", executeQueryTask); 
  });

  //build query task 
  queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"); 
  query = new esri.tasks.Query(); 
  query.returnGeometry = true; 
  query.outFields = ["STATE_NAME", "STATE_ABBR", "SQMI", "MALES", "FEMALES"]; 

  //create the infoTemplate to be used in the infoWindow. 
  //All ${attributeName} will be substituted with the attribute value for current feature. 
  infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "Abbreviation: ${STATE_ABBR}<br />Square Miles: ${SQMI}<br /> # of Males: ${MALES}<br /> # of Females: ${FEMALES}"); 

  symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5])); 

} 

function executeQueryTask(evt) { 
  query.geometry = evt.mapPoint; 
  queryTask.execute(query, showResults); 
} 

function showResults(featureSet) { 
  //remove all graphics on the maps graphics layer 
  map.graphics.clear(); 
  var features = featureSet.features; 
  dojo.forEach(features,function(feature){ 
    var graphic = feature; 
    graphic.setSymbol(symbol); 

    //Set the infoTemplate. 
    graphic.setInfoTemplate(infoTemplate); 

    //Add graphic to the map graphics layer. 
    map.graphics.add(graphic); 
  }); 

  dojo.connect(map.graphics, "onMouseMove", function(evt) { 
    var g = evt.graphic; 
    map.infoWindow.setContent(g.getContent()); 
    map.infoWindow.setTitle(g.getTitle()); 
    map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); 
  }); 
  dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} ); 
} 

dojo.addOnLoad(init); 
</script> 
</head> 
<body class="claro"> 
Click on a state to get more info. When state is highlighted, move mouse over state to get more info. 
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div> 
</body> 


</script> 
</head> 
<body class="claro"> 
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" 
style="width: 100%; height: 100%;"> 
<div id="map" dojotype="dijit.layout.ContentPane" region="center"> 
</div> 
<div dojotype="dijit.layout.ContentPane" region="top" style="width: 100%; height: 20%;">
<div style="position: absolute; top: 60px; left:900px;"> <span class="AppTitle"> Newbie Test</span> </div>
</div>
</div>
</body> 
</html>

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 · ‎10-16-2011

Awesome, glad I could help.