I'm working on a simple map with two layers representing the same features. One is a point layer that only displays when the user is zoomed out beyond a certain scale, and the other is a polygon layer that only displays when zoomed in far enough. The polygon layer has all the attributes that I'd like to display in the info window, but I'd like users to be able to see this information when clicking on the point layer, and I'm not sure how to accomplish this. I tried removing the min/max scale from the polygon layer, and that does work, but since some of the polygons are rather small (especially when zoomed out), it's difficult to move the mouse cursor directly over them when zoomed out.
Is there another way I can accomplish this?
define(['dojo/on', 'dojo/_base/lang', 'esri/tasks/query'], function (on, lang, Query) {
/**
* @param {esri.Map} map
* @param {esri.layers.FeatureLayer} pointLayer
* @param {esri.layers.FeatureLayer} polyLayer
* @return removable handle
*/
function tiePointLayerToPolygons(map, pointLayer, polyLayer) {
/**
* Callback for clicks on point layer.
* @param {MouseEvent} evt
* @param {esri.Graphic} evt.graphic - the graphic which was clicked.
*/
var query = function (evt) {
var iw = map.infoWindow,
pt = evt.graphic.geometry;
// return if no window
if (!iw) {
return;
}
polyLayer.queryFeatures(lang.mixin(new Query(), {
geometry: pt,
spatialRelationship: Query.SPATIAL_REL_CONTAINS
})).then(function (featureSet) {
// assuming info window is popup...if not this will need tweaking
iw.setFeatures(featureSet.features);
// show infow window at the clicked point
iw.show(pt);
});
};
// listen to clicks on point layer.
return on(pointLayer, 'click', query);
}
return tiePointLayerToPolygons;
});