Latest Contributions by LisCollins

Does anyone have an updated step by step guide on how to install GDAL to work with Python? I've searched on Google and GIS stack exchange and all of the tips seem outdated as I have not gotten gdal to work when I try to import it in Python. Any tips from anyone who has successfully installed GDAL recently? Thanks. My computer details: ArcMap 10.3.1 Python 2.7.8 32 bit Windows 7 SP1 64 bit ... View more

Hello, Does anyone have experience using D3 charts with ESRI maps? I'm having issues getting a D3 chart to show up in my infowindow pop up on my web map. What I want to happen: I want my D3 Chart to show up in the custom info window template of my pop up that I created. Error -When I click on a county boundary, the D3 graph refuses to show in the info template div I created for my pop up. The result is just blank. What is working: The sample D3 graph shows in a random class I created for testing on the left side of the map called "chart". Also, the sample D3 data variable shows in the pop up though the d3 graph refuses too. I'm using this tutorial to try to make a simple D3 bar chart: Let’s Make a Bar Chart What I have tried: I tried using Dojo charts but dojo is very complicated to use for me and there aren't too many tutorials explaining how to use the stacked bar chart. ESRI's native charts do no meet my needs either as eventually I want to use a dynamic stacked column chart. ->Seen here: Stacked Bar Chart Right now, I'm just testing with a simple D3 bar chart and can't even get that too work. Code here: Edit fiddle - JSFiddle - Check out the JSFIddle for the whole code though it's not showing in the result section JS part // infotemplate formatting functions need to be in the global scope to work       var map;       var showChart;       var theme = "Wetland";       require([         "esri/map",         "esri/layers/ArcGISDynamicMapServiceLayer",                  "esri/dijit/InfoWindow",         "esri/InfoTemplate",         "esri/layers/FeatureLayer",         "esri/renderers/SimpleRenderer",         "esri/symbols/SimpleFillSymbol",         "esri/symbols/SimpleLineSymbol",         "dojo/dom",         "dojo/number",         "dojo/on",         "dojo/parser",         "esri/Color",                         //charts         //"dojo/charting/plot2d/StackedColumns",         "dojox/charting/Chart",         //"dojox/charting/themes/" + theme,         "dojox/charting/plot2d/Lines",         "dojox/charting/plot2d/Columns",         "dojox/charting/plot2d/StackedColumns",         "dojox/charting/axis2d/Default",         "dojo/dom-class",               "esri/tasks/QueryTask",       "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol",                         "dijit/layout/BorderContainer",         "dijit/layout/ContentPane",         "dojox/layout/ExpandoPane",         "dijit/layout/TabContainer",         "dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",         "dojox/charting/action2d/Highlight",         "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",         "dojo/dom-construct", "dojo/number",         "dojox/charting/themes/" + theme,                 "dojo/domReady!"       ],         function (           Map, ArcGISDynamicMapServiceLayer, InfoWindow, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,           SimpleLineSymbol, dom, number, on, parser, Color,           //dojochart         Chart,         //dojoxTheme,                Lines,         Columns,         StackedColumns,         Default,         domClass,                 //for query         QueryTask, Query, SimpleMarkerSymbol,                   BorderContainer,         ContentPane,         ExpandoPane,         TabContainer,          Chart2D, Pie,         Highlight,         MoveSlice, Tooltip,         domConstruct, number, dojoxTheme                 ) {           parser.parse();           // Use the info window instead of the popup.         var infoWindow = new InfoWindow(null, domConstruct.create("div"));         infoWindow.startup();           //base map, centering, and zooming; add to div           map = new Map("mapDiv", {             basemap: "gray",             center: [-76.796, 38.13],             zoom: 8           });   map.infoWindow.resize(475, 475);          var data = [4, 8, 15, 16, 23, 42];     //the long way var chart = d3.select(".chart"); var bar = chart.selectAll("div"); var barUpdate = bar.data(data); //join data var barEnter = barUpdate.enter().append("div"); barEnter.style("width", function(d) { return d * 10 + "px"; }); barEnter.text(function(d) { return d; });                   //infotemplate           var infoTemplate = new InfoTemplate();           infoTemplate.setTitle("County: ${COUNTY}");           //infoTemplate.setContent("<div id='d3code2' class='d3Pop'> </div>");           infoTemplate.setContent(getTextContent);                    //selects chart container d3.select(".d3Pop")   .selectAll("div")     .data(data)   .enter().append("div")     .style("width", function(d) { return d * 10 + "px"; })     .text(function(d) { return d; });    function getTextContent(graphic) { console.log("in get text content function")         /*        var body = d3.select(".d3Pop");           console.log(body); var div = body.append("div"); console.log(div); div.html("Hello, world!"); */ var chart = d3.select(".d3Pop1"); var bar = chart.selectAll("div"); var barUpdate = bar.data(data); //join data console.log(barUpdate); var barEnter = barUpdate.enter().append("div"); barEnter.style("width", function(d) { return d * 10 + "px"; }); barEnter.text(function(d) { return d; }); console.log(barEnter);    return "<div class='d3Pop1'>" + bar + data + "</div>"; }     //add county layer to map                                          var counties = new FeatureLayer("http://geodata.md.gov/imap/rest/services/Boundaries/MD_PoliticalBoundaries/MapServer/1", {             mode: FeatureLayer.MODE_ONDEMAND,             infoTemplate: infoTemplate,             outFields: [              "COUNTY"             ]           });                 map.addLayer(counties);                   }); HTML Sorry, I'm having a hard time getting my HTML to display. It won't show in the Jfiddle here either: Edit fiddle - JSFiddle This is the rest of my HTML code written out that's not in the script tag within <head> <!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>D3 Chart test</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/layout/resources/ExpandoPane.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }    .chart div, .d3Pop1 div {   font: 10px sans-serif;   background-color: steelblue;   text-align: right;   padding: 3px;   margin: 1px;   color: white; }     </style> <script src="http://d3js.org/d3.v3.min.js"></script>     <script src="http://js.arcgis.com/3.10/"></script> </head>   <body class="soria">     <div data-dojo-type="dijit/layout/BorderContainer"          data-dojo-props="design:'headline', gutters:true"          style="width: 100%; height: 100%; margin: 0;">       <div data-dojo-type="dojox/layout/ExpandoPane"            data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"            style="width:220px;">          <p>        Click a county to view the population change between 2000 and 2007.<br/> <br/>           <b>Change the info template:</b> Template 1 displays the percentage growth (or decline) in population. The values are color-coded green for population increase and red for decline in population. Template 2 creates a new calculated field called diff that displays the population difference. <br/>         </p>         <div id="d3code" class="chart"></div>       </div>       <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">          </div>     </div>   </body> </html> My Background -Novice JavaScript Web Developer -Using ESRI JavaScript 3.10 API and 3.10 CSS -Test web map template code from ESRI samples Can anyone figure out why my D3 charts won't display in the popup infowindow template? Thanks for your help! ... View more

