My problems with stringing together samples

ThomasHoman · ‎01-26-2014

Hello all,

I'm attempting to assemble a page out of the various samples and just not making any forward progress. My experience with javascript is minimal at this point so might I ask for some help please.

At this point I'm attempt to implement:

A basic map with default basemap of streets

A basemap switcher to imagery

A location service

A Home button to get back to starting location.

Problems I'm seeing:

Basemap Switcher and Home buttons don't even display

Locate does nothing in IE8/10 or FF26 - Locate works correctly in AGD 10.2 when I search either by parcel or address: 730 S Tenth St, Globe = 20513115A & 1400 E Ash St, Globe = 20514027F for address/parcel number references

I'm not even going to attempt to tackle printing yet but would like to implement the Print Webmap functionality in the future.

Thanks in advance for any suggestions/pointers in the right direction.

Tom

My Code as it sits in single index.html file on IIS 7 on Win 2008 R2 standard server:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Gila County Internal Utility - Address Lookup</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>       html, body, #mapDiv {         height:100%;         width:100%;         margin:0;         padding:0;       }       body {         background-color:#FFF;         overflow:hidden;         font-family:"Trebuchet MS";       }       #SearchDiv {         display: block;         position: absolute;         z-index: 2;         top: 20px;         left: 75px;       }       #BasemapToggleDiv {         position: absolute;         top: 20px;         right: 20px;         z-index: 50;       }       #HomeButtonDiv {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }      </style>      <script src="http://js.arcgis.com/3.8/"></script>     <script>       var map;       var locatorUrl = "http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddressParcelLocator/GeocodeServer";       require([         "esri/map",          "esri/dijit/Geocoder",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageParameters",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "dojo/domReady!"       ], function(         Map, Geocoder, BasemapToggle, ArcGISDynamicMapServiceLayer, ImageParameters, HomeButton) {         map = new Map("mapDiv",{           basemap: "streets",           center: [-110.976, 33.647], // lon, lat           zoom: 7         });                  var myGeocoders = [{           url: locatorUrl,           name: "LocateByAPNorAddress"         }];         var geocoder = new Geocoder({           map: map,           autoComplete: true,           arcgisGeocoder: false,           geocoders: myGeocoders,           value: "1400 E. Ash St, Globe"         },"SearchDiv");         geocoder.startup();                  var toggle = new BasemapToggle({         map: map,         basemap: "satellite"         }, "BasemapToggleDiv");         toggle.startup();                  var home = new HomeButton({         map: map       }, "HomeButtonDiv");       home.startup();          var imageParameters = new ImageParameters();         imageParameters.format = "jpg";                  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(         // Live service found at:         //http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddLU/MapServer         //         "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {         "opacity" : 0.5,         "imageParameters": imageParameters         });                  map.addLayer(dynamicMapServiceLayer);       });     </script>   </head>   <body>     <div id="SearchDiv"></div>     <div id="BasemapToggleDiv"></div>     <div id="mapDiv" class="map">       <div id="HomeButtonDiv"></div>     </div>      </body> </html>

RobertoPepato · ‎01-26-2014

Hello all,

I'm attempting to assemble a page out of the various samples and just not making any forward progress. My experience with javascript is minimal at this point so might I ask for some help please.

At this point I'm attempt to implement:

A basic map with default basemap of streets

A basemap switcher to imagery

A location service

A Home button to get back to starting location.

Problems I'm seeing:

Basemap Switcher and Home buttons don't even display

Locate does nothing in IE8/10 or FF26 - Locate works correctly in AGD 10.2 when I search either by parcel or address: 730 S Tenth St, Globe = 20513115A & 1400 E Ash St, Globe = 20514027F for address/parcel number references

I'm not even going to attempt to tackle printing yet but would like to implement the Print Webmap functionality in the future.

Thanks in advance for any suggestions/pointers in the right direction.

Tom

My Code as it sits in single index.html file on IIS 7 on Win 2008 R2 standard server:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Gila County Internal Utility - Address Lookup</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>       html, body, #mapDiv {         height:100%;         width:100%;         margin:0;         padding:0;       }       body {         background-color:#FFF;         overflow:hidden;         font-family:"Trebuchet MS";       }       #SearchDiv {         display: block;         position: absolute;         z-index: 2;         top: 20px;         left: 75px;       }       #BasemapToggleDiv {         position: absolute;         top: 20px;         right: 20px;         z-index: 50;       }       #HomeButtonDiv {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }      </style>      <script src="http://js.arcgis.com/3.8/"></script>     <script>       var map;       var locatorUrl = "http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddressParcelLocator/GeocodeServer";       require([         "esri/map",          "esri/dijit/Geocoder",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageParameters",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "dojo/domReady!"       ], function(         Map, Geocoder, BasemapToggle, ArcGISDynamicMapServiceLayer, ImageParameters, HomeButton) {         map = new Map("mapDiv",{           basemap: "streets",           center: [-110.976, 33.647], // lon, lat           zoom: 7         });                  var myGeocoders = [{           url: locatorUrl,           name: "LocateByAPNorAddress"         }];         var geocoder = new Geocoder({           map: map,           autoComplete: true,           arcgisGeocoder: false,           geocoders: myGeocoders,           value: "1400 E. Ash St, Globe"         },"SearchDiv");         geocoder.startup();                  var toggle = new BasemapToggle({         map: map,         basemap: "satellite"         }, "BasemapToggleDiv");         toggle.startup();                  var home = new HomeButton({         map: map       }, "HomeButtonDiv");       home.startup();          var imageParameters = new ImageParameters();         imageParameters.format = "jpg";                  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(         // Live service found at:         //http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddLU/MapServer         //         "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {         "opacity" : 0.5,         "imageParameters": imageParameters         });                  map.addLayer(dynamicMapServiceLayer);       });     </script>   </head>   <body>     <div id="SearchDiv"></div>     <div id="BasemapToggleDiv"></div>     <div id="mapDiv" class="map">       <div id="HomeButtonDiv"></div>     </div>      </body> </html>

