Map Disappearing on HTML page when Sizing is changed from pixels (px) to percentages (%)

RealzahAbbas · ‎08-16-2022

I am trying to allow this map to be resized via screen size (Mobile, Tablet, Chrome (Half Screen, Full Screen, etc.) so I know I can't set a specific pixel amount. However, when I do set a percentage the map disappears on my html page. I would like the map to have a height of 450px and a width of 600px at a maximum and then scale based on a screen size smaller then what can accommodate that.

My code is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Marketing Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css">
<style>

html, body {
padding: 0;
margin: 0;
height: 450px; #I assume these need to be changed to 100% but the map disappears when I do this
width: 600px; #I assume these need to be changed to 100% but the map disappears when I do this
}

#viewDiv {
padding: 0;
margin: 0;
height: 450px; #I assume these need to be changed to 100% but the map disappears when I do this
width: 650px; #I assume these need to be changed to 100% but the map disappears when I do this
}
.esri-legend {
border-radius: 10px;
background-color: rgba(85, 85, 85, 0.9);
color: #ddd;
font-size: 8px;
max-width: 170px;
}
.esri-legend__layer-caption{
visibility: hidden;
height: 0px;
margin-top: -5px;
}
.esri-legend__layer-body{
margin: 0px;
}
.esri-widget__heading {
color: #ddd;
}

</style>
<script src="https://js.arcgis.com/4.23/"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/core/watchUtils",
"esri/layers/FeatureLayer",
"esri/layers/MapImageLayer",
"esri/layers/support/LabelClass",
"esri/widgets/Search",
"esri/widgets/Home",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"esri/widgets/Legend",
"dojo/query",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(Map,Basemap,MapView,watchUtils,FeatureLayer,MapImageLayer,LabelClass,Search,Home,DistanceMeasurement2D,BasemapGallery,LayerList,Expand,Legend,query,dom,on, mobile, parser, has, dTheme, registry){

var map = new Map({
basemap: "gray-vector"
})
var view = new MapView({
container: "viewDiv",
map: map,
center: [-77.11731019866023, 38.82010562165418],
zoom:11,
constraints: {
maxZoom: 11,
minZoom: 18
}
});

const NbhRender = {
type: "unique-value",
field: "Constructi",
defaulSymbol: {type: "simple-fill"},
uniqueValueInfos: [{
value: "Future Construction",
symbol: {
type: "simple-fill",
color: "purple",
outline: {
width: 2,
color: "white"
}
}
}, {
value: "In Construction",
symbol: {
type: "simple-fill",
color: "red",
outline: {
width: 2,
color: "white"
}
}
}, {
value: "Live",
symbol: {
type: "simple-fill",
color: "#00aaee",
outline: {
width: 2,
color: "white"
}
}
}
]
};

var nbhLyr = new FeatureLayer({
url: "https://services8.arcgis.com/AH8GuAfnCoO6STfX/arcgis/rest/services/Alexandria_Boundaries/FeatureServ...",
title: "Workzones",
outFields: ["*"],
renderer: NbhRender,
visible: true,
opacity: 0.3,
visibleAtMapScale: true,
minScale: 2000000,
maxScale: 0
});

const nbhLabelClass = new LabelClass({
labelExpressionInfo: { expression: "$feature.Name" },
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "black",
font: {
weight: "bold",
size: 10
},
}
});

nbhLyr.labelingInfo = [ nbhLabelClass ];

map.add(nbhLyr)

//add legend
const legend = new Legend({
view: view,
visible: true,
font: {
size: 1
},
layerInfos: [{
layer: nbhLyr,
title: "Construction Status"
}]
});

view.ui.add(legend,"bottom-left");
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-98819163-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I have tried to add a div in the body that would hold the px amount and have the % amount in the viewDiv and multiple other approaches but nothing has worked so far.

JayakumarPD · ‎08-17-2022

Try with media query in your style tag,

@media only screen and (min-width: 992px) {
    #viewDiv{
        height: 450px ;
        width: 600px ;
    }
}

@media only screen and (max-width: 600px) {
    #viewDiv{
        height: 200px ;
        width: 200px ;
    } 
}