ArcGIS Javascript help for Popups.

1236
2
Jump to solution
10-03-2016 03:06 PM
EricShreve1
New Contributor II

Hello I am new at JS, so I would figure this would be a good place to start. I was able to successfully get popups to show for my feature layer on my first HTML script. When I introduced a Dynamic Service Layer to the script it went bad and I am not able to get the popups to show. I wanted to know where in my script I am getting held up when trying to get my feature layers popups enabled. Thanks. java script api web-mappingjs-api

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

<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #mapDiv{
padding:0;
margin:0;
height:100%;
}

#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
</style>
<script src="http://js.arcgis.com/3.18/"></script>
<script>

var map;
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/BasemapToggle",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"dojo/parser",
"dojo/domReady!"
], function (
Map,
InfoTemplate,
ArcGISDynamicMapServiceLayer,
BasemapToggle,
FeatureLayer,
ImageParameters,
parser
) {

parser.parse()
map = new Map("mapDiv", {
basemap: "hybrid",
center: [-112.058785, 33.452663],
zoom: 14
});

var toggle = new BasemapToggle({
map: map,
basemap: "streets"
}, "BasemapToggle");
toggle.startup();


map.on("load", initOperationalLayer);

function initOperationalLayer() {
var infoTemplate = new InfoTemplate("FIRE STATION: ${STATION}", "ADDRESS: ${ADDRESS} ${CITY}, AZ ${ZIP}" );
var featureLayer = new FeatureLayer("http://pfdvma21:6080/arcgis/rest/services/Stations_3857/MapServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});


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

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://pfdvma21:6080/arcgis/rest/services/Eric/BATTALIONS_FIRSTDUES/MapServer", {
"opacity" : .75,
"imageParameters" : imageParameters

});

map.addLayer(dynamicMapServiceLayer);
map.addLayer(featureLayer);
map.infoWindow.resize(250,200);


});
</script>
</head>
<body class="claro">
<div id="mapDiv">
<div id="BasemapToggle"></div>
</div>
</body>
</html>

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

You have a couple of errors.

First, you don't have the "esri/layers/FeatureLayer" module in your require statement or its associated "FeatureLayer" in the function arguments. You're adding in a FeatureLayer in your script.

You also have a syntax error, missing a "}" at the end of the initOperationalLayer function.

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

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #BasemapToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 50;
        }
    </style>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>

        var map;
        require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/dijit/BasemapToggle",
        "esri/layers/FeatureLayer",
        "esri/layers/ImageParameters",
        "dojo/parser",
        "dojo/domReady!"
        ], function (
        Map,
        InfoTemplate,
        ArcGISDynamicMapServiceLayer,
        FeatureLayer,
        BasemapToggle,
        FeatureLayer,
        ImageParameters,
        parser
        ) {

            parser.parse()
            map = new Map("mapDiv", {
                basemap: "hybrid",
                center: [-112.058785, 33.452663],
                zoom: 14
            });

            var toggle = new BasemapToggle({
                map: map,
                basemap: "streets"
            }, "BasemapToggle");
            toggle.startup();


            map.on("load", initOperationalLayer);

            function initOperationalLayer() {
                var infoTemplate = new InfoTemplate("FIRE STATION: ${STATION}", "ADDRESS: ${ADDRESS} ${CITY}, AZ ${ZIP}");
                var featureLayer = new FeatureLayer("http://pfdvma21:6080/arcgis/rest/services/Stations_3857/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    infoTemplate: infoTemplate
                });


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

                var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://pfdvma21:6080/arcgis/rest/services/Eric/BATTALIONS_FIRSTDUES/MapServer", {
                    "opacity": .75,
                    "imageParameters": imageParameters

                });

                map.addLayer(dynamicMapServiceLayer);
                map.addLayer(featureLayer);
                map.infoWindow.resize(250, 200);
            }
        });
    </script>
</head>
<body class="claro">
    <div id="mapDiv">
        <div id="BasemapToggle"></div>
    </div>
</body>
</html>

View solution in original post

2 Replies
KenBuja
MVP Esteemed Contributor

You have a couple of errors.

First, you don't have the "esri/layers/FeatureLayer" module in your require statement or its associated "FeatureLayer" in the function arguments. You're adding in a FeatureLayer in your script.

You also have a syntax error, missing a "}" at the end of the initOperationalLayer function.

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

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #BasemapToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 50;
        }
    </style>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>

        var map;
        require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/dijit/BasemapToggle",
        "esri/layers/FeatureLayer",
        "esri/layers/ImageParameters",
        "dojo/parser",
        "dojo/domReady!"
        ], function (
        Map,
        InfoTemplate,
        ArcGISDynamicMapServiceLayer,
        FeatureLayer,
        BasemapToggle,
        FeatureLayer,
        ImageParameters,
        parser
        ) {

            parser.parse()
            map = new Map("mapDiv", {
                basemap: "hybrid",
                center: [-112.058785, 33.452663],
                zoom: 14
            });

            var toggle = new BasemapToggle({
                map: map,
                basemap: "streets"
            }, "BasemapToggle");
            toggle.startup();


            map.on("load", initOperationalLayer);

            function initOperationalLayer() {
                var infoTemplate = new InfoTemplate("FIRE STATION: ${STATION}", "ADDRESS: ${ADDRESS} ${CITY}, AZ ${ZIP}");
                var featureLayer = new FeatureLayer("http://pfdvma21:6080/arcgis/rest/services/Stations_3857/MapServer/0", {
                    mode: FeatureLayer.MODE_ONDEMAND,
                    outFields: ["*"],
                    infoTemplate: infoTemplate
                });


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

                var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://pfdvma21:6080/arcgis/rest/services/Eric/BATTALIONS_FIRSTDUES/MapServer", {
                    "opacity": .75,
                    "imageParameters": imageParameters

                });

                map.addLayer(dynamicMapServiceLayer);
                map.addLayer(featureLayer);
                map.infoWindow.resize(250, 200);
            }
        });
    </script>
</head>
<body class="claro">
    <div id="mapDiv">
        <div id="BasemapToggle"></div>
    </div>
</body>
</html>
EricShreve1
New Contributor II

Thanks a bunch works now.

0 Kudos