All examples By author By category About

alexsroth

Full window Github gist

hackarto vl early proto submission

<html>

<head>
    <title>haCkARTO VL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    
    <script src="https://cartodb.github.io/carto-vl/dist/carto-vl.js"></script>
    
    <script src="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
    
    <link href="https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
    <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans:300,400,700" rel="stylesheet">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="card text-white bg-dark mb-3">
              <h2 class="card-header">That's Hot</h2>
              <div class="card-body">
                <h5>Find the County!</h5>
                Enter your name, click start, and frantically try to find the "hottest" county by clicking, with styling as your guide to the heat. Think you found it? Click! <br><br> p.s. you're on the clock. good luck ;)
              </div>

</div>

<div class="form-row align-items-center">
                  <div class="col-sm-auto my-1">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control" placeholder="your name" id="username" oninput="hasUsername()">
                      <div class="input-group-append">
                        <button class="btn btn-outline-warning" type="button" onclick="startGame()" id="startButton" disabled>Start Game</button>
                      </div>
                    </div>
                  </div>
                </div>

</div>
            </div>

</div>

<div id="ranking" style="display:block" class="card text-white bg-dark mb-3">
            <h2 class="card-header">Rankings</h2>
            <div class="card-body">
              <div class="table-responsive">
                <table class="table table-striped table-dark">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Name</th>
                      <th scope="col">Time</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td id="rn0"></td>
                      <td id="rt0"></td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td id="rn1"></td>
                      <td id="rt1"></td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td id="rn2"></td>
                      <td id="rt2"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

</div>
            </div>

<div class="card text-white bg-dark mb-3">
              <div class="card-body">
                <timerr class="bigg">Loading</timerr>
                <div id="stopwatch" class="bigg"></div>
              </div>
            </div>

</div>

</form>

</div>
    </aside>

</div>

var cartouser='aroth-carto';
      var apiKey='ph5ha3HwevGxa7TECTzjjw';
      getRanks();

const map = new mapboxgl.Map({
        container: 'map',
        // style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
        // style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
        center: [-91.406252,37.186204],
        zoom: 4,
        dragRotate: false
      });

carto.setDefaultAuth({
        user: cartouser,
        apiKey: apiKey
      });

var username = '';
      // var source ='';
      // var viz ='';
      var layer='';
      var myKey='';
      const delay = 20;

var winViz;

function loadMap(key){
         const source = new carto.source.SQL('SELECT a.*, (ST_distance(a.the_geom,b.the_geom)/c.heatlamp)*2.3 as heat FROM hackartovl_counties a, hackartovl_rand b, (select MAX(ST_distance(a.the_geom,b.the_geom)) as heatlamp from hackartovl_counties a, hackartovl_rand b) c WHERE b.cartodb_id = (select MAX(cartodb_id) from hackartovl_rand)');

const vizHeat = new carto.Viz(`
          color: opacity(ramp($heat,reverse(tropic)),1)
          strokeColor: opacity(ramp($heat,[#DB66BC,#EB9FD4,#F7D1EB,#FFFFFF,#B7E7E8,#4ACCCF,#00AFB2]),1)
          strokeWidth: .4
          @county: $county
        `);

const vizStart = new carto.Viz(`
         color: opacity(ramp($heat,[#C75DAB,#D691C1,#E4C1D9,#F1F1F1,#A7D3D4,#42B7B9,#009B9E]),0)
         strokeColor: opacity(ramp($heat,[#DB66BC,#EB9FD4,#F7D1EB,#FFFFFF,#B7E7E8,#4ACCCF,#00AFB2]),.2)
         strokeWidth: .4
         @county: $county
       `);

winViz = new carto.Viz(`
          color: opacity(ramp($heat,PinkYl),1)
          strokeColor: opacity(ramp($heat,PinkYl),.2)
          strokeWidth: .4
        `);

layer = new carto.Layer(key, source, vizHeat);

const interactivity = new carto.Interactivity(layer);
        interactivity.on('featureClick', checkMatching);

//  const delay = 20;
        let clickedFeatureId = null;
        interactivity.on('featureEnter', event => {
          if (event.features.length > 0) {
            const feature = event.features[0];
            if (feature.id !== clickedFeatureId) {
              feature.color.blendTo('opacity(ramp($heat,reverse(tropic)),1)', 700)
              feature.strokeWidth.blendTo('.4', delay);
              feature.strokeColor.blendTo('opacity(Purple, 0.8)', delay);
            }
          }
        });
        interactivity.on('featureLeave', event => {
          if (event.features.length > 0) {
            const feature = event.features[0];
            if (feature.id !== clickedFeatureId) {
              feature.color.reset(delay);
              feature.strokeWidth.reset(delay);
              feature.strokeColor.reset(delay);
            }
          }
        });
        //interactivity.on('featureClick', isithot);

// interactivity.on('featureClickOut', event => {
        //   if (event.features.length > 0) {
        //     const feature = event.features[0];
        //     feature.color.reset(delay);
        //     feature.strokeWidth.reset(delay);
        //     feature.strokeColor.reset(delay);
        //   }
        // });

layer.addTo(map);
      }

