Trying to get my Azure map to display within a jumbotron with a bit of padding to the edges. So far cannot get it to stay within the Jumbotron's boundaries with a little bit of padding. Any ideas?
Script in head:
<script type="text/javascript">
function InitMap()
{
var map = new atlas.Map('myMap', {
style: 'satellite_road_labels',
center: [-122.33, 47.6],
zoom: 12,
language: 'en-US',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'xxxxxxxxxxxxx'
}
});
}
</script>
Loads with body:
<body onload="InitMap()">
Style sheet within page:
<style>
.mapContainer {
position: relative;
width: 100%;
min-width: 290px;
height: 600px;
}
#myMap {
height: 100vh;
width: 100vw;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
}
</style>
Map within second column where Jumbotron is:
<div class="col-md-6">
<div class="jumbotron">
<div class="container-md"> <div id="myMap"></div></div>
</div>
</div>