Create a Map from a MapServer URL - map coming back blank

[RakeshAjwani]

Hi there,

            I am doing a JavaScript sdk prototype and trying to create a Map based on a mapserver URL. Below is my code.  

I tried creating the base layer and then adding one of the feature layers but the map keeps coming back as blank.

I did the same prototype with a webmap and it worked just fine. I think I am missing something basic but I cannot figure it out.

Any guidance is appreciated.

thank you,

Rakesh

let webmap = undefined;
let map = undefined;
let view = undefined;
let layers = undefined;
var srpCoordinates = [];
var coordinates = [];
let graphicsLayer = undefined;
let graphicsTextLayer = undefined;
let basemap = undefined;

let renderMap = () => {
//alert("hello");
require([
"esri/config",
"esri/WebMap",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/widgets/ScaleBar",
"esri/widgets/Legend",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer", "esri/layers/FeatureLayer",
], function (esriConfig, WebMap, Map, Basemap, MapView, ScaleBar, Legend, Graphic, GraphicsLayer, MapImageLayer, TileLayer,FeatureLayer) {

var portalUrl = "";
graphicsLayer = new GraphicsLayer();
graphicsTextLayer = new GraphicsLayer();

const baseLayer = new TileLayer({
url: "/MapServer"
});

const featurelayer1 = new FeatureLayer({
url: "/MapServer/111"
});

basemap = new Basemap({
baseLayers: [baseLayer],
});

map = new Map({
basemap: basemap,
layers:[featurelayer1]
});

view = new MapView({
container: "viewDiv",
zoom: 13,
map: map,

});

const scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");

//***disabled the legend for now

//const legend = new Legend({
// view: view
//});
//view.ui.add(legend, "top-right");

////load the map layers
//webmap.loadAll().then(() => {
// let gateLayer = undefined;
// layers = webmap.layers;
// console.log(layers.length);
// // loop through all operational layers in your webmap
// webmap.layers.forEach((layer) => {
// console.log("layer.id", layer.id, layer.title);
// if (layer.title.includes("Gate Boundary")) {
// gateLayer = layer;
// }
// console.log(layer.spatialReference);
// // check your layer here
// });

// //webmap.layers.remove(gateLayer);
// webmap.layers.removeAll();
//});

//console.log(webmap.layers.length);
//webmap.layers.forEach((layer) => {
// console.log("layer.id", layer.id, layer.title);
// console.log(layer.spatialReference);
// // check your layer here
//});

//TODO: need to figure out spinner
MapLoaded();

});

};

[JamesIng]

These will need to be actual URLs pointing to a service:

const baseLayer = new TileLayer({
url: "/MapServer"
});

const featurelayer1 = new FeatureLayer({
url: "/MapServer/111"
});

Example if you update your code to call these example services:

const baseLayer = new TileLayer({
portalItem: {
id: "382e5ab1c3e940bfbf470c4e6c64134c"
}
});

const featurelayer1 = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureSer...",
outFields: ["*"]
});

You'll see something render on the map.

And lastly your code didn't include actually calling renderMap(), but I'm assuming you're calling that somewhere.