Hi there, The Issue I need help with turning off the pop up functionality temporarily when a user presses the draw button on my web map to draw a point, line, or polygon. The drawing function works fine. It's just that when a user draws and a layer has popups enabled, the popups show as well. My Attempts I tried placing "map.setInfoWindowOnClick(false)" in various places within my drawing code, but it doesn't work properly. If I add "map.setInfoWindowOnClick(false)" near the beginning of function, it seems to turn off popups for the whole map once the map is loaded. If I add "map.setInfoWindowOnClick(false)" near the end of the function, pop ups will display until the user presses the draw function. Then popups will not display again even after the user finishes drawing. Background info: Level: newbie JS developer. Using ESRI JavaScript API - ESRI's Public information web map template: Esri/public-information-map-template-js · GitHub This code was added to the main.js file in the _init: function (). Any ideas on how I can get pop ups to turn off only when the user is drawing? Thanks! My Code for drawing and my attempt to turn off pop ups in main.js file: //for Drawing             if (this.config.enableDrawarea) { var tb;     // markerSymbol is used for geo         var markerSymbol = new SimpleMarkerSymbol();         markerSymbol.setColor(new Color([255,0,0]));         markerSymbol.setStyle("STYLE_CIRCLE");         // lineSymbol used for freehand polyline, polyline and line.         var lineSymbol = new CartographicLineSymbol(           CartographicLineSymbol.STYLE_SOLID,           new Color([255,0,0]), 10,           CartographicLineSymbol.CAP_ROUND,           CartographicLineSymbol.JOIN_MITER, 5         );         // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol         var fillSymbol = new SimpleFillSymbol();             fillSymbol.setColor(new Color ([255,0,0,0.3]));             fillSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1));             //activate when click on a draw button button       var initDrawbar = query("div#info div#DrawButtons").on('click', lang.hitch (this, function (evt){            var map = this.map;                              //creates new drawing tool and showtool tips options enabled           tb = new Draw(this.map, { showTooltips: true });                     //when drawing is complete add graphic to map?           tb.on("draw-end", addGraphic);             if ( evt.target.id === "DrawButtons" ) {               return;             };             console.log("Tool Picked");             var tool = evt.target.id.toLowerCase();             console.log(tool);             map.disableMapNavigation();             tb.activate(tool);         //add graphic to map     function addGraphic (evt){            var map = this.map;              //map.setInfoWindowOnClick(false); //this doesn't work properly here               //deactivate the toolbar and clear existing graphics           tb.deactivate();           map.enableMapNavigation();           // figure out which symbol to use           var symbol;           console.log("Value of evt");           console.log(evt);           console.log("Value of symbol variable:");           console.log(symbol);           console.log("The symbol that was picked is: ");           if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {             symbol = markerSymbol;           } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {             symbol = lineSymbol;           }           else {             symbol = fillSymbol;           }           console.log(symbol);                              console.log("Add graphic now");           map.graphics.add(new Graphic(evt.geometry, symbol)); //map.setInfoWindowOnClick(false); //this doesn't work properly here either         }             }));               }; ... View more

