nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

MichaelMachado

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.

Vind meer berichten getagd met

Accepted answers

JohnGravois

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

All comments

khutchins

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

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

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

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

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

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

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

Hi John,

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

JohnGravois

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.

MichaelMachado

Hi John,

I removed the "/0" after MapServer but the layer still does not show up.

JohnGravois

please compare and contrast my working sample linked above with your own app to try and determine the cause of the problem.

if you can't find it i'd be happy to take a look at your own code if you provide it.

MichaelMachado

Good morning John, well some progress is being made. The topo map shows up with the city limit line, which is layer "0". The parcel layer is "1". Do I need to identify the parcel layer in some way so it will show up too? Thanks

JohnGravois

passing specific layerIds to imageParameters is a technique to restrict the layers from the original service that are drawn in your appl;ication. you can either skip supplying the imageParameters in your ArcGISDynamicMapService layer constructor if you'd like all the layers in the service to display, or add all the individual layerIds you want to the array and continue to include it in the constructor.

//imageParameters.layerIds = [0,1,2];

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

MichaelMachado

Yeah, it worked and looks great. I had to tweak the lat/long to get it to center a bit better for our city. There are a few more things I need to add to this and would like your help if possible. Can I do that or should I call in to support?

Thanks

JohnGravois

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.