How to add a service using API Javascript

SteveCline · ‎05-09-2015

I am using the "require" script to load layers into a map. I am able to successfully use the "esri/layers/ArcGISDynamicMapServiceLayer" script to load tiled layers but I am wondering how to add these two layers:

Cline/Regions_w_Country_Labels (MapServer)

http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0

Any guidance is greatly appreciated.

Steve

RobertScheitlin__GISP · ‎05-13-2015

Steve,

Sorry there was an error in my code it should be

outFields: ["CITY_NAME"]

An array of Strings not a string containing an array.

View solution in original post

RobertScheitlin__GISP · ‎05-09-2015

Steve,

Normally you would use ArcGISTiledMapServiceLayer for tiled/cached layers. Use ArcGISDynamicMapServiceLayer for map services that are not tiled and you want to display the whole mapservice using the symbology from ArcGIS Server and not needing the geometry to be available on the client side. Use FeatureLayer for individual layers of a map service like http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0 . A FeatureLayer actually downloads the geomerty to the client.

SteveCline · ‎05-09-2015

Robert -

That worked to bring the layer into the map. Is there a way to add the style created on ArcGIS.com?

Thanks for your help.

Steve

RobertScheitlin__GISP · ‎05-10-2015

Steve,

When I add http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0 as a Feature layer it pulls the symbology in as well. Here is a simple sample:

<!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>Feature Layer Only Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      require([
        "dojo/dom-construct",
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent",
        "esri/InfoTemplate",
        "dojo/domReady!"
      ], function(
          domConstruct,
          Map,
          FeatureLayer,
          Extent,
          InfoTemplate
        ) {
          var bounds = new Extent({
            "xmin":-16045622,
            "ymin":-811556,
            "xmax":7297718,
            "ymax":11142818,
            "spatialReference":{"wkid":102100}
          });

          var map = new Map("map", {
            extent: bounds
          });

          var url = "http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0";

          var template = new InfoTemplate("Cities", "City: ${CITY_NAME}");

          var fl = new FeatureLayer(url, {
            id: "Cities",
            infoTemplate: template
          });

          map.addLayer(fl);
        }
      );
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

SteveCline · ‎05-10-2015

Robert -

I am trying to integrate that into my script by doing this:

var template = new InfoTemplate("cities", "City: ${CITY_NAME}");

var cities = new FeatureLayer("http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0", {

id: 'cities',

infoTemplate: template

});

legendLayers.push({

layer: cities,

title: 'World Cities'

});

Can you see what I am missing?

Steve

RobertScheitlin__GISP · ‎05-10-2015

Steve,

Do you have the require for InfoTemplate in your code?

SteveCline · ‎05-11-2015

Robert -

I was able to get it to work just like yours. However, on both of our scripts the attribute for the "CITY_NAME" field does not appear in the pop-up. (see attachment)

Also, am I correct in assuming that if I want to change the symbology on these point features I will need to do that in desktop and republish?

Thanks again.

Steve

RobertScheitlin__GISP · ‎05-12-2015

Steve,

The city name not showing up in the popup is because I forgot to specify the outFields of the feature layer:

          var fl = new FeatureLayer(url, {
            id: "Cities",
            infoTemplate: template,
            outFields: ["CITY_NAME"]
          });

You could change the symbology on the layer in Desktop and re-publish as you said or you just use setRenderer on the FeatureLayer.

require([
        "dojo/dom-construct",
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/geometry/Extent",
        "esri/InfoTemplate",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/Color",
        "dojo/domReady!"
      ], function(
          domConstruct,
          Map,
          FeatureLayer,
          Extent,
          InfoTemplate,
          SimpleRenderer,
          SimpleMarkerSymbol,
          Color
        ) {
          var bounds = new Extent({
            "xmin":-16045622,
            "ymin":-811556,
            "xmax":7297718,
            "ymax":11142818,
            "spatialReference":{"wkid":102100}
          });

          var map = new Map("map", {
            extent: bounds
          });

          var url = "http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Major_World_Cities/FeatureServer/0";

          var template = new InfoTemplate("Cities", "City: ${CITY_NAME}");

          var fl = new FeatureLayer(url, {
            id: "Cities",
            infoTemplate: template,
            outFields: ["*"]
          });
          var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, null, new Color([0,255,0,0.25]));
          fl.setRenderer(new SimpleRenderer(sms));
          map.addLayer(fl);
        }

EvelynHernandez · ‎05-12-2015

Steve,

I have this as example, i hope this work for u too:

    var trans = new InfoTemplate();
        trans.setTitle("<b>ID: ${concesion_id}</b>");
     
        var transInfoContent =
        "<div style=padding-top: 10px;>Class: ${class}<br></div>" +
        "<div style=display:inline-block;width:8px;></div>";
       
        trans.setContent(transInfoContent);


//ADD Templates to MapServer
        chqMapServer.setInfoTemplates({ 
        0:{  infoTemplate: trans}
        }); 

//adding the layer to the map
  map.addLayer(chqMapServer);

Verify the attributes in ${} have the same name how they were specified in ur rest srv.

SteveCline · ‎05-13-2015

Robert -

I tried this:

var template = new InfoTemplate("Cities", "City: ${CITY_NAME}<br>Population: ${POP}");

var Cities = new FeatureLayer("http://services3.arcgis.com/HVjI8GKrRtjcQ4Ry/arcgis/rest/services/Cities_over_100000/FeatureServer/0", {

id: "Cities",

infoTemplate: template,

outFields: "[CITY_NAME]"

});

The result of this script is that the layer does not appear at all. When I remove the

outFields: "[CITY_NAME]"

It appears again but it only shows the population attribute, not the city attribute.

Steve