How to Add Map Service to API Javascript

Question

Hi, I have an esri sample code attached -- I successfully inserted my basemap but when I tried to add my mapservice, it doesn't error out but it doesn't show the mapservice. Any suggestions on what I'm missing in the code?  Thank you.

SampleCode.txt

Orange11 · Answer

Thank you for the information. I made the modification and then it errored out on something else. So I started from beginning modifying the original esri sample code which I attached initially. (Sorry, I'm new to this and I don't see an option to  use the "Insert/Edit code sample" button so I'm pasting it here.)  The basemap is good but the annexation map service is not displaying. Any suggestion is appreciated. Thank you.

map = new Map("mapDiv", {
// basemap: "streets",
center: [-85.82966, 33.666494],
zoom: 7
});
var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://gismaps/arcgis/rest/services/Basemap/StreetBaseMap/MapServer");
map.addLayer(baseMapLayer);

map.on("load", initToolbar);

var featureLayer1 = new FeatureLayer("https://gismaps/arcgis/rest/services/CountyServices/Annexations/MapServer/0", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("Case Name: ${CaseName}", "${*}"),
outFields: ["NumParcels"]
});

map.addLayers([featureLayer1, featureLayer2, featureLayer3]);

Orange11 · Answer

Ken, thank you for the information. I made the modification fine but it's erroring out on something else so I started from beginning.  (Sorry, I'm new to this and I don't see an option to use the "Insert/Edit code sample" button so I will paste it here.)  This is the original esri sample code and I added my basemap fine. But when I add my annexation map service, it doesn't display. Thank you for any suggestions you can provide.

==========================================

var map, tb;

require([
"esri/map", "esri/toolbars/draw", "dojo/promise/all",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer",
"esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate",
"esri/Color", "dojo/dom", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"], function (
Map, Draw, All,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
PictureFillSymbol, CartographicLineSymbol, FeatureLayer,
Graphic, Query, QueryTask, InfoTemplate,
Color, dom, on, parser) {

parser.parse();

map = new Map("mapDiv", {
// basemap: "streets",
center: [-85.82966, 33.666494],
zoom: 7
});
var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("https://gismaps.fultoncountyga.gov/arcgispub2/rest/services/Basemap/FultonStreetBaseMap/MapServer");
map.addLayer(baseMapLayer);

map.on("load", initToolbar);

var featureLayer1 = new FeatureLayer("https://gismaps.fultoncountyga.gov/arcgispub/rest/services/CountyServices/Annexations/MapServer/0", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("Case Name: ${CaseName}", "${*}"),
outFields: ["NumParcels"]
});

// var featureLayer1 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
// mode: FeatureLayer.MODE_SELECTION,
// infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
// outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"]
// });

var featureLayer2 = new FeatureLayer("https://gismaps.fultoncountyga.gov/arcgispub/rest/services/Temp/ParcelDownload_test/FeatureServer", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("Block Group: ${BLKGRP}", "${*}"),
outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLKGRP"]
});

var featureLayer3 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("County Name: ${NAME}", "${*}"),
outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "NAME"]
});

map.addLayers([featureLayer1, featureLayer2, featureLayer3]);

// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));

// lineSymbol used for freehand polyline, polyline and line.
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5);

// fill symbol used for extent, polygon and freehand polygon
var fillSymbol = new SimpleFillSymbol();

function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);

// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function (evt) {
if (evt.target.id === "info") {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}

function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();

// figure out which symbol to use
var symbol;
if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
} else {
symbol = fillSymbol;
}

map.graphics.add(new Graphic(evt.geometry, symbol));
queryMapService(evt.geometry);
}

function queryMapService(Geom) {
var promises = [];

var query = new Query();
query.returnGeometry = false;
query.outFields = ["*"];
query.geometry = Geom;
promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW));
promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW));
promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW));
var allPromises = new All(promises);
allPromises.then(function (r) {
showResults(r);
});
}

function showResults(results) {
var resultCount = results.length;
console.log(resultCount);
}
});

================================

kenbuja · Answer

When adding code, use the "Insert/Edit code sample" button instead of adding it as an attachment.

The first thing I see is that the require modules don't match up with the function arguments

require(["esri/map", "esri/toolbars/draw", "dojo/promise/all",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
    "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer",
    "esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate",
    "esri/Color", "dojo/dom", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
    "dijit/layout/AccordionContainer", "dojo/domReady!"], function (
Map, Draw, All,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
PictureFillSymbol, CartographicLineSymbol, FeatureLayer,
Graphic, Query, QueryTask, InfoTemplate,
Color, dom, on, parser, ArcGISDynamicMapServiceLayer) {

You haven't included the module for ArcGISDynamicMapServiceLayer.