what order do you add a layer, geocoder widget, and information pop-up widget?

MichaelMachado · ‎08-13-2013

I'm still learning javascript and have gone through some tutorials and read a lot. I've been able to get a simple map and a simple geocoder but cannot seem to get them to work together. I'm not sure what order they go or if they should all be in one. I used a Geocoder Service from ArcGIS Server and a simple parcel layer from a MapServer service. Any help would be much appreciated.

JohnGravois · ‎08-16-2013

feel free to log a support call. im on the phones right now. 🙂

View solution in original post

KellyHutchins · ‎08-13-2013

Ruth,

Can you post the code you are trying to run? Are you able to successfully run the 'Geocoder' sample in the help that combines a map and geocoder widget?

http://developers.arcgis.com/en/javascript/samples/locator_simple/

MichaelMachado · ‎08-13-2013

Thank you. Yes the Geocoder sample works and does center on my city. Due to our security I can only show the code without the actual services. As you can see I tried a couple of different code snippets and probably got them all wrong.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Geocoder Widget</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.dijit.Geocoder");
      var locatorUrl = ("this is where I put the Geocoder");
      function init() {



        var map = new esri.Map("map",{
          basemap: "topo",
          center: [-120.45,37.28], //long, lat
          zoom: 13
        });

        var myGeocoders = [{
             url: locatorUrl,
             name: "LocateLook_Up_Parcel_by_APN"
        }];

        var geocoder = new esri.dijit.Geocoder({
          map: map,
          autocomplete: true,
          arcgisGeocoder: false,
          geocoders: myGeocoders,
          value: '066-200-021'

        },"search");

        geocoder.startup();
      }


    dojo.require("esri.map");

      var layer, map, visible = [];

      function init() {
        map = new esri.Map("map");

        //Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [1];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;

        layer = new esri.layers.ArcGISDynamicMapServiceLayer("(this is where I put the published mxd as the MapServer"), {"imageParameters":imageParameters});
        map.addLayer(layer);
      }

      function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;
        //in this application layer 0 is always on.
        visible = [0];
        for (var i=0, il=inputs.length; i<il; i++) {
          if (inputs.checked) {
            visible.push(inputs.id);
          }
        }
         //if there aren't any layers visible set the array value to = -1
        if(visible.length === 0){
          visible.push(-1);
        }

        layer.setVisibleLayers(visible);
      }

      dojo.ready(init);
    </script>
</head>
<body>
    <div id="search"></div>
    <div id="map"></div>
</body>
</html>

JohnGravois · ‎08-13-2013

hi RuthAnne,

i see a couple different problems with the code you posted...

1. you aren't allowed to define more than one function with the same name. instead of having two "init" functions, it would be a better idea to just have one and place all the code that needs to fire when the application loads in one place.

2. you should be placing all the dojo.require() statements we use to load modules at the very top of your script block. right now you make a second unnecessary call to dojo.require("map"), in the middle of your javascript. this can safely be removed.

3. in your second init function, you are instantiating a second map. this should be removed as well.

4. lastly, your updateLayerVisibility() function isn't currently called by anything. thats not necessarily going to cause any errors, its just something you should know.

MichaelMachado · ‎08-14-2013

Good morning,

Thanks, so here is what I changed per your suggestions:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Geocoder Widget</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.dijit.Geocoder");
      var locatorUrl = ("this is where I put the Geocoder");
      function init() {

        var map = new esri.Map("map",{
          basemap: "topo",
          center: [-120.45,37.28], //long, lat
          zoom: 13
        });

        var myGeocoders = [{
             url: locatorUrl,
             name: "LocateLook_Up_Parcel_by_APN"
        }];

        var geocoder = new esri.dijit.Geocoder({
          map: map,
          autocomplete: true,
          arcgisGeocoder: false,
          geocoders: myGeocoders,
          value: '066-200-021' //How do I make this a box for user to type in parcel number?

        },"search");

        geocoder.startup();
      }

        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [1];

        layer = new esri.layers.ArcGISDynamicMapServiceLayer("(this is where I put the published mxd as the MapServer)"),
{"imageParameters":imageParameters});
        map.addLayer(layer);
      }

      dojo.ready(init);
    </script>
</head>
<body>
    <div id="search"></div>
    <div id="map"></div>
</body>
</html>

Hopefully I'm getting closer. Also, I added a note next to the parcel number about how I would make this a box for the user to type in the parcel number to search and select. Thanks for your help.

JohnGravois · ‎08-14-2013

almost perfect, in the developer tools in chrome, i saw the error:

"Uncaught SyntaxError: Unexpected token } line 67"

because I had the app open in Notepad++, i was able to highlight the curly brace that opens your init function and realize the tail end of our code wasn't inside.

should be:

geocoder.startup();

var imageParameters = new esri.layers.ImageParameters();
imageParameters.layerIds = [1];

layer = new esri.layers.ArcGISDynamicMapServiceLayer("url", {
  "imageParameters" : imageParameters
 });
map.addLayer(layer);
}

//}  that last curly brace wasn't closing anything.

MichaelMachado · ‎08-15-2013

Hi John,

Thanks. I finally had a chance to view the results and while the topo map shows up just fine the parcel layer in the MapServer service does not appear. Should this be loaded or called before the GeocoderServer service?

Thanks

JohnGravois · ‎08-15-2013

it shouldnt matter what order you decide to load the geocoder widget and dynamic map service layer.

perhaps it would be helpful to substitute a public service like the one i tried to confirm that your syntax is correct?

imageParameters.layerIds = [0];
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
  "imageParameters" : imageParameters
 });

does substituting the code above allow you to see the block group points in your map?

MichaelMachado · ‎08-15-2013

Hi John,

No I get the same results with your code snippet, just the topo.

JohnGravois · ‎08-15-2013

i just caught a typo in the url in my earlier code snippet. you aren't supposed to include the "/0"

imageParameters.layerIds = [1];

layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
  "imageParameters" : imageParameters
 });

check out this fiddle for a complete working example.