//for a random float
      function randFloat(min, max, decimalPlaces) {
        var rand = Math.random()*(max-min) + min;
        var power = Math.pow(10, decimalPlaces);
        return Math.floor(rand*power) / power;
      }

//for a random whole
      function randWhole(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

function hasUsername(){

var sbut = document.getElementById('startButton');
        var uname = document.getElementById('username');
        var input = uname.value.length;

if(input<2){
          sbut.disabled = true;
        }else{
          sbut.disabled = false;
        }
      }

function startGame(){

// step one: get random coords
        username = document.getElementById('username').value;
        let tempCBDID = randWhole(1,3869);
        let Ukey = username.substring(0,2)+ Math.random()
        myKey=Ukey;

//sql queries to be used
        let sqlInsert = 'INSERT INTO hackartovl_rand (the_geom,name,county,state,key) SELECT st_centroid(the_geom) as the_geom, \''+username+'\'as name, county, statefull,\''+Ukey+'\' as key FROM hackartovl_counties WHERE cartodb_id=\''+tempCBDID+'\'';

//write to carto
        $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?q='+sqlInsert+'&api_key='+apiKey,function(data){
        });

let x = document.getElementById('start');
        let y = document.getElementById('quit');
        let z = document.getElementById('ranking');

x.style.display = "none";
        y.style.display = "block";
        z.style.display = "none";
        document.getElementById('quitDialog').value = document.getElementById('username').value

loadMap(myKey);

timer();
        console.log('username is: '+document.getElementById('username').value)

}

function quitGame(){
        let x = document.getElementById('start');
        let y = document.getElementById('quit');
        let z = document.getElementById('ranking');

x.style.display = "block";
        y.style.display = "none";
        z.style.display = "block";
        document.getElementById('username').value=''

window.location.reload();
      }

var mycounty;
      var mystate;

function checkMatching(event){

let clicounty = '';

for (let feature of event.features) {
          clicounty = feature.variables.county.value;
        }

let sqlCheck = 'SELECT county, state FROM hackartovl_rand WHERE key = \''+myKey+'\''
        let sqlUpdate = 'UPDATE hackartovl_rand SET time = \''+time+'\', dur = to_timestamp(\''+time+'\', \'HH24:MI:SS\') WHERE key = \''+myKey+'\''

$.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?format=JSON&q='+sqlCheck+'&api_key='+apiKey,function(data){
          mycounty=data.rows[0].county;
          mystate=data.rows[0].state;
        });

if(clicounty==mycounty){

clearTimeout(t);
          getRanks();

for (let feature of event.features) {
            layer.blendToViz(winViz);
          }

let z = document.getElementById('ranking');
          z.style.display = "block";

document.getElementById('results').innerHTML = 'That\'s Hot. You found ' + mycounty+', '+mystate
          $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?q='+sqlUpdate+'&api_key='+apiKey,function(data){
          });

//interactivity.off('featureClick', checkMatching);
          document.getElementById('quitButton').innerHTML = 'New Game'

}else{
          document.getElementById('results').innerHTML = 'No luck, try again.' ;
        //  isithot(false);

for (let feature of event.features) {
            feature.color.blendTo('opacity(Purple, 0.5)', delay)
            feature.strokeWidth.blendTo('7', delay);
            feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', delay);
          }
        }
      }

var rn1;
      var rt1;
      var rn2;
      var rt2;
      var rn0;
      var rt0;

function getRanks(){
        let sqlRank='SELECT * FROM hackartovl_rand where not name = \'\' order by dur asc limit 5'
        $.getJSON('https://'+cartouser+'.carto.com/api/v2/sql?format=JSON&q='+sqlRank+'&api_key='+apiKey,function(data){
          rn0=data.rows[0].name;
          rt0=data.rows[0].time;
          rn1=data.rows[1].name;
          rt1=data.rows[1].time;
          rn2=data.rows[2].name;
          rt2=data.rows[2].time;

document.getElementById('rn0').innerHTML=rn0
          document.getElementById('rt0').innerHTML=rt0
          document.getElementById('rn1').innerHTML=rn1
          document.getElementById('rt1').innerHTML=rt1
          document.getElementById('rn2').innerHTML=rn2
          document.getElementById('rt2').innerHTML=rt2
        });
      }

//timer elements
      var timerr = document.getElementsByTagName('timerr')[0],
        // start = document.getElementById('start'),
        // stop = document.getElementById('stop'),
        // clear = document.getElementById('clear'),
        seconds = 0, minutes = 0, hours = 0,
        t,time='',countdown=0;

https://cartodb.github.io/carto-vl/dist/carto-vl.js

https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js

https://code.jquery.com/jquery-3.3.1.slim.min.js

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js

https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js

https://code.jquery.com/jquery-1.12.4.js

https://code.jquery.com/ui/1.12.1/jquery-ui.js