Select to view content in your preferred language

Resize Popup Window

4437
6
05-08-2013 10:24 AM
RayJulich
Emerging Contributor
I created a map where almost all the popup windows are 480x400. I do have a few windows that only need to be 200x100. I added:
map.infoWindow.resize(480, 400);
to the map to make the popup windows 480x400. If I add:
map.infoWindow.resize(200, 100);
to the map as well, all my popup windows are 200x100. It seems like whatever code I add to modify the infoWindow last is what all the windows are size to. Is there a way to have popup windows different sizes on the same map?
0 Kudos
6 Replies
SteveCole
Honored Contributor
Where are you placing your map.infoWindow.resize code? Is it within a dojo.connect for each layer? I'm doing this with version 3.3 of the API without any problems:

 //Listener event for feature selection and the popup info widow 
 dojo.connect(theUsgsLayer,"onClick",function(evt){
  //Listener event for feature selection and the popup info widow
  var query = new esri.tasks.Query();
  query.geometry = pointToExtent(map,evt.mapPoint,15);

  var deferred = theUsgsLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
  map.infoWindow.resize(350,300);  
  map.infoWindow.setFeatures([deferred]);
  map.infoWindow.show(evt.mapPoint);
 });

 //Listener event for feature selection and the popup info widow 
 dojo.connect(theFloodplainLayer,"onClick",function(evt){
  //Listener event for feature selection and the popup info widow
  var query = new esri.tasks.Query();
  query.geometry = pointToExtent(map,evt.mapPoint,15);

  var deferred = theFloodplainLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW); 
  //map.infoWindow.resize(map.width * 0.70, map.height * 0.6);
  map.infoWindow.resize(200,175);
  map.infoWindow.setFeatures([evt.graphic]);
  map.infoWindow.show(evt.mapPoint);
 });
0 Kudos
RayJulich
Emerging Contributor
evtguy,

I had the resize statement right before I added the point to the map. All the points were in the same layer:
map.infoWindow.resize(480, 400);
glayer.add(graphic);


I guess all popup windows on the same layer need to be the same size. I tried using the code you had posted, but it seems to be missing some code. Here are the errors the 2 errors I get when using the code (using Firefox Firebug):

-No pointToExtent function
-esri.layers.FeatureLayer in undefined

I did create another layer for the points that needed a smaller popup window.
0 Kudos
SteveCole
Honored Contributor
Yeah, the pointToExtent function isn't an ESRI API function. FWIW, here it is:

function pointToExtent(map, point, toleranceInPixel) {
 //Function to convert a point coordinate into a rectangle area
 var pixelWidth = map.extent.getWidth() / map.width;
 var toleraceInMapCoords = toleranceInPixel * pixelWidth;
    toleraceInMapCoords = 1320;
 return new esri.geometry.Extent( point.x - toleraceInMapCoords,
     point.y - toleraceInMapCoords,
     point.x + toleraceInMapCoords,
     point.y + toleraceInMapCoords,
     map.spatialReference
 );
}


You didn't post any code so I was assuming that you're using featureLayers for your layers. If you use featureLayers, you have to add the dojo.require for it:

dojo.require("esri.layers.FeatureLayer");
0 Kudos
RayJulich
Emerging Contributor
entguy,

I'm using a GraphicsLayer:

var layerObj = new esri.layers.GraphicsLayer({id:"points_glayer", visible:true, opacity:1});
map.addLayer(layerObj);

var glayer = map.getLayer("points_glayer");


How can I do this with featureLayer? Sorry, I'm fairly new to ESRI Javascript.

Thank you.
0 Kudos
SteveCole
Honored Contributor
Ahh, ok, the line in my code about selectFeatures is for featureLayers so that obviously won't work with graphicsLayers.

What criteria defines when you need to use your smaller sized windows? Do the features in your graphicsLayer have an attribute which should trigger the use of a smaller window or do you have multiple graphicsLayers and only some of those need the smaller windows?

I haven't done any work with graphicsLayers so I'm going to have to defer to someone else about that. You should still be able to utilize a dojo.connect on your layer's onClick event but I'm a little fuzzy on the details from there. I know this isn't always possible but, if you have a link to a publicly accessible version of the project you're working on. posting it here would help others try and troubleshoot your issue and better understand how your layers are set up.

Steve
0 Kudos
RayJulich
Emerging Contributor
Steve,

Here is the map that I have most recently made - http://wa.water.usgs.gov/projects/clovercreek/hydrographs.esri.htm. There is actually only one popup window one this map that needs a smaller popup window. The point is the second one from the very right, on the top.

[ATTACH=CONFIG]24159[/ATTACH]

In the text file that is read in for placing all the points on the map, there is a field called type, if the type = m, then the point needs to have a smaller popup window, otherwise, the point will have a larger popup window with a graph in the window.

[ATTACH=CONFIG]24160[/ATTACH]

There is no particular reason for me using a GraphicLayer. If I can do what I need with a FeatureLayer - I'm open to that. When I first crated the map, I had all of the points on the same layer. Then, I put the point that needs the smaller window on it's own layer.

Ray
0 Kudos