topic Re: How to add a service using API Javascript in ArcGIS JavaScript Maps SDK Questions

How to add a service using API Javascript

SteveCline — Sat, 09 May 2015 15:48:35 GMT

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

Re: How to add a service using API Javascript

RobertScheitlin__GISP — Sun, 10 May 2015 02:58:40 GMT

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.

Re: How to add a service using API Javascript

SteveCline — Sun, 10 May 2015 03:20:17 GMT

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

Re: How to add a service using API Javascript

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:49:29 GMT

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>

Re: How to add a service using API Javascript

SteveCline — Sun, 10 May 2015 20:53:19 GMT

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

Re: How to add a service using API Javascript

RobertScheitlin__GISP — Sun, 10 May 2015 22:22:39 GMT

Steve,

Do you have the require for InfoTemplate in your code?

Re: How to add a service using API Javascript

SteveCline — Tue, 12 May 2015 00:41:20 GMT

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

Re: How to add a service using API Javascript

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:49:31 GMT

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);
        }

Re: How to add a service using API Javascript

EvelynHernandez — Sun, 12 Dec 2021 00:49:34 GMT

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.

Re: How to add a service using API Javascript

SteveCline — Thu, 14 May 2015 00:50:31 GMT

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

Re: How to add a service using API Javascript

RobertScheitlin__GISP — Thu, 14 May 2015 02:22:42 GMT

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.

Re: How to add a service using API Javascript

SteveCline — Thu, 14 May 2015 03:06:22 GMT

That was perfect!

Thank you very much for all your help. The project is complete.