The order of the parameters specified on your require function are incorrect. It should be:

require([         "esri/map",          "esri/dijit/Geocoder",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageParameters",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "dojo/domReady!"       ], function(         Map, Geocoder, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, HomeButton) {             // function body here         }

Regarding to geocoding operation, you need to handle find-results event. Take a look at geocode class documentation and sample to see how this works.

https://developers.arcgis.com/javascript/jsapi/geocoder.html#event-find-results

Let me know if it helps.

View solution in original post

RobertoPepato · ‎01-26-2014

Hello all,

I'm attempting to assemble a page out of the various samples and just not making any forward progress. My experience with javascript is minimal at this point so might I ask for some help please.

At this point I'm attempt to implement:

A basic map with default basemap of streets

A basemap switcher to imagery

A location service

A Home button to get back to starting location.

Problems I'm seeing:

Basemap Switcher and Home buttons don't even display

Locate does nothing in IE8/10 or FF26 - Locate works correctly in AGD 10.2 when I search either by parcel or address: 730 S Tenth St, Globe = 20513115A & 1400 E Ash St, Globe = 20514027F for address/parcel number references

I'm not even going to attempt to tackle printing yet but would like to implement the Print Webmap functionality in the future.

Thanks in advance for any suggestions/pointers in the right direction.

Tom

My Code as it sits in single index.html file on IIS 7 on Win 2008 R2 standard server:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Gila County Internal Utility - Address Lookup</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>       html, body, #mapDiv {         height:100%;         width:100%;         margin:0;         padding:0;       }       body {         background-color:#FFF;         overflow:hidden;         font-family:"Trebuchet MS";       }       #SearchDiv {         display: block;         position: absolute;         z-index: 2;         top: 20px;         left: 75px;       }       #BasemapToggleDiv {         position: absolute;         top: 20px;         right: 20px;         z-index: 50;       }       #HomeButtonDiv {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }      </style>      <script src="http://js.arcgis.com/3.8/"></script>     <script>       var map;       var locatorUrl = "http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddressParcelLocator/GeocodeServer";       require([         "esri/map",          "esri/dijit/Geocoder",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageParameters",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "dojo/domReady!"       ], function(         Map, Geocoder, BasemapToggle, ArcGISDynamicMapServiceLayer, ImageParameters, HomeButton) {         map = new Map("mapDiv",{           basemap: "streets",           center: [-110.976, 33.647], // lon, lat           zoom: 7         });                  var myGeocoders = [{           url: locatorUrl,           name: "LocateByAPNorAddress"         }];         var geocoder = new Geocoder({           map: map,           autoComplete: true,           arcgisGeocoder: false,           geocoders: myGeocoders,           value: "1400 E. Ash St, Globe"         },"SearchDiv");         geocoder.startup();                  var toggle = new BasemapToggle({         map: map,         basemap: "satellite"         }, "BasemapToggleDiv");         toggle.startup();                  var home = new HomeButton({         map: map       }, "HomeButtonDiv");       home.startup();          var imageParameters = new ImageParameters();         imageParameters.format = "jpg";                  var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer(         // Live service found at:         //http://gis.gilacountyaz.gov/arcgis/rest/services/ASR/AddLU/MapServer         //         "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {         "opacity" : 0.5,         "imageParameters": imageParameters         });                  map.addLayer(dynamicMapServiceLayer);       });     </script>   </head>   <body>     <div id="SearchDiv"></div>     <div id="BasemapToggleDiv"></div>     <div id="mapDiv" class="map">       <div id="HomeButtonDiv"></div>     </div>      </body> </html>

The order of the parameters specified on your require function are incorrect. It should be:

require([         "esri/map",          "esri/dijit/Geocoder",         "esri/layers/ArcGISDynamicMapServiceLayer",         "esri/layers/ImageParameters",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "dojo/domReady!"       ], function(         Map, Geocoder, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, HomeButton) {             // function body here         }

Regarding to geocoding operation, you need to handle find-results event. Take a look at geocode class documentation and sample to see how this works.

https://developers.arcgis.com/javascript/jsapi/geocoder.html#event-find-results

Let me know if it helps.

ThomasHoman · ‎01-27-2014

Thanks for the response - I'll clean things up this morning and see what happens

Tom