Space Apps Challenge 2018

Space Chimps | Spot That Fire!

São Paulo

Updates

Project

Members

Team Updates

The Space Hero Project

Our project aims to implement a method of fire alerts (and other risk situations) using crowdsourcing to report a possible disaster, if possible by sending a photo, to be validated by the Google Cloud Vision API and other users. The big goal, is through crowdsourcing sources (from Space Hero and other sources), mapping risk situations, assessing the extent of risk based on NASA data, and returning to users who are included in the calculated risk area alert to Evacuation, Detour, or Relief Action.

Our main objective, following the S.M.A.R.T. concept, has as main metric to decrease the alert time of a few hours, to less than 10 minutes, setting a responsiveness of almost in "real time". Depending on the affected area and the weather conditions at the time of the alert, the impact to be avoided can be Millions of KM2, Millions of dollars, affecting up to hundreds or thousands of people (when urban area ).

Key features: Voluntary fire or accident event reporting in "real time" (using mobile peer-to-peer networks), seeking confirmation of the event with nearby users, crossing with satellite images; set up simultaneous or historical fire reports; notification of the group of users that are within the radius of the risk area (not the whole community), calculating the potential impact of the event; tracking and viewing of images; potentially, extend the application logic to other types of events.

The solution, developed as a Web App (portal and mobile), has a simple interface, and promotes people's engagement through a communication focused on the "hero", with points of advantages that can be exchanged for credits, gifts or donations. The relevance of the solution is based on shocking stories around the world, such as disasters in California and Portugal, in our Cerrado Brasileiro, Mariana-MG and other cases. They are thousands of annual occurrences, with destructive potential of areas equivalent to states, with Billions of losses and hundreds of lost human lives, and ecological, economic and social damages. We take advantage of NASA's spatial data solutions.

Complementing scope-focused development, we are preparing an Emotional Advertising Campaign to engage people.

