1

I want my webmap to look something like this: https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=layout_MapContainerSplitLeft

However, rather than the map being on the right of another container it goes under it and I do not know why. All of the examples online show this only with Map object and not MapView object.

This is my current code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Alligatorweed</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.14/"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.14.1/dijit/themes/claro/claro.css" />
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 80%;
        }
    </style>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/Expand",
            "esri/widgets/BasemapGallery",
            "esri/layers/FeatureLayer",
            "dijit/MenuBar",
            "dijit/PopupMenuBarItem",
            "dijit/Menu",
            "dijit/MenuItem",
            "dijit/DropDownMenu",
            "dijit/layout/AccordionContainer",
            "dijit/layout/ContentPane",
            "dijit/layout/BorderContainer",
            "dojo/domReady!",
            "dojo/parser"],
            function (Map, MapView, Expand, BasemapGallery, FeatureLayer, MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, AccordionContainer, BorderContainer, ContentPane) {
                // create map 
                var map = new Map({
                    basemap: "satellite"
                });
                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    extent: {
                        xmin: -12288000,
                        ymin: 2545000,
                        xmax: -7592000,
                        ymax: 4521000,
                        spatialReference: 102100,
                    }

                });
                var featureLayer = new FeatureLayer({
                    url: "https://services.arcgis.com/MdapRpkzb0PVHqL1/arcgis/rest/services/map2/FeatureServer/0?token=08cfc7_qSinhZLAhGBFnaff4p7GMnah_kW5SU3gZIMp7UiGNy5S5Fa8tyjnNsXsGyt28dt-glcCoKFXDApg8FZsGtwuzVrQIKSbeZpfyuIVubYUoZKybbG0n1vUot3r3pLyBdq8f_y-bmtX_OlARxuo1OpsUUq5w8knj6keglsDekOOOSYxwd5EFXsN3NICKsikoVISCxOj1wRJQfGCtqaJJ44k3tWTN0WRiIsgDsnJs5evWjjflhONYAxGFRQ_-WaiWsbSAsIfMkZtfOVlrBA.."
                });
                map.add(featureLayer);

                // Expand widget containing basemap gallery on top right of map 
                var basemapGallery = new BasemapGallery({
                    view: view,
                    container: document.createElement("div")
                });

                var bgExpand = new Expand({
                    view: view,
                    content: basemapGallery

                });
                basemapGallery.watch("activeBasemap", function () {
                    var mobileSize =
                        view.heightBreakpoint === "xsmall" ||
                        view.widthBreakpoint === "xsmall";

                    if (mobileSize) {
                        bgExpand.collapse();
                    }
                });
                view.ui.add(bgExpand, "top-right");

                // create top menu bar 
                var pMenuBar = new MenuBar({});
                var pSubMenu = new DropDownMenu({});
                pSubMenu.addChild(new MenuItem({
                    label: "File item #1"
                }));
                pSubMenu.addChild(new MenuItem({
                    label: "File item #2"
                }));
                pMenuBar.addChild(new PopupMenuBarItem({
                    label: "File",
                    popup: pSubMenu
                }));

                var pSubMenu2 = new DropDownMenu({});
                pSubMenu2.addChild(new MenuItem({
                    label: "Cut",
                    iconClass: "dijitEditorIcon dijitEditorIconCut"
                }));
                pSubMenu2.addChild(new MenuItem({
                    label: "Copy",
                    iconClass: "dijitEditorIcon dijitEditorIconCopy"
                }));
                pSubMenu2.addChild(new MenuItem({
                    label: "Paste",
                    iconClass: "dijitEditorIcon dijitEditorIconPaste"
                }));
                pMenuBar.addChild(new PopupMenuBarItem({
                    label: "Edit",
                    popup: pSubMenu2
                }));
                pMenuBar.placeAt("header");
                pMenuBar.startup();
                // create accordion container on left side of layout 
                var aContainer = new AccordionContainer({}, "leftPane");
                aContainer.addChild(new ContentPane({
                    title: "This is a content pane",
                    content: "Hi!"
                }));
                aContainer.addChild(new ContentPane({
                    title: "This is as well",
                    content: "Hi how are you?"
                }));
                aContainer.addChild(new ContentPane({
                    title: "This too",
                    content: "Hello im fine.. thnx"
                }));
                aContainer.startup();
            });
    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
        <!-- header pane -->
        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"></div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" id="leftPane" style = "width:20%; height: 100%;">
        </div>

        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"></div>
        <!-- Map container -->
        <div id="viewDiv"  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
        </div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.