I need help on how i can customize the windows popup so as to remove paging, i would like all the fields displayed on one page.
Gideon,
Can you post the code you have now?
<!DOCTYPE html>
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--The X-UA-Compatible meta tag is used to force IE to not display the page in compatability mode if set in the browser-->
<!--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>Single Point Search</title>
<link rel="stylesheet" href="http://uat-gwb-v02.firescotland.local/arcgis_js_api/library/3.12/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://uat-gwb-v02.firescotland.local/arcgis_js_api/library/3.12/3.12/esri/css/esri.css">
<style>
html, body, #map {padding: 0; margin: 0; height: 100%; width: 100%; background-color:#D5EAFB;}
#measurementPane{
width:240px;
}
.claro .dijitTitlePaneTitle {
background: #fff;
font-weight:600;
border: none;
border-bottom:solid 1px #29201A;
border-top:solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background:#eee;
}
.claro .dijitTitlePaneTitleActive {
background:#808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: none;
border-bottom: none;
border-left: none;
}
</style>
<script src="http://uat-gwb-v02.firescotland.local/arcgis_js_api/library/3.12/3.12/init.js"></script>
<script>
var map;
var measurementFlag = "0";
require([
"esri/InfoTemplate",
"esri/map",
"esri/geometry/Extent",
"esri/dijit/Popup",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"dojo/dom-construct",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/_base/Color",
"esri/urlUtils",
"dojo/dom",
"esri/Color",
"dojo/keys",
"dojo/parser",
"esri/config",
"esri/sniff",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/Scalebar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dojo/domReady!"
],
function (
InfoTemplate,
Map,
Extent,
Popup,
FeatureLayer,
Query,
domConstruct,
Tiled,
Point,
SpatialReference,
Color,
urlUtils,
dom, Color, keys, parser,
esriConfig, has, SnappingManager, Measurement, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol
) {
// get x, y coordinates and zoom ;evel from URL querystring
var q = urlUtils.urlToObject(window.location.href);
var x = q.query.x;
var y = q.query.y;
var zoom = 13;
parser.parse();
//esriConfig.defaults.io.proxyUrl = "/proxy/";
//esriConfig.defaults.io.alwaysUseProxy = false;
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esriConfig.defaults.geometryService = new GeometryService("https://s-gwb-v02.firescotland.local/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);
//Coordinates for testing - comment out before deploying
//******************************************************
//******************************************************
// Define popup to replace InfoWindow to allow paged results
var popup = Popup({
},domConstruct.create("div"));
//Create Infotemplate and define the title (Postal Address)
//Call function (getTextContent) to display paged query results in content pane
var addressTemplate = new InfoTemplate("Postal Address");
addressTemplate.setContent(getTextContent);
//Create map and use popup for Infowindow
map = new Map("map", {
infoWindow: popup,
});
//After map is created, set centre point and zoom level
var point = new esri.geometry.Point(x, y, new esri.SpatialReference({ wkid: 27700 }));
map.centerAt(point);
map.setZoom(zoom);
//Once map is loaded call function (ShowLocation) to show marker symbol at x,y coordinates
//The map must be loaded before symbol can be shown
dojo.connect(map, "onLoad", function() {ShowLocation(x, y); });
//Create basemap layer, this should be a Tiled layer (ArcGISTiledMapServiceLayer) if using FeatureLayers
var baseLayer = new Tiled("https://s-gwb-v02.xxxxx.local/arcgis/rest/services/PROD/Cartographic/MapServer");
map.addLayer(baseLayer);
//Create gazeteer FeatureLayer and define attributes to shown in Popup
//Address marker symbols are not shown in this layer
var addressLayer = new FeatureLayer("http://arcgis.xxxxx.local/arcgis/rest/services/SFRSGazetteer/MapServer/0",
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["POSTAL_ADDRESS","UPRN"],
infoTemplate: addressTemplate
});
map.addLayer(addressLayer);
//Create another gazeteer FeatureLayer to show marker symbols
//var addressLayer2 = new FeatureLayer("http://arcgis.xxxxxx.local/arcgis/rest/services/SFRSGazetteer/MapServer/0")
// map.addLayer(addressLayer2);
var parcelsLayer = new FeatureLayer("http://arcgis.xxxxxx.local/arcgis/rest/services/SFRSGazetteer/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new SimpleRenderer(sfs));
map.addLayers([parcelsLayer]);
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
var snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: parcelsLayer
}];
snapManager.setLayerInfos(layerInfos);
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
measurement.hideTool("location");
measurement.on("measure", function(evt){
measurementFlag = "1";
});
measurement.on("measure-start", function(evt){
measurementFlag = "1";
});
measurement.on("tool-change", function(evt){
measurementFlag = "1";
});
measurement.on("unit-change", function(evt){
measurementFlag = "1";
});
measurement.on("measure-end", function(evt){
measurementFlag = "0";
});
//Query to return mutiple paged results to Popup
map.on("click", function (event) {
var query = new Query();
query.geometry = pointToExtent(map, event.mapPoint, 10);
var deferred = addressLayer.selectFeatures(query);
query.orderByFields = ["POSTAL_ADDRESS ASC"];
//FeatureLayer.SELECTION_NEW);
map.infoWindow.setFeatures([deferred]);
if( measurementFlag == "0" )
{
map.infoWindow.show(event.mapPoint);
}
});
//Extent for query
function pointToExtent (map, point, toleranceInPixel) {
var pixelWidth = map.extent.getWidth() / map.width;
var toleranceInMapCoords = toleranceInPixel * pixelWidth;
return new Extent(point.x - toleranceInMapCoords,
point.y - toleranceInMapCoords,
point.x + toleranceInMapCoords,
point.y + toleranceInMapCoords,
map.spatialReference);
}
});
//Function to display and format query results in Popup content pane
function getTextContent(graphic)
{
var address;
var attributes = graphic.attributes;
document.getElementById("hidUPRN").value= attributes.UPRN;
address = (attributes.POSTAL_ADDRESS);
address += "<br /><br /> <span style='color:blue;'> Select UPRN: </span>";
address += "<a href='javascript:clickclose();' style='color:blue;text-decoration: underline;'>"+(attributes.UPRN)+"</a>";
return address;
}
//Function to display marker symbol at address searched for
function ShowLocation(x, y)
{
var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid:4326}));
var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
markerSymbol.setSize(16);
markerSymbol.setColor(new dojo.Color([255,0,0,0.5]));
var graphic = new esri.Graphic(point, markerSymbol);
map.graphics.add(graphic);
}
function clickclose()
{
var returnValue = [];
returnValue[0] = document.getElementById("hidUPRN").value;
window.frameElement.commonModalDialogClose(1,returnValue);
}
</script>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:PublishingContactPicture msdt:dt="string"></mso:PublishingContactPicture><mso:PublishingRollupImage msdt:dt="string"></mso:PublishingRollupImage><mso:Audience msdt:dt="string"></mso:Audience><mso:PublishingContactName msdt:dt="string"></mso:PublishingContactName><mso:Comments msdt:dt="string"></mso:Comments><mso:PublishingContactEmail msdt:dt="string"></mso:PublishingContactEmail><mso:ContentTypeId msdt:dt="string">0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900F4701CD528482D47B8A53FE6E7A4D72B</mso:ContentTypeId><mso:ContentType msdt:dt="string">Page</mso:ContentType></mso:CustomDocumentProperties></xml><![endif]-->
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
</mso:CustomDocumentProperties>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
</mso:CustomDocumentProperties>
</xml><![endif]-->
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body class="claro">
<input type='hidden' id='hidUPRN'></input>
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="measurementPane" data-dojo-type="dijit/TitlePane" open="false" title="Measurement">
<div id="measurementDiv"></div>
<!-- <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span> -->
</div>
</div>
</div>
</div>
</body>
</html>
Gideon,
I guess I am still confused what is going on.
Are you trying to remove (1 or 3 ).
I have never seen a popup that has multiple pages
Yes, i am trying to remove (1 of 3) and have all the information on one page