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
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.
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
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>
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
Steve,
Do you have the require for InfoTemplate in your code?
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
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);
}
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.
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
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.
That was perfect!
Thank you very much for all your help. The project is complete.
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.