Dynamic Map Layer Examples

Dynamic Map Layer

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>MapImageLayer - create dynamic map layers - 4.5</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
    <script src="https://js.arcgis.com/4.5/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #info-div {
            background-color: white;
            border-radius: 8px;
            padding: 8px;
            opacity: 0.92;
        }
    </style>

    <script>
        require(["esri/config"], function (esriConfig) {
            esriConfig.request.corsEnabledServers.push("localhost:8080");
        });
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/widgets/Legend",
            "dojo/domReady!"
        ], function (Map, MapView, MapImageLayer, Legend) {

            var layer = new MapImageLayer({
                url: "http://localhost:8080/geoserver/gsr/services/topp/MapServer/3",
                title: "Topp"
            });

            /*****************************************************************
             * Add the layer to a map
             *****************************************************************/

            var map = new Map({
                layers: [layer]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                extent: { // autocasts as new Extent()
                    xmin: 143.83482400000003,
                    ymin: -43.648056,
                    xmax: 148.47914100000003,
                    ymax: -39.573891,
                    spatialReference: 4326
                }
            });
        });
    </script>

</head>

<body>
<div id="viewDiv"></div>
<div id="info-div">
</div>
</body>

</html>

<!-- Esri®, ArcGIS® and ArcGIS Online®  are trademarks, registered trademarks, or service marks of Esri in the United States, the European Community, or certain other jurisdictions. Other companies and products mentioned may be trademarks of their respective owners.-->

Dynamic Map Layer Wholeservice

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>MapImageLayer - create dynamic map layers - 4.5</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
    <script src="https://js.arcgis.com/4.5/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #info-div {
            background-color: white;
            border-radius: 8px;
            padding: 8px;
            opacity: 0.92;
        }
    </style>

    <script>
        require(["esri/config"], function (esriConfig) {
            esriConfig.request.corsEnabledServers.push("localhost:8080");
        });
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/widgets/Legend",
            "dojo/domReady!"
        ], function (Map, MapView, MapImageLayer, Legend) {

            var layer = new MapImageLayer({
                url: "http://localhost:8080/geoserver/gsr/services/tiger/MapServer",
                title: "Census Demographics"
            });

            /*****************************************************************
             * Add the layer to a map
             *****************************************************************/

            var map = new Map({
                layers: [layer]
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                extent: { // autocasts as new Extent()
                    xmin: -74.0118315772888,
                    ymin: 40.70754683896324,
                    xmax: -74.00153046439813,
                    ymax: 40.719885123828675,
                    spatialReference: 4326
                }
            });
        });
    </script>

</head>

<body>
<div id="viewDiv"></div>
<div id="info-div">
    Select a demographic variable<br><br>
    <select id="layer-select">
        <option value="0">Population density</option>
        <option value="1" selected>Renter occupied units</option>
        <option value="2">Median age</option>
    </select>
</div>
</body>

</html>

<!-- Esri®, ArcGIS® and ArcGIS Online®  are trademarks, registered trademarks, or service marks of Esri in the United States, the European Community, or certain other jurisdictions. Other companies and products mentioned may be trademarks of their respective owners.-->
Previous: Feature Layer Examples
Next: Feature Table Example