How to use ma-map inside a hidden div

henryblu

This is potentially beyond the scope of the forum...

If we created a tabbed dashboard page: like this example from W3schools, where tabbed content is originally hidden, but then displays upon click.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_fade

0_1505175440280_bc2a0933-667d-48b9-a277-7a4133721eb3-image.png

One of the errors I have found which I have tried to resolve, unsuccessfully, through looking at ng-map is that when <ma-map></ma-map> is placed inside one of the tabs. The result looks like this:

0_1505175651649_abeaaa9c-fa41-413a-b151-19829ef3e79b-image.png

I believe the issue is that the map is initialised with no dimensions so when you then click on the div it doesn't know what size it should be. Is there way to refresh the ma-map when that div is selected?

Here is the example code:

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
</head>
<body>

<h3>Fade in Tabs</h3>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
<ma-get-point-value point-xid="Demo 01-fan" point="myPoint1"></ma-get-point-value> 
<ma-get-point-value point-xid="Demo 01-setpoint" point="myPoint2"></ma-get-point-value> 
<ma-get-point-value point-xid="Demo 01-Temp" point="myPoint3"></ma-get-point-value>
<ma-point-values point="myPoint3" values="chart1Vals" latest="50"></ma-point-values> 



<ma-map lat="-12.95" long="-38.45" zoom="12" map-type="roadmap" info-window-theme="dark" desktop-height="600px" mobile-height="450px" ng-init="myMarkers={
        true: 'img/map-markers/purple-dot.png',
        false: 'img/map-markers/orange-dot.png'}" output-data="myOutputData">
    
    <marker id="marker1" position="-12.90, -38.41" icon="{url: '{{myMarkers[myPoint1.value]}}'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint1', 'marker1')"></marker>
    <marker id="marker2" position="-12.95, -38.43" draggable="true" icon="{url: 'img/map-markers/green-dot.png'}" on-click="$parent.$ctrl.toggleInfoWindow('setPoint2', 'marker2')"></marker>
    <marker id="marker3" position="-12.99, -38.47" draggable="true" on-click="$parent.$ctrl.toggleInfoWindow('chart1', 'marker3')"></marker>
    <marker id="marker4" position="-12.92, -38.42" draggable="true" icon="{url: 'img/map-markers/yellow-dot.png'}" on-click="$parent.$ctrl.setOutputData('Demo 01-amps')"></marker>
    
    <info-window id="setPoint2">    
        <div>
            <ma-set-point-value point="myPoint2"></ma-set-point-value>
        </div>
    </info-window>
    <info-window id="setPoint1">
        <div>
            <ma-set-point-value point="myPoint1"></ma-set-point-value>
        </div>
    </info-window>
    <info-window id="chart1">
        <div layout="row" layout-padding>
            <ma-serial-chart style="height: 150px; width: 250px" series-1-point="myPoint3" series-1-values="chart1Vals"></ma-serial-chart>
        </div>
    </info-window>
</ma-map>
</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent*.style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks*.className = tablinks*.className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
     
</body>
</html>

Jared Wiltshire

@henryblu you might want to consider using Angular Material tabs, see the following links. You can use these on your page without any JavaScript.
https://material.angularjs.org/latest/demo/tabs
https://material.angularjs.org/latest/api/directive/mdTabs
https://material.angularjs.org/latest/api/directive/mdTab

You could try using the md-on-select attribute of md-tab to set a variable when the tab is selected then use a ng-if="variable" on the ma-map so it only initializes after the tab is selected.

henryblu

Thank you @Jared-Wiltshire - simple fix. Simply using Angular Material Tabs solves the issue.

Cheers,
Henry