Hi there, I need help with adding multiple custom geocoders to my web map that's based on the Public Information Template. Problem: I can get one of my custom geocoders to display on the map. But getting both of them to display as an option for users to select in a drop down has been a struggle. I have tried creating a variable called "myGeocoders" that lists both geocoders and putting it in the options object below, but the map still only displayed one geocoder.  In the code below, I tried listing both geocoders separately along with the ESRI geocoder to see if it will show, and it still only displayed one geocoder. Same if I take out the ESRI geocoder. Code below: _createGeocoderOptions: function() {             var hasEsri = false, esriIdx, geocoders = lang.clone(this.config.helperServices.geocode);             // default options                               var myGeocoders = [{           url: "http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_CompositeLocator/GeocodeServer",           name: "MD_CompositeLocator",           "singleLineFieldName": "SingleLine"           },{           url: "http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_ParcelAccountNumberLocator/GeocodeServer",           name: "MD_ParcelAccountNumberLocator",           "singleLineFieldName": "Single Line Input"         }];                                           var options = {                 map: this.map,                 autoNavigate: true,                 autoComplete: true,                 arcgisGeocoder: false,                 geocoders: null,             };             //only use geocoders with a url defined             geocoders = array.filter(geocoders, function (geocoder) {                 if (geocoder.url) {                     return true;                 }                 else{                     return false;                 }             });             // at least 1 geocoder defined             if(geocoders.length){                 // each geocoder             array.forEach(geocoders, lang.hitch(this, function(geocoder) {                    // if esri geocoder                     if (geocoder.url && geocoder.url.indexOf(".arcgis.com/arcgis/rest/services/World/GeocodeServer") > -1) {                         hasEsri = true;                         geocoder.name = "Esri World Geocoder";                         geocoder.outFields = "Match_addr, stAddr, City";                         geocoder.singleLineFieldName = "Single Line";                         geocoder.esri = true;                         geocoder.placefinding = true;                         geocoder.placeholder = this.config.i18n.general.find;                     }                                                    //if not esri geocoder                             if (geocoder.url && geocoder.url.indexOf("http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_CompositeLocator/GeocodeServer") > -2) {                         hasEsri = false;                         geocoder.name = "MD_CompositeLocator";                         geocoder.outFields = "Street, City, State, ZIP";                         geocoder.singleLineFieldName = "SingleLine";                         geocoder.esri = false;                         geocoder.placefinding = true;                         geocoder.placeholder = "Find a Place";                                                   }                                                       //if not esri geocoder                             if (geocoder.url && geocoder.url.indexOf("http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_ParcelAccountNumberLocator/GeocodeServer") > -1) {                         hasEsri = false;                         geocoder.name = "MD_ParcelAccountNumberLocator";                         geocoder.outFields = "*";                         geocoder.singleLineFieldName = "Single Line Input";                         geocoder.esri = false;                         geocoder.placefinding = true;                         geocoder.placeholder = "Find a Parcel Point Account ID";                                                   }                                                                                           })) ;                                                                //only use geocoders with a singleLineFieldName that allow placefinding unless its custom                 geocoders = array.filter(geocoders, function (geocoder) {                     if (geocoder.name && geocoder.name === "Custom") {                         return (esriLang.isDefined(geocoder.singleLineFieldName));                     } else {                         return (esriLang.isDefined(geocoder.singleLineFieldName) && esriLang.isDefined(geocoder.placefinding) && geocoder.placefinding);                     }                 });                 // if we have an esri geocoder                 if (hasEsri) {                     for (var i = 0; i < geocoders.length; i++) {                         if (esriLang.isDefined(geocoders.esri) && geocoders.esri === true) {                             esriIdx = i;                             break;                         }                     }                 }                 // set autoComplete                 options.autoComplete = true;                 // set esri options                 if (hasEsri) {                     options.minCharacters = 0;                     options.maxLocations = 5;                     options.searchDelay = 100;                 }                 //If the World geocoder is primary enable auto complete                 if (hasEsri && esriIdx === 0) {                     options.arcgisGeocoder = geocoders.splice(0, 1)[0]; //geocoders[0];                     if (geocoders.length > 0) {                         options.geocoders = geocoders;                     }                 } else {                     options.arcgisGeocoder = false;                     options.geocoders = geocoders;                 }             }             return options;         },         // create geocoder widgets         _createGeocoders: function () {                //add geocoder result layer             var resultsLayer = new esri.layers.GraphicsLayer({ id: "resultsLayer" });   //geocoder symbol code             this.map.addLayer(resultsLayer);                       // get options             var createdOptions = this._createGeocoderOptions();             // desktop geocoder options             var desktopOptions = lang.mixin({}, createdOptions, {                 theme: this.css.desktopGeocoderTheme             });             // mobile geocoder options             var mobileOptions = lang.mixin({}, createdOptions, {                 theme: this.css.mobileGeocoderTheme             });             // desktop size geocoder             this._geocoder = new Geocoder(desktopOptions, dom.byId("geocoderSearch"));             ;                this._geocoder.startup();                                                //add feature to map                                          //geocoder symbol             function addFeatureToMap(geometry) {                 resultsLayer.clear();                 var pictureMarkerSymbol = new PictureMarkerSymbol({ "angle": 0, "xoffset": 2, "yoffset": 8, "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png", "contentType": "image/png", "width": 24, "height": 24 });                 resultsLayer.add(new Graphic(geometry, pictureMarkerSymbol));             }                                              //zoom to level 19 after press geocoder - MIO                on(this._geocoder, 'select', lang.hitch(this, function (response) {            console.log("set zoom function");              console.log(this.map);                     this.map.setZoom(19);                                           }));                            // geocoder results             on(this._geocoder, 'find-results', lang.hitch(this, function (response) {                 if (!response.results || !response.results.results || !response.results.results.length) {                     alert(this.config.i18n.general.noSearchResult);                 } else {                                                //geocoder symbol results                     addFeatureToMap(response.results.results[0].feature.geometry);                          if (history.pushState) {                                    //browser supported.                                         //refresh the URL with the geocoder result                                           console.log("Push state is supported. Geocoder result: ");                               console.log(this._geocoder.value);                               window.history.pushState(null,null,"?address=" + this._geocoder.value);                                    }                                                                             }             }));                                                     // mobile sized geocoder             this._mobileGeocoder = new Geocoder(mobileOptions, dom.byId("geocoderMobile"));             this._mobileGeocoder.startup();             // geocoder results             on(this._mobileGeocoder, 'find-results', lang.hitch(this, function (response) {                 if (!response.results || !response.results.results || !response.results.results.length) {                     alert(this.config.i18n.general.noSearchResult);                 } else {    //geocoder symbol results and all below until keep geocoder values in sync                     addFeatureToMap(response.results.results[0].feature.geometry);                                    //refresh the URL with the geocoder result                               if (history.pushState) {                                    //browser supported.                                         //refresh the URL with the geocoder result                                           console.log("Push state is supported. Geocoder result: ");                               console.log(this._geocoder.value);                               window.history.pushState(null,null,"?address=" + this._geocoder.value);                                    }                          }                 this._hideMobileGeocoder();             }));                                      on(this._geocoder, 'clear', lang.hitch(this, function () {                 resultsLayer.clear();             }));                                               //rest of geocoder symbol result             on(this._mobileGeocoder, 'clear', lang.hitch(this, function () {                 resultsLayer.clear();             }));                                                //rest of geocoder symbol result                            // keep geocoder values in sync             this._geocoder.watch("value", lang.hitch(this, function () {                 var value = arguments[2];                 this._mobileGeocoder.set("value", value);             }));             // keep geocoder values in sync             this._mobileGeocoder.watch("value", lang.hitch(this, function () {                 var value = arguments[2];                 this._geocoder.set("value", value);             }));             // geocoder nodes             this._mobileGeocoderIconNode = dom.byId("mobileGeocoderIcon");             this._mobileSearchNode = dom.byId("mobileSearch");             this._mobileGeocoderIconContainerNode = dom.byId("mobileGeocoderIconContainer");             // mobile geocoder toggle             if (this._mobileGeocoderIconNode) {                 on(this._mobileGeocoderIconNode, "click", lang.hitch(this, function () {                     if (domStyle.get(this._mobileSearchNode, "display") === "none") {                         this._showMobileGeocoder();                     } else {                         this._hideMobileGeocoder();                     }                 }));             }             var closeMobileGeocoderNode = dom.byId("btnCloseGeocoder");             if(closeMobileGeocoderNode){                 // cancel mobile geocoder                 on(closeMobileGeocoderNode, "click", lang.hitch(this, function () {                     this._hideMobileGeocoder();                 }));             }         }, Background Info: Level: newbie JS developer. Using ESRI JavaScript API - ESRI's Public information web map template: Esri/public-information-map-template-js · GitHub This code was added to the main.js file in the _init: function (). Any tips? Thanks.                 ... View more