javascript – variable value from one div tag to another in single html page

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <link rel="stylesheet" href="stylesheet.css">

    <!-- Load jQuery and PapaParse to read data from a CSV file -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
    <title>Flood Data</title>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.minichart/dist/leaflet.minichart.min.js" charset="utf-8"></script>
    <script>
        var blueIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-blue.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var goldIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-gold.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var redIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-red.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var greenIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-green.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var orangeIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-orange.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var yellowIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-yellow.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var violetIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-violet.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var greyIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-grey.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var blackIcon = new L.Icon({
            iconUrl: 'leaflet/images/marker-icon-2x-black.png',
            shadowUrl: 'leaflet/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

        var map = L.map('mapid').setView([-33.700810, 150.887930], 6);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        $.get('./FloodData.csv', function (csvString) {

            // Use PapaParse to convert string to array of objects
            var data = Papa.parse(csvString, { header: true, dynamicTyping: true, skipEmptyLines: true }).data;
            console.log(data)

            var i = 0;
            var blue = 0;
            var green = 0;
            var yellow = 0;
            var amber = 0;
            var red = 0;
            var chartloc = [-34.308681, 157.699300];
            var colours = ["#2A81CB", "#2AAD27", "#FFD326", "#CB8427", "#CB2B3E"]
            var labels = ["Blue", "Green", "Yellow", "Amber", "Red"]
            var interval = window.setInterval(function () {
                console.log(data[i]);
                console.log("Value of i: " + i)
                var row = data[i];
                var latStr = row.Latitude;
                var lngStr = row.Longitude;
                var lat = parseFloat(latStr);
                var lng = parseFloat(lngStr);
                if (row.Colour == "Blue") {
                    blue++;
                    var marker = L.marker([lat, lng], {
                        icon: blueIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                } else if (row.Colour == "Green") {
                    green++;
                    var marker = L.marker([lat, lng], {
                        icon: greenIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                } else if (row.Colour == "Yellow") {
                    yellow++;
                    var marker = L.marker([lat, lng], {
                        icon: goldIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                } else if (row.Colour == "Amber") {
                    amber++;
                    var marker = L.marker([lat, lng], {
                        icon: orangeIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                } else if (row.Colour == "Red") {
                    red++;
                    var marker = L.marker([lat, lng], {
                        icon: redIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                } else {
                    var marker = L.marker([lat, lng], {
                        icon: greenIcon
                    }).bindPopup('Building: ' + row.Building_Name);
                }
                marker.addTo(map);
                i++;
                //var myBarChart = L.minichart(chartloc, { data: [blue, green, yellow, amber, red], colors: colours, maxValues: 112, height: 500, width: 200, labels: labels, labelMinSize: 5 });
                //map.addLayer(myBarChart);
                console.log("Value of i after end of iteration: " + i)
                console.log("Blue: " + blue + " Green: " + green + " Yellow: " + yellow + " Amber: " + amber + " Red: " + red)
                if (i == data.length) {
                    console.log("I am in if loop")
                    clearInterval(interval);
                }
            }, 1000);

        });
    </script>
    <!--Div that will hold the bar chart-->
    <div id="chart"></div>
    <script type="text/javascript">

        // Load the Visualization API and the corechart package.
        google.charts.load('current', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
            var data = google.visualization.arrayToDataTable([
              ['Alert', 'Areas', { role: 'style' }],
              ['Green', 115, '#2AAD27'],
              ['Blue', 34, '#2A81CB'],
              ['Yellow', 36, '#FFD326'],
              ['Amber', 4, '#CB8427' ],
              ['Red', 4, '#CB2B3E' ],
            ]);

            // Create view for data label
            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                             { calc: "stringify",
                               sourceColumn: 1,
                               type: "string",
                               role: "annotation" },
                           2]);

            // Set chart options
            var options = {
                'title': 'Effected Locations By Colour',
                'titleTextStyle': {
                                    'color': '#000000',
                                    'fontSize': '18',
                                    'bold': 'true'
                            },
                'hAxis': {
                            textStyle: {
                                fontSize : 12
                            },
                            title: 'No. Of Alerts'
                        },
                'vAxis': {
                            textStyle: {
                                fontSize : 12
                            },
                            title: 'Intensity Of Alert'
                        },
                'legend': {'position': "none"},
                'bar': {'groupWidth': "95%"},
                'width': 500,
                'height': 390,
                'chartArea':{left:65,top:40,right:10,width:'60%',height:'75%'}
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart'));
            chart.draw(view, options);
        }
    </script>
</body>
</html>

Leave a Comment