Правильно отображать веб-карту в скользящей боковой панели

Question

Использование ArcGis Javascript 3.17 API от this example, я пытаюсь создать «скрытую» веб-карту снизу, но она ведет себя далеко не ожидаемо, она не будет загружаться должным образом и продолжает расширяться нон-стоп

Jsfiddle: https://jsfiddle.net/ppgab/83jdovv6/7

Libs:

https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js

https://js.arcgis.com/3.17

Html:

<div> 
    <h1 class="big-text"> 
    Test Application 
    </h1> 
</div> 

<div id="map" class="down"> 
    <i><img id="up_button" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png"></i> 
</div> 

Javascript:

var map; 

require(["esri/map", "dojo/domReady!"], function(Map) { 
    map = new Map("map", { 
    basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd 
    center: [-122.45, 37.75], // longitude, latitude 
    zoom: 13 
    }); 
}); 



$('#row').click(function() { 

    if ($("#row").hasClass("down")) { 
    $("#row").removeClass("down"); 
    $("#row").animate({ 
     height: "50%" 
    }, 600); 

    } else { 

    $("#row").animate({ 
     height: 28 
    }, 350); 
    $("#row").addClass("down"); 
    } 

}); 

CSS:

body { 
    margin: 0; 
    background: url(https://pcbx.us/beoh.jpg); 
    background-attachment: fixed; 
    background-size: cover; 
} 

.big-text { 
    text-align: center; 
    color: #2C2C2C; 
    font-family: pt sans narrow; 
    font-weight: 100; 
    font-size: 4em; 
} 

h2 { 
    font-family: pt sans narrow; 
    text-transform: uppercase; 
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.85); 
} 

#container { 
    background: #303030; 
    text-align: center; 
    color: #FFF; 
    font-size: 2em; 
    height: 50%; 
    width: 100%; 
    bottom: 0; 
} 

.hidden { 
    display: none; 
} 

#map { 
    background: #303030; 
    width: 100%; 
    text-align: center; 
    height: 28; 
    bottom: 0; 
    position: fixed; 
} 

Это ничего не стоит, что я новичок веб-разработчик, большая часть этого кода, который я нашел в Интернете

Или, если кто-то может порекомендовать JQuery Скользящая врезку плагин, который будет работать в этой ситуации

Answer 1

Ну, я понял несколько вещей в вашем jsfiddle ...

• Esri CSS не было добавлено из-за этой карты была не загружается должным образом
• Id and classes не были используется должным образом.

Ниже правильный рабочий раствор:

JSFiddle:https://jsfiddle.net/vikash2402/83jdovv6/11/

Надеясь это поможет :)