Alexandre Barbosa

      
        function initMap() {
      
          var map = new google.maps.Map(document.getElementById('map'), {
      
            zoom: 3,
      
            center: {lat: -28.024, lng: 140.887}
      
          });
      
          // Create an array of alphabetical characters used to label the markers.
      
          var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      
          // Add some markers to the map.
      
          // Note: The code uses the JavaScript Array.prototype.map() method to
      
          // create an array of markers based on a given "locations" array.
      
          // The map() method here has nothing to do with the Google Maps API.
      
          var markers = locations.map(function(location, i) {
      
            return new google.maps.Marker({
      
              position: location,
      
              label: labels[i % labels.length]
      
            });
      
          });
      
          // Add a marker clusterer to manage the markers.
      
          var markerCluster = new MarkerClusterer(map, markers,
      
              {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      
        }
      
          var locations = [
      
        {lat: -9.881, lng: -36.23},
      
        {lat: -9.442, lng: -35.849},
      
        {lat: -30.166, lng: -55.003},
      
        {lat: -30.167, lng: -55.02},
      
        {lat: -23.625, lng: -49.041},
      
        {lat: -20.087, lng: -54.659},
      
        {lat: -20.088, lng: -54.671},
      
        {lat: -12.36, lng: -49.799},
      
        {lat: -12.344, lng: -49.808},
      
        {lat: -11.056, lng: -56.306},
      
        {lat: -11.058, lng: -56.316},
      
        {lat: -11.045, lng: -56.296},
      
        {lat: -11.047, lng: -56.307},
      
        {lat: -11.048, lng: -56.318},
      
        {lat: -5.506, lng: -47.614},
      
        {lat: -5.502, lng: -47.62},
      
        {lat: -4.692, lng: -45.496},
      
        {lat: -4.688, lng: -45.504},
      
        {lat: -4.885, lng: -47.734},
      
        {lat: -4.414, lng: -46.294},
      
        {lat: -4.398, lng: -46.297},
      
        {lat: -4.179, lng: -48.582},
      
        {lat: -4.18, lng: -48.566},
      
        {lat: -4.023, lng: -50.238},
      
        {lat: -4.011, lng: -50.239},
      
        {lat: -4.012, lng: -50.474},
      
        {lat: -3.826, lng: -50.068},
      
        {lat: -3.649, lng: -50.271},
      
        {lat: -3.637, lng: -50.273},
      
        {lat: -3.64, lng: -50.288},
      
        {lat: -3.7, lng: -51.08},
      
        {lat: -3.496, lng: -50.104},
      
        {lat: -3.482, lng: -50.172},
      
        {lat: -3.488, lng: -50.177},
      
        {lat: -3.435, lng: -50.528},
      
        {lat: -3.889, lng: -53.663},
      
        {lat: -3.382, lng: -50.249},
      
        {lat: -3.282, lng: -50.064},
      
        {lat: -3.286, lng: -50.053},
      
        {lat: -3.288, lng: -50.069},
      
        {lat: -3.259, lng: -49.954},
      
        {lat: -3.227, lng: -50.146},
      
        {lat: -3.229, lng: -50.162},
      
        {lat: -3.316, lng: -50.809},
      
        {lat: -3.221, lng: -50.153},
      
        {lat: -3.315, lng: -50.801},
      
        {lat: -3.718, lng: -53.75},
      
        {lat: -3.766, lng: -54.082},
      
        {lat: -2.916, lng: -48.621},
      
        {lat: -2.802, lng: -48.718},
      
        {lat: -3.335, lng: -52.436},
      
        {lat: -3.325, lng: -52.438},
      
        {lat: -3.48, lng: -53.949},
      
        {lat: -3.481, lng: -53.958},
      
        {lat: -3.314, lng: -53.063},
      
        {lat: -2.563, lng: -48.104},
      
        {lat: -2.566, lng: -48.129},
      
        {lat: -3.42, lng: -53.86},
      
        {lat: -2.559, lng: -48.112},
      
        {lat: -2.563, lng: -48.136},
      
        {lat: -3.331, lng: -53.948},
      
        {lat: -2.898, lng: -51.475},
      
        {lat: -3.152, lng: -55.839},
      
        {lat: -2.082, lng: -52.036},
      
        {lat: -2.084, lng: -52.049},
      
        {lat: -1.814, lng: -53.807},
      
        {lat: -1.854, lng: -55.258},
      
        {lat: -1.63, lng: -54.007},
      
        {lat: -1.631, lng: -54.017},
      
        {lat: 1.855, lng: -50.504},
      
        {lat: 1.852, lng: -50.522},
      
        {lat: 1.855, lng: -50.51},
      
        {lat: 1.832, lng: -55.865},
      
        {lat: 1.831, lng: -55.874},
      
        {lat: 4.52, lng: -55.391},
      
        {lat: -34.108, lng: -70.461},
      
        {lat: -33.77, lng: -70.926},
      
        {lat: -52.878, lng: -68.86},
      
        {lat: -9.874, lng: -36.216},
      
        {lat: -25.442, lng: -42.746},
      
        {lat: -2.01, lng: -78.336},
      
        {lat: -2, lng: -78.338},
      
        {lat: 1.872, lng: -55.813},
      
        {lat: -0.802, lng: -47.195},
      
        {lat: -0.805, lng: -47.174},
      
        {lat: -1.951, lng: -50.731},
      
        {lat: -2.563, lng: -48.12},
      
        {lat: -2.566, lng: -48.101},
      
        {lat: -1.813, lng: -53.808},
      
        {lat: -2.079, lng: -52.041},
      
        {lat: -2.088, lng: -52.042},
      
        {lat: -2.915, lng: -48.609},
      
        {lat: -3.255, lng: -48.938},
      
        {lat: -3.248, lng: -48.942},
      
        {lat: -3.25, lng: -48.926},
      
        {lat: -3.329, lng: -52.437},
      
        {lat: -3.636, lng: -50.276},
      
        {lat: -3.638, lng: -50.262},
      
        {lat: -3.649, lng: -50.264},
      
        {lat: -3.921, lng: -49.147},
      
        {lat: -3.923, lng: -49.131},
      
        {lat: -3.696, lng: -51.075},
      
        {lat: -4.396, lng: -46.284},
      
        {lat: -4.411, lng: -46.285},
      
        {lat: -4.408, lng: -46.292},
      
        {lat: -4.411, lng: -46.264},
      
        {lat: -3.416, lng: -53.859},
      
        {lat: -3.802, lng: -51.265},
      
        {lat: -3.478, lng: -53.947},
      
        {lat: -4.691, lng: -45.494},
      
        {lat: -3.889, lng: -51.872},
      
        {lat: -17.662, lng: -60.909},
      
        {lat: -17.664, lng: -60.897},
      
        {lat: -17.666, lng: -60.885},
      
        {lat: -18.033, lng: -61.823},
      
        {lat: -18.035, lng: -61.809},
      
        {lat: -21.177, lng: -55.59},
      
        {lat: -23.049, lng: -53.019},
      
        {lat: -30.577, lng: -59.464},
      
        {lat: -30.579, lng: -59.453},
      
        {lat: 11.623, lng: -70.208},
      
        {lat: -2.001, lng: -78.331},
      
        {lat: -8.207, lng: -38.657},
      
        {lat: -7.333, lng: -44.897},
      
        {lat: -7.336, lng: -44.878},
      
        {lat: -7.334, lng: -44.883},
      
        {lat: -9.054, lng: -35.696},
      
        {lat: -8.013, lng: -43.056},
      
        {lat: -8.016, lng: -43.048},
      
        {lat: -9.215, lng: -35.636},
      
        {lat: -9.217, lng: -35.624},
      
        {lat: -10.076, lng: -42.212},
      
        {lat: -10.076, lng: -42.206},
      
        {lat: -10.661, lng: -40.788},
      
        {lat: -10.86, lng: -40.08},
      
        {lat: -10.912, lng: -40.103},
      
        {lat: -10.89, lng: -41.043},
      
        {lat: -11.4, lng: -42.386},
      
        {lat: -11.995, lng: -38.438},
      
        {lat: -11.495, lng: -42.429},
      
        {lat: -11.595, lng: -42.77},
      
        {lat: -11.597, lng: -42.758},
      
        {lat: -11.812, lng: -42.436},
      
        {lat: -11.949, lng: -42.155},
      
        {lat: -11.95, lng: -42.144},
      
        {lat: -12.131, lng: -41.052},
      
        {lat: -12.234, lng: -40.916},
      
        {lat: -12.357, lng: -40.167},
      
        {lat: -12.359, lng: -40.158},
      
        {lat: -12.065, lng: -42.19},
      
        {lat: -12.078, lng: -42.237},
      
        {lat: -12.302, lng: -40.78},
      
        {lat: -12.622, lng: -40.854},
      
        {lat: -12.623, lng: -40.845},
      
        {lat: -12.538, lng: -42.243},
      
        {lat: -12.575, lng: -42.335},
      
        {lat: -12.092, lng: -45.496},
      
        {lat: -12.096, lng: -45.478},
      
        {lat: -12.817, lng: -41.26},
      
        {lat: -12.875, lng: -42.313},
      
        {lat: -12.322, lng: -45.846},
      
        {lat: -12.322, lng: -45.853},
      
        {lat: -13.596, lng: -39.825},
      
        {lat: -13.939, lng: -39.996},
      
        {lat: -14.292, lng: -41.442},
      
        {lat: -13.933, lng: -45.823},
      
        {lat: -14.052, lng: -45.667},
      
        {lat: -24.201, lng: -49.176},
      
        {lat: -25.606, lng: -42.824},
      
        {lat: -2.399, lng: -44.913},
      
        {lat: -2.402, lng: -44.919},
      
        {lat: -3.543, lng: -39.774},
      
        {lat: -3.545, lng: -39.764},
      
        {lat: -3.105, lng: -43.247},
      
        {lat: -3.108, lng: -43.255}
      
        ]
      
        $(document).ready(function(){
      
          $(".login-toggle").click(function(){
      
            $(".content-login-v2").toggle(400);
      
          });
      
          $(".ham").click(function(){
      
            $("ul.nav.navbar-nav").toggle(400);
      
            $(".navbar-header span p").toggle(50);
      
          });
      
        });

view raw default.heatmap.js hosted with ❤ by GitHub

      
        var locX, locY = 0;
      
        $(document).ready(function(){
      
          $(".login-toggle").click(function(){
      
            $(".content-login-v2").toggle(400);
      
          });
      
          $(".ham").click(function(){
      
            $("ul.nav.navbar-nav").toggle(400);
      
            $(".navbar-header span p").toggle(50);
      
          });
      
         var cont1 = $( "p.infocord" );
      
                var arry = [];
      
                for ( var i = 1; i < cont1.length + 1; i++ ) {
      
                    arry.push({
      
                       lat: parseFloat($("p.infocord:nth-of-type(" + i + ")").text()),
      
                       lng: parseFloat($("span.cord2:nth-of-type(" + i + ")").text())
      
                    });
      
                  }
      
                console.log(arry)
      
        //Get user location 
      
        navigator.geolocation.watchPosition(logPosition);
      
        function logPosition(position) {
      
          // console.log(position);
      
          // log(aaa);
      
          var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};
      
          locX = position.coords.latitude;
      
          locY = position.coords.longitude;
      
          map = new google.maps.Map(document.getElementById('map'), {
      
          center: uluru,
      
          zoom: 14
      
          });
      
          var marker = new google.maps.Marker({
      
            position: uluru,
      
             map: map
      
           });
      
           // Create an array of alphabetical characters used to label the markers.
      
                var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      
                // Add some markers to the map.
      
                // Note: The code uses the JavaScript Array.prototype.map() method to
      
                // create an array of markers based on a given "locations" array.
      
                // The map() method here has nothing to do with the Google Maps API.
      
                var markers = locations.map(function(location, i) {
      
                  return new google.maps.Marker({
      
                    position: location,
      
                    label: labels[i % labels.length]
      
                  });
      
                });
      
                // Add a marker clusterer to manage the markers.
      
                var markerCluster = new MarkerClusterer(map, markers,
      
                    {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      
              }
      
              var locations = arry;
      
        });
      
        $(document).on('click','#reportbtn',function(e) {
      
          var data ="Cli_CoordX=" + locX + "&" + "Cli_CoordY=" + locY;
      
          console.log(data)
      
          $.ajax({
      
                 data: data,
      
                 type: "post",
      
                 url: "insert.php",
      
                 success: function(data){
      
                      alert("Data Save: " + locX);
      
                 }
      
        });
      
         });

view raw default.js hosted with ❤ by GitHub

      
        <!DOCTYPE html>
      
        <html>
      
          <head>
      
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      
            <meta charset="utf-8">
      
            <title>Space Hero</title>
      
            <meta charset="utf-8">
      
          <meta name="viewport" content="width=device-width, initial-scale=1">
      
          <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/3.3.1/jquery.min.js"></script>
      
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
          <!--Maps--->
      
              <script src="defaultheatmap.js"></script>
      
              <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
      
            <script>
      
            window.dataLayer = window.dataLayer || [];
      
            function gtag() {
      
              window.dataLayer.push(arguments);
      
            }
      
            gtag('js', new Date());
      
            gtag('config', 'UA-33848682-1');
      
            </script>
      
            <meta charset="utf-8">
      
            <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
      
            <meta name="author" content="//samdutton.com">
      
            <meta name="viewport" content="width=device-width, initial-scale=1">
      
            <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
      
            <meta itemprop="image" content="/images/icons/icon192.png">
      
            <meta id="theme-color" name="theme-color" content="#fff">
      
          <link rel="stylesheet" type="text/css" href="home.css">
      
            <style>
      
              /* Always set the map height explicitly to define the size of the div
      
               * element that contains the map. */
      
              #map {
      
                height: 100%;
      
              }
      
              /* Optional: Makes the sample page fill the window. */
      
              html, body {
      
                height: 100%;
      
                margin: 0;
      
                padding: 0;
      
              }
      
            </style>
      
          </head>
      
          <body>
      
            <?php
      
              $servername = "localhost";
      
              $username = "id7311462_ericmizuta";
      
              $password = "eric1234";
      
              $dbname   = "id7311462_spacechimps";
      
              // Create connection
      
              $conn = new mysqli($servername, $username, $password, $dbname);
      
              // Check connection
      
              if ($conn->connect_error) {
      
                  die("Connection failed: " . $conn->connect_error);
      
              } 
      
              $sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";
      
              $result = $conn->query($sql);
      
              if ($result->num_rows > 0) {
      
                  // output data of each row
      
                  while($row = $result->fetch_assoc()) {
      
                      echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
      
                      echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";
      
                  }
      
              } else {
      
                  echo "0 results";
      
              }
      
              $conn->close();
      
            ?>
      
        <nav class="navbar navbar-inverse">
      
          <div class="container-fluid">
      
            <div class="navbar-header">
      
              <a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
      
              <span><p>Space Hero</p></span>
      
              <div class="ham">
      
                  <img src="hamburger.png" width="40px" height="40px">
      
              </div>
      
            </div>
      
            <ul class="nav navbar-nav">
      
              <li class="active"><a href="#">Space Hero</a></li>
      
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
      
                <ul class="dropdown-menu">
      
                  <li><a href="#"> Wildfire in your location  </a></li>
      
                  <li><a href="#"> Nacional records </a></li>
      
                  <li><a href="#"> Environmental impact </a></li>
      
                </ul>
      
              </li>
      
              <li><a href="#">Ranking</a></li>
      
              <li><a href="#">About us</a></li>
      
            </ul>
      
            <ul class="nav navbar-nav navbar-right">
      
              <li class="login-toggle">
      
                <a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
      
              </li>
      
              <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      
            </ul>
      
            <div class="content-login-v2" style="display: none;">
      
                  <div class="center-content-login"> 
      
                          <div class="login-modal">
      
                              <h2 class="title-login">Create your new account</h2>
      
                              <h3 class="sub-title-login"></h3>
      
                              <div class="email-box"> 
      
                                <p>Enter your E-mail </p>
      
                                <input name="email" id="email" title="Email" value="" type="text">
      
                              </div>
      
                              <div class="password-box"> 
      
                                  <p> Enter your Password </p>
      
                                  <input name="email" id="email" title="Email" value="" type="text">
      
                                  <button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
      
                              </div>
      
                              <p class="style-line"><span>Login with</span></p>
      
                          </div>
      
                          <div class="login-buttons">
      
                              <button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
      
                              <button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
      
                          </div>
      
                          <a href="#" class="help">Need help?</a>
      
                    </div>
      
                  </div>
      
          </div>
      
        </nav>
      
          <h4> Be a hero, the word need you!</h4>
      
            <p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he needs you to exist. </p>
      
        <p class="botoesemergencia">
      
         <button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button> 
      
            <button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
      
        </p>
      
        <div class="container">
      
            <div class="mapa">
      
              <div id="map" style="width:100%;height:400px;"></div>
      
            </div>
      
        </div>
      
        <div class="container fotos-funcionalidade">
      
          <h2 class="progress-title">Coming soon</h2>
      
              <div class="logos">
      
                <img class="col-xs-4" src="pinwind.png">
      
                <img class="col-xs-4" src="aquapin.jpg">
      
                <img class="col-xs-4" src="pinthiev.png">
      
              </div>
      
        </div>
      
        <div class="container">
      
          <h2>Progress Bar With Label</h2>
      
          <div class="progress">
      
            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      
              70%
      
            </div>
      
          </div>
      
        </div>
      
        <div class="container footer-container">
      
          <div class="col-xs-12 col-md-3 footer-imagem">
      
            <img class="foto-nasa" src="nasa.jpg" width="200" height="200">
      
          </div>
      
          <div class="col-xs-12 col-md-9 footer-developers">
      
            <div class="footer-time">
      
              <h4>Developed by:</h4>
      
              <p>Alex Barbosa</p>
      
              <p>Eric Mizuta</p>
      
              <p>Luiz Guilherme</p>
      
              <p>Marcos Ewbank</p>
      
              <p>Otavio Glycerio</p>
      
            </div>  
      
              <div class="footer-texto">
      
                <h4>SpaceChimps</h4>
      
                <p>#SpaceAppsSP</p>
      
                <p>#SpaceApps</p>
      
              </div>
      
          </div>
      
        </div>
      
            <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
      
            </script>
      
            <script async defer
      
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
      
            </script>
      
          </body>
      
        </html>

view raw heatmap.php hosted with ❤ by GitHub

      
        body{
      
            background-color:#fff;
      
            color: white;
      
        }
      
        p {
      
            width: 19%;
      
            display: inline-block;
      
            text-align: center;
      
            float: none;
      
            font-size: 17.7px;
      
            text-align: center;
      
            color: black;
      
        }
      
        h4 {
      
        text-align: center;
      
            color: black;
      
            font-size: 30px;
      
        }
      
        .footer-container {
      
            border-top: 1px solid #ccc;
      
        }
      
        .progress-bar {
      
            background: #FF8F30;
      
        }
      
        h2.progress-title {
      
            text-align: center;
      
            color: black;
      
        }
      
        .footer-imagem {
      
            display: inline-flex;
      
        }
      
        .footer-imagem img{
      
            display: block;
      
            margin: auto;
      
        }
      
        .footer-imagem h4 {
      
            width: 100%;
      
        }
      
        .footer-imagem p {
      
            width: 40%;
      
        }
      
        img.logo2img {
      
            position: relative;
      
            left: 50%;
      
            margin-left: -125px;
      
            width: 250px;
      
        }
      
        p.botoesemergencia {
      
            width: 100%;
      
        }
      
        p.space-hero {
      
            width: 100%;
      
        }
      
        p.infocord{
      
            display:none;
      
        }
      
        span.cord2{
      
            display: none;
      
        }
      
        .navbar-brand>img {
      
            position: relative;
      
            display: block;
      
            top: -11px;
      
        }
      
        .navbar-nav li:hover .content-login-v2 {
      
            display:block;
      
        }
      
         .container{
      
        	margin: 10px auto;
      
        }
      
         h2.title-login{
      
        	    font-size: 27px;
      
            color: white;
      
            margin-top: 70px;
      
            margin-bottom: 30px;
      
            position: relative;
      
        }
      
         h3.sub-title-login{
      
        	font-size: 16px;
      
        	color: white;
      
        	margin-bottom: 15px;
      
        }
      
        .content-login-v2 {
      
            float: left !important;
      
            width: 100% !important;
      
            margin-top: 20px;
      
            margin-bottom: 40px;
      
        }
      
        .ham {
      
            height: 50px;
      
            display: block;
      
            float: right;
      
        }
      
        .ham img{
      
            height: 50px;
      
            margin-right: 10px;
      
        }
      
         .btn-back-v2{
      
        float: left;
      
        margin-top: 20px;
      
        color: #b3b3b3;
      
        text-decoration: underline;
      
        font-weight: 600;
      
        }
      
         input,
      
         .btn-loginv2{
      
        width: 50%;
      
        }
      
         input{
      
        border-radius: 4px;
      
        margin-bottom: 15px;
      
        height: 40px;
      
        padding-left: 10px;
      
        }
      
         .btn-loginv2{border-color: #FF8F30;padding: 11.5px;color: #fff;font-size: 15px;line-height: 15px;font-family: Arial;font-weight: 700;box-shadow: 0 3px 0 0 #007299;background-color: #FF8F30;border-color: #f68e1e;border-radius: 4px;margin-bottom: 15px;box-shadow: none;}
      
         .center-content-login{float: none;text-align: center;border: 1px solid #00000000;border-radius:4px;border: 1px solid;width: 700px;position: relative;background: #080808;left: 50%;margin-left: -350px;}
      
         .login-modal p{
      
        color: white;
      
        font-size: 14px;
      
        line-height: 18px;
      
        padding: 0 30px;
      
        }
      
         .login-modal .style-line,
      
          .line{
      
        color: #7e7e7e;
      
        }
      
         .login-modal .style-line{margin-bottom: 0;padding: 10px 20px;}
      
         .login-modal .style-line span{color:#f68e1e;position: relative;padding: 0px 30px;}
      
         .login-modal .line{
      
        padding: 0;
      
        }
      
         .login-buttons{padding: 0px 70px;}
      
         .login-buttons .button{
      
        width: 60%;
      
        height: 40px;
      
        margin: 5px 0;
      
        font-size: 14px;
      
        color: #fff;
      
        letter-spacing: 0.3px;
      
        font-weight: 600;
      
        }
      
         .login-buttons .button.facebook-login{
      
        background-color: #3c5898;
      
        }
      
         .login-buttons .button.facebook-login span{
      
        float: left;
      
        width: 20%;
      
        border-right: 1px solid #fff;
      
        }
      
         .login-buttons .button.facebook-login svg{
      
        fill: #fff;
      
        float: left;
      
        }
      
         .login-buttons .button.gmail-login{
      
        background-color: #d44638;
      
        }
      
         .login-buttons .button.gmail-login span{
      
        float: left;
      
        width: 20%;
      
        border-right: 1px solid #fff;
      
        }
      
         .login-buttons .button.gmail-login svg{
      
        fill: #fff;
      
        float: left;
      
        }
      
         .center-content-login a.help{
      
        color: #f68e1e;
      
        margin: 10px 0;
      
        display: block;
      
        }
      
        @media (max-width: 768px){
      
            ul.nav.navbar-nav{
      
                display: none;
      
            }
      
            .navbar-header span p{
      
                color: #fff;
      
                float: left;
      
                margin: 15px 0 0 -10px;
      
            }
      
        }
      
        @media (min-width: 768px){
      
            .ham {
      
                display: none;
      
            }
      
            .navbar-header span p{
      
                display: none;
      
            }
      
        }
      
         .center-content-login a.help{color: #f68e1e;margin: 10px 0;display: block;}
      
         .footer-texto {
      
            text-align: center;
      
        }

view raw home.css hosted with ❤ by GitHub

      
        <!DOCTYPE html>
      
        <html>
      
          <head>
      
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      
            <meta charset="utf-8">
      
            <title>Space Hero</title>
      
            <meta charset="utf-8">
      
          <meta name="viewport" content="width=device-width, initial-scale=1">
      
          <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/3.3.1/jquery.min.js"></script>
      
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
          <!--Maps--->
      
              <script src="default.js"></script>
      
              <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
      
            <script>
      
            window.dataLayer = window.dataLayer || [];
      
            function gtag() {
      
              window.dataLayer.push(arguments);
      
            }
      
            gtag('js', new Date());
      
            gtag('config', 'UA-33848682-1');
      
            </script>
      
            <meta charset="utf-8">
      
            <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
      
            <meta name="author" content="//samdutton.com">
      
            <meta name="viewport" content="width=device-width, initial-scale=1">
      
            <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
      
            <meta itemprop="image" content="/images/icons/icon192.png">
      
            <meta id="theme-color" name="theme-color" content="#fff">
      
          <link rel="stylesheet" type="text/css" href="home.css">
      
            <style>
      
              /* Always set the map height explicitly to define the size of the div
      
               * element that contains the map. */
      
              #map {
      
                height: 100%;
      
              }
      
              /* Optional: Makes the sample page fill the window. */
      
              html, body {
      
                height: 100%;
      
                margin: 0;
      
                padding: 0;
      
              }
      
            </style>
      
          </head>
      
          <body>
      
            <?php
      
              $servername = "localhost";
      
              $username = "id7311462_ericmizuta";
      
              $password = "eric1234";
      
              $dbname   = "id7311462_spacechimps";
      
              // Create connection
      
              $conn = new mysqli($servername, $username, $password, $dbname);
      
              // Check connection
      
              if ($conn->connect_error) {
      
                  die("Connection failed: " . $conn->connect_error);
      
              } 
      
              $sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";
      
              $result = $conn->query($sql);
      
              if ($result->num_rows > 0) {
      
                  // output data of each row
      
                  while($row = $result->fetch_assoc()) {
      
                      echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
      
                      echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";
      
                  }
      
              } else {
      
                  echo "0 results";
      
              }
      
              $conn->close();
      
            ?>
      
        <nav class="navbar navbar-inverse">
      
          <div class="container-fluid">
      
            <div class="navbar-header">
      
              <a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
      
              <span><p>Space Hero</p></span>
      
              <div class="ham">
      
                  <img src="hamburger.png" width="40px" height="40px">
      
              </div>
      
            </div>
      
            <ul class="nav navbar-nav">
      
              <li class="active"><a href="#">Space Hero</a></li>
      
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
      
                <ul class="dropdown-menu">
      
                  <li><a href="#"> Wildfire in your location  </a></li>
      
                  <li><a href="#"> Nacional records </a></li>
      
                  <li><a href="#"> Environmental impact </a></li>
      
                </ul>
      
              </li>
      
              <li><a href="#">Ranking</a></li>
      
              <li><a href="#">About us</a></li>
      
            </ul>
      
            <ul class="nav navbar-nav navbar-right">
      
              <li class="login-toggle">
      
                <a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
      
              </li>
      
              <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      
            </ul>
      
            <div class="content-login-v2" style="display: none;">
      
                  <div class="center-content-login"> 
      
                          <div class="login-modal">
      
                              <h2 class="title-login">Create your new account</h2>
      
                              <h3 class="sub-title-login"></h3>
      
                              <div class="email-box"> 
      
                                <p>Enter your E-mail </p>
      
                                <input name="email" id="email" title="Email" value="" type="text">
      
                              </div>
      
                              <div class="password-box"> 
      
                                  <p> Enter your Password </p>
      
                                  <input name="email" id="email" title="Email" value="" type="text">
      
                                  <button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
      
                              </div>
      
                              <p class="style-line"><span>Login with</span></p>
      
                          </div>
      
                          <div class="login-buttons">
      
                              <button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
      
                              <button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
      
                          </div>
      
                          <a href="#" class="help">Need help?</a>
      
                    </div>
      
                  </div>
      
          </div>
      
        </nav>
      
          <h4> Be a hero, the world needs you!</h4>
      
            <p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he need you to exist. </p>
      
        <p class="botoesemergencia">
      
         <button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button> 
      
            <button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
      
            <a href="/heatmap.php" class="btn btn-warning">Recent wildfire</a>
      
        </p>
      
        <div class="container">
      
            <div class="mapa">
      
              <div id="map" style="width:100%;height:400px;"></div>
      
            </div>
      
        </div>
      
        <div class="container fotos-funcionalidade">
      
          <h2 class="progress-title">Coming soon</h2>
      
              <div class="logos">
      
                <img class="col-xs-4" src="pinwind.png">
      
                <img class="col-xs-4" src="aquapin.jpg">
      
                <img class="col-xs-4" src="pinthiev.png">
      
              </div>
      
        </div>
      
        <div class="container">
      
          <h2>Progress Bar With Label</h2>
      
          <div class="progress">
      
            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      
              70%
      
            </div>
      
          </div>
      
        </div>
      
        <div class="container footer-container">
      
          <div class="col-xs-12 col-md-3 footer-imagem">
      
            <img class="foto-nasa" src="nasa.jpg" width="200" height="200">
      
          </div>
      
          <div class="col-xs-12 col-md-9 footer-developers">
      
            <div class="footer-time">
      
              <h4>Developed by:</h4>
      
              <p>Alex Barbosa</p>
      
              <p>Eric Mizuta</p>
      
              <p>Luiz Guilherme</p>
      
              <p>Marcos Ewbank</p>
      
              <p>Otavio Glycerio</p>
      
            </div>  
      
              <div class="footer-texto">
      
                <h4>SpaceChimps</h4>
      
                <p>#SpaceAppsSP</p>
      
                <p>#SpaceApps</p>
      
              </div>
      
          </div>
      
        </div>
      
            <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
      
            </script>
      
            <script async defer
      
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
      
            </script>
      
          </body>
      
        </html>

view raw index.php hosted with ❤ by GitHub

      
        <?php
      
        if(isset($_REQUEST))
      
        {
      
        $servername = "localhost";
      
        $username = "id7311462_ericmizuta";
      
        $password = "eric1234";
      
        $dbname = "id7311462_spacechimps";
      
        // Create connection
      
        $conn = new mysqli($servername, $username, $password, $dbname);
      
        // Check connection
      
        if ($conn->connect_error) {
      
            die("Connection failed: " . $conn->connect_error);
      
        } 
      
          error_reporting(E_ALL && ~E_NOTICE);
      
        $Cli_CoordX=$_POST['Cli_CoordX'];
      
        $Cli_CoordY=$_POST['Cli_CoordY'];
      
        $sql = "INSERT INTO Cliente (Cli_CoordX, Cli_CoordY)
      
        VALUES ('$Cli_CoordX', '$Cli_CoordY');";
      
        if ($conn->multi_query($sql) === TRUE) {
      
            echo "New records created successfully";
      
        } else {
      
            echo "Error: " . $sql . "<br>" . $conn->error;
      
        }
      
        $conn->close();
      
        }
      
        ?>

view raw insert.php hosted with ❤ by GitHub

Eric Mizuta

Primeiro Wireframe

Luiz Guilherme Priolli

next project

Marcos André Suarez Ewbank

Jornada do Usuário

Luiz Guilherme Priolli

Versão final do segundo ícone

Luiz Guilherme Priolli

Pin da função de alagamento

Luiz Guilherme Priolli

Segunda Versão do ícone do web app

Luiz Guilherme Priolli

Luiz Guilherme Priolli

Layout Inicial da tela home do web app

Luiz Guilherme Priolli

Exemplo da progreção do avatar do usuário

Luiz Guilherme Priolli

Pin icônico do web app

Luiz Guilherme Priolli

Requisitos Funcionais

RF001 – Reportar uma ocorrência
RF002 - Notificar usuarios em local de risco
RF003 – Solicitar validação da ocorrência
RF004 – Definir qual é a gravidade da ocorrência
RF005 – Cadastrar usuário
RF006 – Definir local de residência do usuário
RF007 – Efetuar rankeamento do nível de contriuição dos usuários

Descrição do Processo

Um usuario deve selecionar seu local de residência ao fazer cadastro para receber os avisos de alerta da região.

Um usuário envia a denuncia de incêndio junto com suas coordenadas. As condições climáticas atuais são avaliadas para determinar o grau de perigo potencial do incêndio.Usuarios regionais normais de nível sênior recebem o alerta e validam ou não o incendio com acesso a imagens da região obtidas via satelite. Caso a denuncia seja validada uma notificação de incendio é enviada ao corpo de bombeiros local e a todos os usuarios da região.

A cada validação comprovada de incêndio um usuário ganha 5 pontos de respeito.
A cada denuncia validada de incêndio um usuário ganha 10 pontos de respeito.
Ao obter 15 pontos de respeito um usuário se torna usuário sênior acelerando o processo de validação.

A cada validação incorreta feita um usuario perde 10 pontos.
A cada denuncia falsa efetuada um usuario perde 15 pontos.
Um usuario não poderá fazer uma denuncia se possuir menos de -12 pontos.

No final do mês os dez usuários que mais auxiliaram no alerta de incidentes serão colocados no Hall da fama da página do Facebook do Projeto.

Luiz Guilherme Priolli

1a Entrega: CANVAS do Projeto da Aplicação!

Alexandre Barbosa

Encontramos nosso DESAFIO!!!

•CHALLENGES | VOLCANOES, ICEBERGS, AND ASTEROIDS (OH MY)

•Spot That Fire!

Otavio Glycerio

Organizando para o 1° Pitch - 20/10

Otavio Glycerio

Hora de validar "canvas" - 20/10

Otavio Glycerio

Brainstorming isano! 20/10

Otavio Glycerio

Criação do Grupo 20/10

Otavio Glycerio

SpaceApps is a NASA incubator innovation program.

	function initMap() {

	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 3,
	center: {lat: -28.024, lng: 140.887}
	});

	// Create an array of alphabetical characters used to label the markers.
	var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

	// Add some markers to the map.
	// Note: The code uses the JavaScript Array.prototype.map() method to
	// create an array of markers based on a given "locations" array.
	// The map() method here has nothing to do with the Google Maps API.
	var markers = locations.map(function(location, i) {
	return new google.maps.Marker({
	position: location,
	label: labels[i % labels.length]
	});
	});

	// Add a marker clusterer to manage the markers.
	var markerCluster = new MarkerClusterer(map, markers,
	{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
	}
	var locations = [
	{lat: -9.881, lng: -36.23},
	{lat: -9.442, lng: -35.849},
	{lat: -30.166, lng: -55.003},
	{lat: -30.167, lng: -55.02},
	{lat: -23.625, lng: -49.041},
	{lat: -20.087, lng: -54.659},
	{lat: -20.088, lng: -54.671},
	{lat: -12.36, lng: -49.799},
	{lat: -12.344, lng: -49.808},
	{lat: -11.056, lng: -56.306},
	{lat: -11.058, lng: -56.316},
	{lat: -11.045, lng: -56.296},
	{lat: -11.047, lng: -56.307},
	{lat: -11.048, lng: -56.318},
	{lat: -5.506, lng: -47.614},
	{lat: -5.502, lng: -47.62},
	{lat: -4.692, lng: -45.496},
	{lat: -4.688, lng: -45.504},
	{lat: -4.885, lng: -47.734},
	{lat: -4.414, lng: -46.294},
	{lat: -4.398, lng: -46.297},
	{lat: -4.179, lng: -48.582},
	{lat: -4.18, lng: -48.566},
	{lat: -4.023, lng: -50.238},
	{lat: -4.011, lng: -50.239},
	{lat: -4.012, lng: -50.474},
	{lat: -3.826, lng: -50.068},
	{lat: -3.649, lng: -50.271},
	{lat: -3.637, lng: -50.273},
	{lat: -3.64, lng: -50.288},
	{lat: -3.7, lng: -51.08},
	{lat: -3.496, lng: -50.104},
	{lat: -3.482, lng: -50.172},
	{lat: -3.488, lng: -50.177},
	{lat: -3.435, lng: -50.528},
	{lat: -3.889, lng: -53.663},
	{lat: -3.382, lng: -50.249},
	{lat: -3.282, lng: -50.064},
	{lat: -3.286, lng: -50.053},
	{lat: -3.288, lng: -50.069},
	{lat: -3.259, lng: -49.954},
	{lat: -3.227, lng: -50.146},
	{lat: -3.229, lng: -50.162},
	{lat: -3.316, lng: -50.809},
	{lat: -3.221, lng: -50.153},
	{lat: -3.315, lng: -50.801},
	{lat: -3.718, lng: -53.75},
	{lat: -3.766, lng: -54.082},
	{lat: -2.916, lng: -48.621},
	{lat: -2.802, lng: -48.718},
	{lat: -3.335, lng: -52.436},
	{lat: -3.325, lng: -52.438},
	{lat: -3.48, lng: -53.949},
	{lat: -3.481, lng: -53.958},
	{lat: -3.314, lng: -53.063},
	{lat: -2.563, lng: -48.104},
	{lat: -2.566, lng: -48.129},
	{lat: -3.42, lng: -53.86},
	{lat: -2.559, lng: -48.112},
	{lat: -2.563, lng: -48.136},
	{lat: -3.331, lng: -53.948},
	{lat: -2.898, lng: -51.475},
	{lat: -3.152, lng: -55.839},
	{lat: -2.082, lng: -52.036},
	{lat: -2.084, lng: -52.049},
	{lat: -1.814, lng: -53.807},
	{lat: -1.854, lng: -55.258},
	{lat: -1.63, lng: -54.007},
	{lat: -1.631, lng: -54.017},
	{lat: 1.855, lng: -50.504},
	{lat: 1.852, lng: -50.522},
	{lat: 1.855, lng: -50.51},
	{lat: 1.832, lng: -55.865},
	{lat: 1.831, lng: -55.874},
	{lat: 4.52, lng: -55.391},
	{lat: -34.108, lng: -70.461},
	{lat: -33.77, lng: -70.926},
	{lat: -52.878, lng: -68.86},
	{lat: -9.874, lng: -36.216},
	{lat: -25.442, lng: -42.746},
	{lat: -2.01, lng: -78.336},
	{lat: -2, lng: -78.338},
	{lat: 1.872, lng: -55.813},
	{lat: -0.802, lng: -47.195},
	{lat: -0.805, lng: -47.174},
	{lat: -1.951, lng: -50.731},
	{lat: -2.563, lng: -48.12},
	{lat: -2.566, lng: -48.101},
	{lat: -1.813, lng: -53.808},
	{lat: -2.079, lng: -52.041},
	{lat: -2.088, lng: -52.042},
	{lat: -2.915, lng: -48.609},
	{lat: -3.255, lng: -48.938},
	{lat: -3.248, lng: -48.942},
	{lat: -3.25, lng: -48.926},
	{lat: -3.329, lng: -52.437},
	{lat: -3.636, lng: -50.276},
	{lat: -3.638, lng: -50.262},
	{lat: -3.649, lng: -50.264},
	{lat: -3.921, lng: -49.147},
	{lat: -3.923, lng: -49.131},
	{lat: -3.696, lng: -51.075},
	{lat: -4.396, lng: -46.284},
	{lat: -4.411, lng: -46.285},
	{lat: -4.408, lng: -46.292},
	{lat: -4.411, lng: -46.264},
	{lat: -3.416, lng: -53.859},
	{lat: -3.802, lng: -51.265},
	{lat: -3.478, lng: -53.947},
	{lat: -4.691, lng: -45.494},
	{lat: -3.889, lng: -51.872},
	{lat: -17.662, lng: -60.909},
	{lat: -17.664, lng: -60.897},
	{lat: -17.666, lng: -60.885},
	{lat: -18.033, lng: -61.823},
	{lat: -18.035, lng: -61.809},
	{lat: -21.177, lng: -55.59},
	{lat: -23.049, lng: -53.019},
	{lat: -30.577, lng: -59.464},
	{lat: -30.579, lng: -59.453},
	{lat: 11.623, lng: -70.208},
	{lat: -2.001, lng: -78.331},
	{lat: -8.207, lng: -38.657},
	{lat: -7.333, lng: -44.897},
	{lat: -7.336, lng: -44.878},
	{lat: -7.334, lng: -44.883},
	{lat: -9.054, lng: -35.696},
	{lat: -8.013, lng: -43.056},
	{lat: -8.016, lng: -43.048},
	{lat: -9.215, lng: -35.636},
	{lat: -9.217, lng: -35.624},
	{lat: -10.076, lng: -42.212},
	{lat: -10.076, lng: -42.206},
	{lat: -10.661, lng: -40.788},
	{lat: -10.86, lng: -40.08},
	{lat: -10.912, lng: -40.103},
	{lat: -10.89, lng: -41.043},
	{lat: -11.4, lng: -42.386},
	{lat: -11.995, lng: -38.438},
	{lat: -11.495, lng: -42.429},
	{lat: -11.595, lng: -42.77},
	{lat: -11.597, lng: -42.758},
	{lat: -11.812, lng: -42.436},
	{lat: -11.949, lng: -42.155},
	{lat: -11.95, lng: -42.144},
	{lat: -12.131, lng: -41.052},
	{lat: -12.234, lng: -40.916},
	{lat: -12.357, lng: -40.167},
	{lat: -12.359, lng: -40.158},
	{lat: -12.065, lng: -42.19},
	{lat: -12.078, lng: -42.237},
	{lat: -12.302, lng: -40.78},
	{lat: -12.622, lng: -40.854},
	{lat: -12.623, lng: -40.845},
	{lat: -12.538, lng: -42.243},
	{lat: -12.575, lng: -42.335},
	{lat: -12.092, lng: -45.496},
	{lat: -12.096, lng: -45.478},
	{lat: -12.817, lng: -41.26},
	{lat: -12.875, lng: -42.313},
	{lat: -12.322, lng: -45.846},
	{lat: -12.322, lng: -45.853},
	{lat: -13.596, lng: -39.825},
	{lat: -13.939, lng: -39.996},
	{lat: -14.292, lng: -41.442},
	{lat: -13.933, lng: -45.823},
	{lat: -14.052, lng: -45.667},
	{lat: -24.201, lng: -49.176},
	{lat: -25.606, lng: -42.824},
	{lat: -2.399, lng: -44.913},
	{lat: -2.402, lng: -44.919},
	{lat: -3.543, lng: -39.774},
	{lat: -3.545, lng: -39.764},
	{lat: -3.105, lng: -43.247},
	{lat: -3.108, lng: -43.255}
	]


	$(document).ready(function(){

	$(".login-toggle").click(function(){
	$(".content-login-v2").toggle(400);
	});

	$(".ham").click(function(){
	$("ul.nav.navbar-nav").toggle(400);
	$(".navbar-header span p").toggle(50);
	});
	});




	var locX, locY = 0;


	$(document).ready(function(){

	$(".login-toggle").click(function(){
	$(".content-login-v2").toggle(400);
	});

	$(".ham").click(function(){
	$("ul.nav.navbar-nav").toggle(400);
	$(".navbar-header span p").toggle(50);
	});

	var cont1 = $( "p.infocord" );
	var arry = [];

	for ( var i = 1; i < cont1.length + 1; i++ ) {
	arry.push({
	lat: parseFloat($("p.infocord:nth-of-type(" + i + ")").text()),
	lng: parseFloat($("span.cord2:nth-of-type(" + i + ")").text())
	});
	}

	console.log(arry)

	//Get user location



	navigator.geolocation.watchPosition(logPosition);
	function logPosition(position) {
	// console.log(position);
	// log(aaa);

	var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};

	locX = position.coords.latitude;
	locY = position.coords.longitude;

	map = new google.maps.Map(document.getElementById('map'), {
	center: uluru,
	zoom: 14
	});

	var marker = new google.maps.Marker({
	position: uluru,
	map: map
	});

	// Create an array of alphabetical characters used to label the markers.
	var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

	// Add some markers to the map.
	// Note: The code uses the JavaScript Array.prototype.map() method to
	// create an array of markers based on a given "locations" array.
	// The map() method here has nothing to do with the Google Maps API.
	var markers = locations.map(function(location, i) {
	return new google.maps.Marker({
	position: location,
	label: labels[i % labels.length]
	});
	});

	// Add a marker clusterer to manage the markers.
	var markerCluster = new MarkerClusterer(map, markers,
	{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
	}
	var locations = arry;

	});



	$(document).on('click','#reportbtn',function(e) {
	var data ="Cli_CoordX=" + locX + "&" + "Cli_CoordY=" + locY;
	console.log(data)
	$.ajax({
	data: data,
	type: "post",
	url: "insert.php",
	success: function(data){
	alert("Data Save: " + locX);
	}
	});
	});

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Space Hero</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<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/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


	<!--Maps--->

	<script src="defaultheatmap.js"></script>

	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag() {
	window.dataLayer.push(arguments);
	}
	gtag('js', new Date());
	gtag('config', 'UA-33848682-1');
	</script>

	<meta charset="utf-8">
	<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
	<meta name="author" content="//samdutton.com">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
	<meta itemprop="image" content="/images/icons/icon192.png">
	<meta id="theme-color" name="theme-color" content="#fff">



	<link rel="stylesheet" type="text/css" href="home.css">

	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>

	<?php
	$servername = "localhost";
	$username = "id7311462_ericmizuta";
	$password = "eric1234";
	$dbname = "id7311462_spacechimps";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);

	// Check connection
	if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
	}


	$sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";

	$result = $conn->query($sql);

	if ($result->num_rows > 0) {
	// output data of each row
	while($row = $result->fetch_assoc()) {

	echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
	echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";

	}

	} else {
	echo "0 results";
	}
	$conn->close();
	?>


	<nav class="navbar navbar-inverse">
	<div class="container-fluid">
	<div class="navbar-header">
	<a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
	<span><p>Space Hero</p></span>
	<div class="ham">
	<img src="hamburger.png" width="40px" height="40px">
	</div>
	</div>
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Space Hero</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#"> Wildfire in your location </a></li>
	<li><a href="#"> Nacional records </a></li>
	<li><a href="#"> Environmental impact </a></li>
	</ul>
	</li>
	<li><a href="#">Ranking</a></li>
	<li><a href="#">About us</a></li>


	</ul>

	<ul class="nav navbar-nav navbar-right">
	<li class="login-toggle">
	<a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
	</li>

	<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
	</ul>

	<div class="content-login-v2" style="display: none;">
	<div class="center-content-login">
	<div class="login-modal">
	<h2 class="title-login">Create your new account</h2>
	<h3 class="sub-title-login"></h3>
	<div class="email-box">
	<p>Enter your E-mail </p>
	<input name="email" id="email" title="Email" value="" type="text">
	</div>
	<div class="password-box">
	<p> Enter your Password </p>
	<input name="email" id="email" title="Email" value="" type="text">
	<button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
	</div>
	<p class="style-line"><span>Login with</span></p>
	</div>
	<div class="login-buttons">
	<button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
	<button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
	</div>
	<a href="#" class="help">Need help?</a>
	</div>
	</div>
	</div>
	</nav>

	<h4> Be a hero, the word need you!</h4>
	<p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he needs you to exist. </p>

	<p class="botoesemergencia">
	<button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button>
	<button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
	</p>

	<div class="container">
	<div class="mapa">

	<div id="map" style="width:100%;height:400px;"></div>



	</div>
	</div>

	<div class="container fotos-funcionalidade">
	<h2 class="progress-title">Coming soon</h2>
	<div class="logos">
	<img class="col-xs-4" src="pinwind.png">
	<img class="col-xs-4" src="aquapin.jpg">
	<img class="col-xs-4" src="pinthiev.png">
	</div>
	</div>
	<div class="container">
	<h2>Progress Bar With Label</h2>
	<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
	70%
	</div>
	</div>
	</div>
	<div class="container footer-container">
	<div class="col-xs-12 col-md-3 footer-imagem">
	<img class="foto-nasa" src="nasa.jpg" width="200" height="200">
	</div>
	<div class="col-xs-12 col-md-9 footer-developers">
	<div class="footer-time">
	<h4>Developed by:</h4>
	<p>Alex Barbosa</p>
	<p>Eric Mizuta</p>
	<p>Luiz Guilherme</p>
	<p>Marcos Ewbank</p>
	<p>Otavio Glycerio</p>
	</div>
	<div class="footer-texto">
	<h4>SpaceChimps</h4>
	<p>#SpaceAppsSP</p>
	<p>#SpaceApps</p>
	</div>
	</div>
	</div>


	<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
	</script>
	</body>
	</html>

	body{
	background-color:#fff;
	color: white;
	}

	p {
	width: 19%;
	display: inline-block;
	text-align: center;
	float: none;
	font-size: 17.7px;
	text-align: center;
	color: black;
	}

	h4 {
	text-align: center;
	color: black;
	font-size: 30px;
	}
	.footer-container {
	border-top: 1px solid #ccc;
	}

	.progress-bar {
	background: #FF8F30;
	}

	h2.progress-title {
	text-align: center;
	color: black;
	}

	.footer-imagem {
	display: inline-flex;
	}

	.footer-imagem img{
	display: block;
	margin: auto;
	}

	.footer-imagem h4 {
	width: 100%;
	}

	.footer-imagem p {
	width: 40%;
	}

	img.logo2img {
	position: relative;
	left: 50%;
	margin-left: -125px;
	width: 250px;
	}

	p.botoesemergencia {
	width: 100%;
	}

	p.space-hero {
	width: 100%;
	}

	p.infocord{
	display:none;
	}
	span.cord2{
	display: none;
	}
	.navbar-brand>img {
	position: relative;
	display: block;
	top: -11px;
	}

	.navbar-nav li:hover .content-login-v2 {
	display:block;
	}

	.container{
	margin: 10px auto;
	}
	h2.title-login{
	font-size: 27px;
	color: white;
	margin-top: 70px;
	margin-bottom: 30px;
	position: relative;
	}
	h3.sub-title-login{
	font-size: 16px;
	color: white;
	margin-bottom: 15px;
	}

	.content-login-v2 {
	float: left !important;
	width: 100% !important;
	margin-top: 20px;
	margin-bottom: 40px;
	}
	.ham {
	height: 50px;
	display: block;
	float: right;
	}
	.ham img{
	height: 50px;
	margin-right: 10px;
	}

	.btn-back-v2{
	float: left;
	margin-top: 20px;
	color: #b3b3b3;
	text-decoration: underline;
	font-weight: 600;
	}
	input,
	.btn-loginv2{
	width: 50%;
	}
	input{
	border-radius: 4px;
	margin-bottom: 15px;
	height: 40px;
	padding-left: 10px;
	}
	.btn-loginv2{border-color: #FF8F30;padding: 11.5px;color: #fff;font-size: 15px;line-height: 15px;font-family: Arial;font-weight: 700;box-shadow: 0 3px 0 0 #007299;background-color: #FF8F30;border-color: #f68e1e;border-radius: 4px;margin-bottom: 15px;box-shadow: none;}
	.center-content-login{float: none;text-align: center;border: 1px solid #00000000;border-radius:4px;border: 1px solid;width: 700px;position: relative;background: #080808;left: 50%;margin-left: -350px;}
	.login-modal p{
	color: white;
	font-size: 14px;
	line-height: 18px;
	padding: 0 30px;
	}
	.login-modal .style-line,
	.line{
	color: #7e7e7e;
	}
	.login-modal .style-line{margin-bottom: 0;padding: 10px 20px;}
	.login-modal .style-line span{color:#f68e1e;position: relative;padding: 0px 30px;}
	.login-modal .line{
	padding: 0;
	}
	.login-buttons{padding: 0px 70px;}
	.login-buttons .button{
	width: 60%;
	height: 40px;
	margin: 5px 0;
	font-size: 14px;
	color: #fff;
	letter-spacing: 0.3px;
	font-weight: 600;
	}
	.login-buttons .button.facebook-login{
	background-color: #3c5898;
	}
	.login-buttons .button.facebook-login span{
	float: left;
	width: 20%;
	border-right: 1px solid #fff;
	}
	.login-buttons .button.facebook-login svg{
	fill: #fff;
	float: left;
	}
	.login-buttons .button.gmail-login{
	background-color: #d44638;
	}
	.login-buttons .button.gmail-login span{
	float: left;
	width: 20%;
	border-right: 1px solid #fff;
	}
	.login-buttons .button.gmail-login svg{
	fill: #fff;
	float: left;
	}
	.center-content-login a.help{
	color: #f68e1e;
	margin: 10px 0;
	display: block;
	}

	@media (max-width: 768px){
	ul.nav.navbar-nav{
	display: none;
	}
	.navbar-header span p{
	color: #fff;
	float: left;
	margin: 15px 0 0 -10px;
	}
	}

	@media (min-width: 768px){
	.ham {
	display: none;
	}
	.navbar-header span p{
	display: none;
	}
	}
	.center-content-login a.help{color: #f68e1e;margin: 10px 0;display: block;}

	.footer-texto {
	text-align: center;
	}