app.map.infoWindow.set("popupWindow", false);
function initializeSidebar(map){ var popup = map.infoWindow; //when the selection changes update the side panel to display the popup info for the //currently selected feature. connect.connect(popup, "onSelectionChange", function(){ displayPopupContent(popup.getSelectedFeature()); }); //when the selection is cleared remove the popup content from the side panel. connect.connect(popup, "onClearFeatures", function(){ dom.byId("featureCount").innerHTML = "Click Identify Tool to select feature(s)"; registry.byId("leftPane").set("content", ""); domUtils.hide(dom.byId("pager")); }); //When features are associated with the map's info window update the sidebar with the new content. connect.connect(popup, "onSetFeatures", function(){ displayPopupContent(popup.getSelectedFeature()); dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected"; //enable navigation if more than one feature is selected popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager")); }); } function displayPopupContent(feature){ if(feature){ var content = feature.getContent(); registry.byId("leftPane").set("content", content); } } function selectPrevious(){ app.map.infoWindow.selectPrevious(); } function selectNext(){ app.map.infoWindow.selectNext(); } function clearContent() { registry.byId("leftPane").set("content", ""); domUtils.hide(dom.byId("pager")); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--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>Identify with Popup</title> <link rel="stylesheet" href="https://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } /*---------------------------------------------------------------------------------------------------------*/ /* NewLayer window in the top right corner*/ .divLayerContainerNewLayer { position: absolute; top: 45px; right: 0px; width: 200px; z-index: 1000; } .divLayerHolderNewLayer { width: 190px; height: 400px; background: rgba(0,0,0,0.9); -pie-background: rgba(0,0,0,0.9); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url("styles/PIE.htc"); opacity:.8; } .divLayerContentHolderNewLayer { overflow: auto; padding: 5px; height: 390px; width: 185px; } #leftPane{ background-color:transparent; border:1px solid red; font-family:tahoma; font-size:10px; height: 350px; } </style> <script src="https://js.arcgis.com/3.9/"></script> <script> var map; require([ "esri/map", "esri/InfoTemplate", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "esri/dijit/Popup", "dojo/_base/array", "esri/Color", "dojo/dom-construct", "dojo/domReady!" ], function ( Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup, arrayUtils, Color, domConstruct ) { var identifyTask, identifyParams; /* var popup = new Popup({ fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])) }, domConstruct.create("div")); */ map = new Map("map", { basemap: "gray", center: [-77.4329, 37.5410], zoom: 7 // infoWindow: popup }); map.on("load", mapReady); var parcelsURL = "https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/DGIF_Public/MapServer"; map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, { opacity: .55 })); function mapReady () { map.on("click", executeIdentifyTask); //create identify tasks and setup parameters identifyTask = new IdentifyTask(parcelsURL); identifyParams = new IdentifyParameters(); identifyParams.tolerance = 3; identifyParams.returnGeometry = true; identifyParams.layerIds = [0, 4]; identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL; identifyParams.width = map.width; identifyParams.height = map.height; } function executeIdentifyTask (event) { identifyParams.geometry = event.mapPoint; identifyParams.mapExtent = map.extent; var deferred = identifyTask .execute(identifyParams) .addCallback(function (response) { // response is an array of identify result objects // Let's return an array of features. return arrayUtils.map(response, function (result) { var feature = result.feature; var layerName = result.layerName; feature.attributes.layerName = layerName; if (layerName === 'Birding Trail Sites') { var taxParcelTemplate = new InfoTemplate("", "${LOOP_NAME} <br/> Owner of record: ${SITE_NAME}"); feature.setInfoTemplate(taxParcelTemplate); } else if (layerName === 'Birding Trail Loops') { console.log(feature.attributes.PARCELID); var buildingFootprintTemplate = new InfoTemplate("", "Parcel ID: ${Loop_Name}"); feature.setInfoTemplate(buildingFootprintTemplate); } return feature; }); }); // InfoWindow expects an array of features from each deferred // object that you pass. If the response from the task execution // above is not an array of features, then you need to add a callback // like the one above to post-process the response and return an // array of features. //map.infoWindow.setFeatures([deferred]); //map.infoWindow.show(event.mapPoint); var popup = map.infoWindow; connect.connect(popup, "onSelectionChange", function(){ displayPopupContent(popup.getSelectedFeature()); }); //When features are associated with the map's info window update the sidebar with the new content. connect.connect(popup, "onSetFeatures", function(){ displayPopupContent(popup.getSelectedFeature()); }); } // END OF executeIdentifyTask function displayPopupContent(feature){ if(feature){ var content = feature.getContent(); registry.byId("leftPane").set("content", content); } } }); </script> </head> <body> <div id="map"> <div id="divLayerContainerNewLayer" class="divLayerContainerNewLayer hideContainerHeightNewLayer" > <div id="divLayerHolderNewLayer" class="divLayerHolderNewLayer"> <div id="divLayerContainerHolderNewLayer" style="position: relative"> <div id="divLayerContentHolderNewLayer" class="divLayerContentHolderNewLayer" style="position: absolute; overflow: hidden"> <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div> </div> </div> </div> </div> </div> </body> </html>
var templateBirdingTrailHeads = new InfoTemplate(); templateBirdingTrailHeads.setTitle("Birding Trail Heads"); templateBirdingTrailHeads.setContent("<table><tr><td><b>Loop Name</b></td><td>${LOOP_NAME}</td></tr></table>" + "<table><tr><td><b>Site Name</b></td><td>${SITE_NAME}</td></tr></table> " + "<table><tr><td><b>Pahse</b></td><td>${Phase}</td></tr></table> " ); var flBirdingTrailHeads = new FeatureLayer("https://fwisweb1.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer/0", { mode: FeatureLayer.MODE_ONDEMAND, infoTemplate: templateBirdingTrailHeads, outFields: ['*'] }); app.map.addLayer(flBirdingTrailHeads);
var layer1 = new ArcGISDynamicMapServiceLayer("https://fwisweb1.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer", { id: "layer1" }); app.map.addLayers([layer1]);
layer = new ArcGISDynamicMapServiceLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/BirdingWildlifeTrail/MapServer", {"imageParameters": imageParameters}); map.addLayer(layer);
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.