Latest Contributions by NhuMai

This question is specifically for using map services containing one layer in NLiu's TOC. In the following code (from the widget), I am understanding that there is the possibility of eliminating the first row corresponding to the layer entry's title : _createRootLayerNode: function(rootLayer){ domClass.add(this.rowNode, 'agsjsTOCRootLayer'); domClass.add(this.labelNode, 'agsjsTOCRootLayerLabel'); var title = this.rootLayerTOC.config.title; // if it is '' then it means we do not title to be shown, i.e. not indent. if (title === '') { // we do not want to show the first level, typically in the case of a single map service esri.hide(this.rowNode); rootLayer.show(); this.rootLayerTOC._currentIndent--; } else if (title === undefined){ // no title is set, try to find default if (rootLayer.name){ // this is a featureLayer title = rootLayer.name; } else { var start = rootLayer.url.toLowerCase().indexOf('/rest/services/'); var end = rootLayer.url.toLowerCase().indexOf('/mapserver', start); title = rootLayer.url.substring(start + 15, end); } } ... } However, when setting the title: as '', the service just doesn't appear in the TOC.  Anyone gotten this work? Am I misunderstanding what this part of the code is supposed to do? function initLegend () { toc = new TOC({ map: window.myMap, layerInfos: [ { layer: OneLayerService, title: '', collapsed: true //layerList: layerInfo } ] }, 'legendDiv'); ... View more

I'm having cursor position issues now that I've added a navigation tool bar to my map. This affects not only the window drawn for map zoom, but identifed objects as well. I've seen this post about popups being in the wrong position, and have attempted to parse before map initialization, but the problem persists. My cursor still traps the wrong position (low and left). My map and tool bar are created like this (haven't included all modules, but this targets where the issue is) : Map.js: var baseMapLayerWorld; var myLayer; require([ "dojo/parser", "dojo/on", "esri/map", "esri/toolbars/navigation", "esri/dijit/Search", "esri/dijit/Scalebar", "dijit/Toolbar", "dijit/form/Button", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/geometry/Extent", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/layout/ExpandoPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dojo/domReady!" ], function (parser, on, Map, Navigation, Search, Scalebar, Toolbar, Button, ArcGISTiledMapServiceLayer, DynamicMapServiceLayer, FeatureLayer, InfoTemplate, Extent) { parser.parse(); baseMapLayerWorld = new DynamicMapServiceLayer("http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"); myLayer = new DynamicMapServiceLayer("http://ourserver/arcgis/rest/services/COMMUNE/Public/MapServer"); var bounds = new Extent({ "xmin":-17012392, "ymin":-2139604, "xmax":-16498016, "ymax":-1750718, "spatialReference":{"wkid":102100} }); window.myMap = new Map("map", { extent: bounds, logo: false }); window.myMap.addLayers([baseMapLayerWorld,myLayer]); var scalebar = new Scalebar({ map: window.myMap, scalebarUnit: "metric", attachTo: "top-right", scalebarStyle: "line" }); dojo.connect(window.myMap, "onExtentChange", showExtent); var navToolbar; navToolbar = new Navigation(window.myMap); var zoomInButton = new Button({ label: "test button", showLabel: false, iconClass: "zoominIcon", onClick: function () { //alert("test button clicked") navToolbar.activate(Navigation.ZOOM_IN); } }, "zoomin"); zoomInButton.startup(); var zoomOutButton = new Button({ label: "test button", showLabel: false, iconClass: "zoomoutIcon", onClick: function () { //alert("test button clicked") navToolbar.activate(Navigation.ZOOM_OUT); } }, "zoomout"); zoomOutButton.startup(); var zoomFullExtButton = new Button({ label: "test button", showLabel: false, iconClass: "zoomfullextIcon", onClick: function () { //alert("test button clicked") navToolbar.zoomToFullExtent(); } }, "zoomfullext"); zoomFullExtButton.startup(); var zoomPreviousButton = new Button({ label: "test button", showLabel: false, iconClass: "zoomprevIcon", onClick: function () { //alert("test button clicked") navToolbar.zoomToPrevExtent(); } }, "zoomprev"); zoomPreviousButton.startup(); var zoomNextButton = new Button({ label: "test button", showLabel: false, iconClass: "zoomnextIcon", onClick: function () { //alert("test button clicked") navToolbar.zoomToNextExtent(); } }, "zoomnext"); zoomNextButton.startup(); var panButton = new Button({ label: "test button", showLabel: false, iconClass: "panIcon", onClick: function () { //alert("test button clicked") navToolbar.activate(Navigation.PAN); } }, "pan"); panButton.startup(); var deactivateButton = new Button({ label: "test button", showLabel: false, iconClass: "deactivateIcon", onClick: function () { //alert("test button clicked") navToolbar.deactivate(); } }, "deactivate"); deactivateButton.startup(); on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); window.myMap.on("load", function(){ require([ "js/Search", "js/Legend", "js/Print", "js/Identify", ], function() {}); }) function showExtent(extent) { var s = ""; s = "XMin: "+ extent.xmin.toFixed(2) + " " +"YMin: " + extent.ymin.toFixed(2) + " " +"XMax: " + extent.xmax.toFixed(2) + " " +"YMax: " + extent.ymax.toFixed(2); //dojo.byId("info").innerHTML = s; } function extentHistoryChangeHandler () { // registry.byId("zoomprev").disabled = navToolbar.isFirstExtent(); // registry.byId("zoomnext").disabled = navToolbar.isLastExtent(); zoomPreviousButton.disabled = navToolbar.isFirstExtent(); zoomNextButton.disabled = navToolbar.isLastExtent(); } }); Map and toolbar were added to html page like this: <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow: hidden;width: 100%; height: 100%; margin: 0;"> <div id="navToolbar" data-dojo-type="dijit/Toolbar" style="background-color:#ffffff;"> <button type="button" id="zoomin"></button> <button type="button" id="zoomout"></button> <button type="button" id="zoomfullext"></button> <button type="button" id="zoomprev"></button> <button type="button" id="zoomnext"></button> <button type="button" id="pan"></button> <button type="button" id="deactivate"></button> </div> Dojo config like this directly on html page: <script> var dojoConfig = { parseOnLoad: false, async: true, packages: [ { name: "agsjs", "location": '/OurApp/agsjs' // for xdomain load }, { name: "js", "location": '/OurApp/js' }] }; </script> ... View more

I've tried to implement a print widget using the print task very closely following this tutorial. However, it is very slow (~60 seconds to export an A3 pdf with default dpi) and I notice the following severe ArcGIS for Server logs: Has anyone seen this type of vague log? The python script used: import arcpy import os import uuid # The template location in the registered folder (as UNC path) templatePath = '//ourserver/ourtemplatepath # Input WebMap json Web_Map_as_JSON = arcpy.GetParameterAsText(0) # Format for output Format = arcpy.GetParameterAsText(1) if Format == '#' or not Format: Format = "PDF" # Input Layout template Layout_Template = arcpy.GetParameterAsText(2) if Layout_Template == '#' or not Layout_Template: Layout_Template = "A3 Paysage" # Extra parameter - georef_info Georef_info = arcpy.GetParameterAsText(3) if Georef_info == '#' or not Georef_info: Georef_info = "False" # Convert Georef_info string to boolean if Georef_info.lower() == 'false': Georef_info_bol = False elif Georef_info.lower() == 'true': Georef_info_bol = True # Get the requested map document templateMxd = os.path.join(templatePath, Layout_Template + '.mxd') # Convert the WebMap to a map document result = arcpy.mapping.ConvertWebMapToMapDocument(Web_Map_as_JSON, templateMxd) mxd = result.mapDocument # Reference the data frame that contains the webmap # Note: ConvertWebMapToMapDocument renames the active dataframe in the template_mxd to "Webmap" df = arcpy.mapping.ListDataFrames(mxd, 'Webmap')[0] # ConvertWebMapToMapDocument renames the active dataframe in the template_mxd to "Webmap". # Lets rename it to something more meaningful. df.name = Layout_Template # Use the uuid module to generate a GUID as part of the output name # This will ensure a unique output name output = 'WebMap_{}.{}'.format(str(uuid.uuid1()), Format) Output_File = os.path.join(arcpy.env.scratchFolder, output) # Export the WebMap if Format.lower() == 'pdf': arcpy.mapping.ExportToPDF(mxd, Output_File, georef_info=Georef_info_bol) elif Format.lower() == 'png': arcpy.mapping.ExportToPNG(mxd, Output_File) # Set the output parameter to be the output file of the server job arcpy.SetParameterAsText(4, Output_File) # Clean up - delete the map document reference filePath = mxd.filePath del mxd, result os.remove(filePath) The javascript used to export the maps: require([ "esri/layers/FeatureLayer", "esri/dijit/Print", "esri/tasks/PrintTemplate", "esri/tasks/PrintTask", "esri/tasks/PrintParameters", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/geometry/Point", "esri/SpatialReference", "esri/request", "esri/config", "dijit/registry", "dijit/form/ComboBox", "dijit/form/Button", "dijit/form/CheckBox", "dojox/form/BusyButton", "dojo/store/Memory", "dojo/_base/array", "dojo/dom", "dojo/on" ], function( FeatureLayer, Print, PrintTemplate, PrintTask, PrintParameters, GeometryService, ProjectParameters, Point, SpatialReference, esriRequest, esriConfig, registry, ComboBox, Button, CheckBox, BusyButton, Memory, arrayUtils, dom, on ) { //var printUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"; var printUrl = "http://ouragsserver/arcgis/rest/services/SPE_Tools/SPE_Print_Tool_Adv/GPServer/Script"; esriConfig.defaults.io.proxyUrl = "http://ourwebserver/Java/proxy.jsp"; esri.config.defaults.io.timeout = 300000; //60 seconds = 60000 setScalesCombo(); var scaleCheckBox = new CheckBox({ checked: false, onChange: function (val) { //dom.byId('one').innerHTML = val ? 'checked' : 'unchecked'; if (scaleCheckBox.checked) { //params.template.preserveScale = true; dijit.byId("scale_select").attr("disabled",false); console.log("checked"); } else { //params.template.preserveScale = false; dijit.byId("scale_select").attr("disabled",true); console.log("unchecked"); } } }, 'scale_check'); var printButton = new BusyButton({ busyLabel: "Impression...", label: "Imprimer", timeout: 50000, onClick: printMap }, "print_button_bis").startup(); function printMap(){ var printMap = new esri.tasks.PrintTask(printUrl); var params = new esri.tasks.PrintParameters(); var template = new esri.tasks.PrintTemplate(); document.getElementById("print_status").innerHTML = "Impression en cours..."; document.getElementById("output_url").innerHTML = ""; var layout = dojo.byId("printLayoutId"); var index = layout.selectedIndex; var selectedValue_layout = layout.options[index].value; var format = dojo.byId("format"); var index = format.selectedIndex; var selectedValue_format = format.options[index].value; var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2); var long = window.myMap.extent.getCenter().getLongitude().toFixed(2); var latLong = "Latitude : " + lat + " - Longitude : " + long; var X; var Y; var rgpfSixSudSR = new SpatialReference ({ wkid : 3297 }); var wgsGCSEightFourSR = new SpatialReference ({ wkid : 4326 }); var geometryService = new GeometryService("http://ourserver/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var inputPoint = new Point(lat, long, wgsGCSEightFourSR); var prjParams = new ProjectParameters (); prjParams.geometries = [inputPoint]; prjParams.outSR = rgpfSixSudSR; geometryService.project(prjParams, function (outputpoint) { console.log('Conversion completed'); X = outputpoint[0].x; Y = outputpoint[0].y; //console.log('X : ' + X ' and Y : ' + Y); }); var center = "X : " + X + " - Y : " + Y; //params.template.layoutOptions.customTextElements.centerLatLong = latLong; //params.template.layoutOptions.customTextElements.centerXY = center; console.log(latLong); console.log(center); params.map = window.myMap; if (scaleCheckBox.checked) { params.template = { layout: selectedValue_layout, format: selectedValue_format, preserveScale: true, layoutOptions: { customTextElements : [ { centerLatLong: latLong } // { // centerXY: center // } ] // legendLayer: [legendLayer] } } console.log("checked"); } else { params.template = { layout: selectedValue_layout, format: selectedValue_format, preserveScale: false, layoutOptions: { customTextElements : [ { centerLatLong: latLong } // { // centerXY: center // } ] // legendLayer: [legendLayer] } } console.log("unchecked"); } //window.myMap.on('extent-change', showExtent()); printMap.execute(params, printResult); // dojo.connect(printMap,'onComplete',function(result){ // window.open(result.url); // }) function printResult(result){ console.log(result.url); document.getElementById("print_status").innerHTML = ""; document.getElementById("output_url").href = result.url; document.getElementById("output_url").innerHTML = "Impression"; var printWindow = window.open(result.url); }; }; function setScalesCombo() { var scaleStore = new Memory({ data: [ {name:"100", id:"100"}, {name:"200", id:"200"}, {name:"500", id:"500"}, {name:"1000", id:"1000"}, ] }); var scaleSelect = new ComboBox({ id: "scale_select", style: {width: "150px"}, name: "scale_select", placeHolder: "Choisir une échelle", store: scaleStore, disabled: true, onChange: function(value){ //document.getElementById("value").innerHTML = value; mapScale = value; window.myMap.setScale(mapScale); } }, "scale_select"); scaleSelect.startup(); } }); Added to html body like this: <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Impressions'"> <select name="printLayout" id="printLayoutId"> <option value="A3_paysage">A3 Paysage</option> <option value="A3_portrait">A3 Portrait</option> <option value="A4_paysage">A4 Paysage</option> <option value="A4_portrait">A4 Portrait</option> <!-- <option value="Letter ANSI A Landscape" selected>Letter ANSI A Landscape</option> <option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option> <option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option> <option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option> --> </select> <br> <select id="format"> <OPTION value="PDF">PDF</OPTION> <OPTION value="PNG">PNG</OPTION> </select> <br> <br> <!-- <input type="checkbox" id="check_scales" checked data-dojo-type="dijit/form/CheckBox" data-dojo-props="checked: true"> --> <div id="scale_check"></div> <label for="scale_check">Imprimer à l'échelle</label> <div id="scale_select" class="comboClass"></div> <button id="print_button_bis" type="button"></button> <p id="print_status"></p> <a id="output_url" href="#"></a> <!--<input type="button" id="print" value = "Print" onclick="printMap();"/>--> </div> ... View more

I am trying to add an combobox to the title of an infoWindow. The combobox is intended to be populated with the list of identified results. I'm trying two different ways: 1. Adding the combobox declaratively using html: var template = new esri.InfoTemplate(layerName + "<br/><select id="id_select" data-dojo-type="dijit/form/Select"</select>,"<br/> FID : ${FID}"); The combobox is there, but I don't know how to access the combobox to add the options dynamically (via addOptions). I would normally do dijit.byId("id_select"), but considering it doesn't exist until it's created...I'm not sure how to go about this way. 2. Programmatically With the code below, the title displays information regarding the dijit/form/select widget (It displays: [object HTML TableElement]), but not the widget itself. I tried using domConstruct like this example. var identifyTask, identifyParams, idPoint; var identifyResults; require([ "esri/dijit/Popup", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dijit/form/Select", "dojo/dom-construct", "dojo/promise/all", "dojo/domReady!" ], function ( Popup, IdentifyTask, IdentifyParameters, Select, domConstruct, All ) { var identifySelect; //dojo.connect(window.myMap, "onLoad", mapReady); mapReady(window.myMap); function mapReady(map) { dojo.connect(window.myMap, "onClick", runIdentifies); } function runIdentifies(evt) { identifyResults = []; idPoint = evt.mapPoint; var layers = dojo.map(window.myMap.layerIds, function (layerId) { return window.myMap.getLayer(layerId); }); layers = dojo.filter(layers, function (layer) { if (layer.visibleLayers[0] !== -1) { return layer.getImageUrl && layer.visible } }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers var tasks = dojo.map(layers, function (layer) { return new IdentifyTask(layer.url); }); //map each visible dynamic layer to a new identify task, using the layer url var defTasks = dojo.map(tasks, function (task) { return new dojo.Deferred(); }); //map each identify task to a new dojo.Deferred var params = createIdentifyParams(layers, evt); var promises = []; for (i = 0; i < tasks.length; i++) { promises.push(tasks.execute(params)); //Execute each task } var allPromises = new All(promises); allPromises.then(function (r) { showIdentifyResults(r, tasks); }); } function showIdentifyResults(r, tasks) { var results = []; var taskUrls = []; var resultNames = []; r = dojo.filter(r, function (result) { return r[0]; }); for (i = 0; i < r.length; i++) { results = results.concat(r); for (j = 0; j < r.length; j++) { taskUrls = taskUrls.concat(tasks.url); } } results = dojo.map(results, function (result, index) { var feature = result.feature; var layerName = result.layerName; var serviceUrl = taskUrls[index]; resultNames.push({ value: result.layerName, label: result.layerName }); feature.attributes.layerName = result.layerName; var identifiedList = getIdentifiedList(resultNames); console.log(identifiedList); var template = new esri.InfoTemplate(); template.setTitle(identifiedList); feature.setInfoTemplate(template); var resultGeometry = feature.geometry; var resultType = resultGeometry.type; return feature; }); if (results.length === 0) { window.myMap.infoWindow.clearFeatures(); } else { window.myMap.infoWindow.setFeatures(results); } window.myMap.infoWindow.show(idPoint); identifySelect.on('change', function(evt) { var identIndex = identifySelect.get("value"); console.log(identIndex); window.myMap.infoWindow.select(identIndex); }); return results; } function getIdentifiedList(options) { identifySelect = new Select({ name: "identifySelect", id: "id_select", options: options }, domConstruct.create("select")); return identifySelect.domNode; } function createIdentifyParams(layers, evt) { var identifyParamsList = []; identifyParamsList.length = 0; dojo.forEach(layers, function (layer) { var idParams = new esri.tasks.IdentifyParameters(); idParams.width = window.myMap.width; idParams.height = window.myMap.height; idParams.geometry = evt.mapPoint; idParams.mapExtent = window.myMap.extent; idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE; var visLayers = layer.visibleLayers; if (visLayers !== -1) { var subLayers = []; for (var i = 0; i < layer.layerInfos.length; i++) { if (layer.layerInfos.subLayerIds == null) subLayers.push(layer.layerInfos.id); } idParams.layerIds = subLayers; } else { idParams.layerIds = []; } idParams.tolerance = 5; idParams.returnGeometry = true; identifyParamsList.push(idParams); }); return identifyParamsList; } }); ... View more

This question is about NLiu's TOC widget. If i've understood correctly, the layerInfos for the TOC takes dynamic map services and feature layers. Our app includes services from various cities, with a service for each city's particular data category (e.g. City1_Water, City1_Electric, City1_Gas, City2_Water, City2_Electric, City2_Gas). I've integrated each as a dynamic map service. So I currently added them to the TOC with success in this way. However, I'm looking to group things one level further, by City. Is there any way to do this out of the box? If not, any suggestions on tweaking the widget to do so? toc = new TOC({ map: window.myMap, layerInfos: [  { layer: City1_Water, title: "City1_Water", collapsed: true }, { layer: City1_Electric, title: "City1_Electric", collapsed: true }, { layer: City1_Gas, title: "City1_Gas", collapsed: true }, { layer: City2_Water, title: "City2_Water", collapsed: true }, { layer: City2_Electric, title: "City2_Electric", collapsed: true }, { layer: City2_Gas, title: "City2_Gas", collapsed: true } ] }, 'legendDiv'); ... View more