Errors on loading dynamic map layer and feature layer

SarojThapa1 · ‎10-24-2016

When the map is loaded, sometimes it displays dynamic map layer and legends and sometimes it does not. I am not sure this is the error caused by ArcGIS Server Manager because other maps are loaded fine from the same ArcGIS Server. Could anyone please check my codes below and tell me what possibly is wrong? Thanks

<!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></title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <style>
        html, body{
            height: 100%;
            width: 100%;
            margin-top: 10px;
            overflow: hidden;
            padding-bottom: 0;
        }

        #map {
            padding-top: 8px;
            width: 100%;
            height: 100%;
            padding-bottom: 20px;
            margin-left: 0;
        }

        #navToolbar {
            border: 2px solid lightgray;
            width: 14%;
            border-radius: 10px;
        }

        .zoominIcon {
            background-image: url(Images/zoom-in.png);
            width: 16px;
            height: 16px;
        }

        .zoomoutIcon {
            background-image: url(Images/zoom-out.png);
            width: 16px;
            height: 16px;
        }

        .zoomfullextIcon {
            background-image: url(Images/zoom-full.png);
            width: 16px;
            height: 16px;
        }

        .zoomprevIcon {
            background-image: url(Images/zoom-previous.png);
            width: 16px;
            height: 16px;
        }

        .zoomnextIcon {
            background-image: url(Images/zoom-next.png);
            width: 16px;
            height: 16px;
        }

        .panIcon {
            background-image: url(Images/pan.png);
            width: 16px;
            height: 16px;
        }

        .deactivateIcon {
            background-image: url(Images/deactivate.png);
            width: 16px;
            height: 16px;
        }

        #search {
            display: block;
            position: absolute;
            z-index: 2;
            top:53px;
            left: 90px;
        }

        #rightPane {
            width: 8%;
            padding-bottom: 20px;
        }

        #legendPane {
            border: solid #97DCF2 1px;
        }

        .claro .dijitTooltipContainer {
            background-image: none;
            border:           1px solid #444444;
            background-color: #444444;
            color:            #FFFFFF;
        }

        .claro .dijitTooltipConnector {
            background-image: none;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map, navToolbar;

        require([
                    "esri/map",
                    "esri/toolbars/navigation",
                    "esri/dijit/Search",
                    "esri/layers/FeatureLayer",
                    "esri/InfoTemplate",
                    "esri/dijit/BasemapGallery",
                    "esri/dijit/Legend",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/layers/ImageParameters",
                    "esri/Color",
                    "esri/dijit/Popup",
                    "esri/dijit/PopupTemplate",

                    "esri/symbols/SimpleFillSymbol",
                    "esri/symbols/SimpleLineSymbol",

                    "dojo/on",
                    "dojo/dom",
                    "dojo/parser",
                    "dojo/dom-construct",

                    "dijit/registry",
                    "dijit/Toolbar",
                    "dijit/form/Button",
                    "dijit/TitlePane",
                    "dijit/layout/ContentPane",
                    "dijit/layout/AccordionContainer",
                    "dijit/layout/BorderContainer",
                    "dojo/domReady!"
                ],
                function (Map, Navigation,Search, FeatureLayer, InfoTemplate, BasemapGallery, Legend, ArcGISDynamicMapServiceLayer,
                          ImageParametrs, Color, Popup, PopupTemplate, SimpleFillSymbol, SimpleLineSymbol,  on, dom, parser, domConstruct, registry) {

                    parser.parse();

                    // var navToolbar;
                    var legendLayers = [];

                    var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
                    var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

                    var popupOptions = {
                        fillSymbol: sfs,
                        marginLeft: "70",
                        marginTop: "100"
                    };
                    //create a popup to replace the map's info window
                    var popup = new Popup(popupOptions, domConstruct.create("div"));


                    map = new Map("map", {
                        basemap: "topo",
                        center: [-88.55, 43.12],
                        zoom: 9,
                        infoWindow: popup
                    });

                    var popupTemplate = new PopupTemplate({
                        "title": "Location",
                        "description": "<b>Name: </b> {Name} </br><br/> <b>Industry: </b> {Industry3} </br></br> "
                    });

                    var popupTemplate2 = new PopupTemplate({
                        title: "Area",                        description: "Region: {Region}"
                    });

                    var featureLayer = new FeatureLayer("RESTURL/FeatureServer/2", {
                        mode: FeatureLayer.MODE_SNAPSHOT,
                        infoTemplate: popupTemplate,
                        opacity:1,
                        outFields: ["*"]
                    });

                    var featureLayer2 = new FeatureLayer("URL/FeatureServer/5",{
                        mode: FeatureLayer.MODE_ONDEMAND,
                        opacity:0,
                        outFields: ["*"],
                        infoTemplate: popupTemplate2
                    });

                    map.addLayers([dynamicLayer]);
                    map.addLayer(featureLayer2);
                    map.addLayer(featureLayer);


                    var basemapGallery = new BasemapGallery({
                        showArcGISBasemaps: true,
                        map: map
                    }, "basemapGallery");
                    basemapGallery.startup();

                    basemapGallery.on("error", function (msg) {
                        console.log("basemap gallery error: ", msg);
                    });

                    var imageParameters = new ImageParametrs();
                    imageParameters.format = "jpeg";

                    var dynamicLayer = new ArcGISDynamicMapServiceLayer("RESTURL/MapServer", {
                        id: 'Area',
                        "imageParameters": imageParameters
                    });

                    legendLayers.push({ layer: dynamicLayer, title: 'Area' });


                    map.on('layers-add-result', function () {
                        var legend = new Legend({
                            map: map,
                            layerInfos: legendLayers
                        }, "legendDiv");
                        legend.startup();
                    });

                    map.addLayers([dynamicLayer]);


                    navToolbar = new Navigation(map);
                    on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

                    registry.byId("zoomin").on("click", function () {
                        navToolbar.activate(Navigation.ZOOM_IN);
                    });

                    registry.byId("zoomout").on("click", function () {
                        navToolbar.activate(Navigation.ZOOM_OUT);
                    });

                    registry.byId("zoomfullext").on("click", function () {
                        navToolbar.zoomToFullExtent();
                    });

                    registry.byId("zoomprev").on("click", function () {
                        navToolbar.zoomToPrevExtent();
                    });

                    registry.byId("zoomnext").on("click", function () {
                        navToolbar.zoomToNextExtent();
                    });

                    registry.byId("pan").on("click", function () {
                        navToolbar.activate(Navigation.PAN);
                    });

                    registry.byId("deactivate").on("click", function () {
                        navToolbar.deactivate();
                    });

                    function extentHistoryChangeHandler () {
                        registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
                        registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
                    }

                    var search = new Search({
                        sources: [{
                            featureLayer: new FeatureLayer("RESTURL/FeatureServer/5", {
                                outFields: ["*"],
                                opacity:0,
                                infoTemplate: new InfoTemplate("Metroplex", "Region: ${Region}")
                            }),
                            outFields: ["Metro_Region"],
                            displayField: "Metro_Region",
                            suggestionTemplate: "Metro Region:${Metro_Region}",
                            name: "Metroplex",
                            placeholder: "Enter a Metroplex Region",
                            enableSuggestions: true
                        }],
                        map: map
                    }, "search");



                    search.startup();

                });
    </script>
</head>

<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

    <div id="rightPane"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'right'">

        <div data-dojo-type="dijit/layout/AccordionContainer">
            <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                 data-dojo-props="title:'Legend', selected:true">

                <div id="legendDiv"></div>

            </div>

            <span>Loading...</span>


        </div>
    </div>

    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="overflow:hidden;">
    </div>

</div>
<div id="navToolbar" data-dojo-type="dijit/Toolbar" style="position:absolute; right:200px; top:52px; z-Index:1000;">
    <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'"></div>
    <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'"></div>
</div>



<div id="search"></div>

<div style="position:absolute; right:500px; top:53px; z-Index:999;">
    <div data-dojo-type="dijit/TitlePane"
         data-dojo-props="title:'Switch Basemap', closable:false, open:false">
        <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
        </div>
    </div>
</div>





</body>
</html>

RobertScheitlin__GISP · ‎10-24-2016

Saroj,

OK if you need editing then yes you need to use FeatureServer but if you do not need to edit the layer then use MapServer. I don't see anything wrong with your code so you should check your ArcGIS Server logs to see if your services are failing.

View solution in original post

RobertScheitlin__GISP · ‎10-24-2016

Saroj,

Why are you using "FeatureServer" in almost all your urls instead of "MapServer"? Do you understand the difference between the two?

SarojThapa1 · ‎10-24-2016

I need to have popups and edit (both attributes and geometry) functions for a couple of feature layers. That's why I am using Feature Server. To load the entire map at once, I am using MapServer. I don't know if there are better options than what I am using right now. Thanks

RobertScheitlin__GISP · ‎10-24-2016

Saroj,

OK if you need editing then yes you need to use FeatureServer but if you do not need to edit the layer then use MapServer. I don't see anything wrong with your code so you should check your ArcGIS Server logs to see if your services are failing.

SarojThapa1 · ‎10-24-2016

Thank you so much Robert. You have been helping me a lot lately.