D3 Examples - Sea Level Rise Visualization

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>Vis 725 Project - Global Warming and Sea Level Rise</title>
​
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            .box {
                height: 100%;
                width: 50%;
                float: left;
            }
            #panel {
                height: 100%;
                width: 100%;
            }
            #legend  {
                width: 50%;
                background-color: black;
                text-align: center;
            }
        </style>
    </head>
    <body onload="handleLoad()">
        <h1> Global Warming, Sea Level Rise and Household Income</h1>
        <p>
            Show Sea Level Rise<input type="checkbox"  id="seaLevelRiseCb" name="showSeaLevel" onclick="handleSeaLevelRise(this)">
            Show Income by Zip Code<input type="checkbox"  id="incomeCb" name="showIncome" onclick="handleIncome(this)">
            Projected Sea Level:  
            <select id="seaLevels" onchange="handleSeaLevel()">
                <option value="0m">0m</option>
                <option value="1m">1m</option>
                <option value="2m">2m</option>
                <option value="3m">3m</option>
                <option value="4m">4m</option>
                <option value="5m">5m</option>
                <option value="6m">6m</option>
            </select>
        <br>
        <div id="legend">
            <font color="#edf8fb">Income < $20,000, 
            <font color="#b2e2e2">$20,000 < Income < $40,000, 
            <font color="#66c2a4">$40,000 < Income < $60,000, 
            <font color="#238b45">Income > $60,000
        </div>
            <font color="black">
        <br>
        <div class="box" id="map"></div>
        <div class="box"><iframe id="panel" src=""></iframe></div>
        <script src="//maps.google.com/maps/api/js?sensor=true"></script>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script>
​
                // Create the Google Map
                var node = document.getElementById("map");
                var map = new google.maps.Map(node, {
                    zoom: 8,
                    center: new google.maps.LatLng(37.76487, -76.41948),
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                });
​
                var incomeLayer = "https://jamestiberiuseanes.github.io/IncomeMap6.kml";
                var startingLayer = "https://jamestiberiuseanes.github.io/SeaLevelMap0m-1.kml"
​
                var chesapeakeMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(36.9736644, -76.1095),
                    map: map,
                    label: 'Chesapeake Bay Bridge Tunnel',
                    title: 'Chesapeake Bay Bridge Tunnel'
                });
                chesapeakeMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/Jamestiberiuseanes/jamestiberiuseanes.github.io/master/infovis/chesapeake.html';
                });
​
                var kiptopekeMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.17378, -75.9749),
                    map: map,
                    label: 'Kiptopeke',
                    title: 'Kiptopeke'
                });
                kiptopekeMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/kiptopeke.html';
                });
​
                var lewisettaMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.99791, -76.4627),
                    map: map,
                    label: 'Lewisetta',
                    title: 'Lewisetta'
                });
                lewisettaMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/lewisette.html';
                });
​
                var sewellsMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(36.95487, -76.3269),
                    map: map,
                    label: 'Sewells Point',
                    title: 'Sewells Point'
                });
                sewellsMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/sewellsPoint.html';
                });
​
                var wachaMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.6043, -75.6897),
                    map: map,
                    label: 'Wachapreague',
                    title: 'Wachapreague'
                });
                wachaMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/infovis/wachapreague.html';
                });
​
                var colonialMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(38.25457, -76.9636),
                    map: map,
                    label: 'Colonial Beach',
                    title: 'Colonial Beach'
                });
                colonialMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/last2/colonialBeach.html';
                });
​
                var gloucesterMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.25403, -76.4969),
                    map: map,
                    label: 'Gloucester Point',
                    title: 'Gloucester Point'
                });
                gloucesterMarker.addListener('click', function () {
                    var frame = document.getElementById("panel");
                    frame.src = 'https://cdn.rawgit.com/manojchandrak/vischarts/master/last2/gloucesterPoint.html';
                });
​
                var seaLevelOverlay = new google.maps.KmlLayer({
                    /*url: startingLayer,*/
                    map: map
                });
​
                var incomeOverlay = new google.maps.KmlLayer({
                    /*url: startingLayer,*/
                    map: map
                });
​
                function addSeaLevelOverlay(layer) {
                    seaLevelOverlay.setMap(null);
                    seaLevelOverlay = new google.maps.KmlLayer({
                        preserveViewport: true,
                        url: layer,
                        map: map,
                    });
                }
​
                function addIncomeOverlay(layer) {
                    incomeOverlay.setMap(null);
                    incomeOverlay = new google.maps.KmlLayer({
                        preserveViewport: true,
                        url: layer,
                        map: map,
                    });
                }
​
                function handleIncome(cb) {
                    incomeOverlay.setMap(null);
                    seaLevelOverlay.setMap(null);
                    if (cb.checked) {
                        addIncomeOverlay(incomeLayer);
                    }
                    var slrCb = document.getElementById("seaLevelRiseCb");
                    if (slrCb.checked) {
                        sl = document.getElementById("seaLevels");
                        var y = sl.options[sl.selectedIndex].value;
                        var layer = "https://jamestiberiuseanes.github.io/SeaLevelMap" + y + "-1.kml";
                        addSeaLevelOverlay(layer);
                    }
                    alert("setting:  " + zoomLevel);
                }
​
                function handleSeaLevelRise(cb) {
                    incomeOverlay.setMap(null);
                    seaLevelOverlay.setMap(null);
                    if (cb.checked) {
                        var sl = document.getElementById("seaLevels");
                        var y = sl.options[sl.selectedIndex].value;
                        var layer = "https://jamestiberiuseanes.github.io/SeaLevelMap" + y + "-1.kml";
                        addSeaLevelOverlay(layer);
                    }
                    var iCb = document.getElementById("incomeCb");
                    if (iCb.checked) {
                        addIncomeOverlay(incomeLayer);
                    }
                }
​
                function handleSeaLevel() {
                    var x = document.getElementById("seaLevels").value;
                    var layer = "https://jamestiberiuseanes.github.io/SeaLevelMap" + x + "-1.kml";
                    seaLevelOverlay.setMap(null);
                    addSeaLevelOverlay(layer);
                }
​
                function handleLoad() {
//                    overlay.setMap(null);
                    map.setZoom(8);
                }
​
        </script>
    </body>
</html>
    