D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
andrewxhill
Full window
Github gist
Speak a place to go to it on a map
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Speech API Demo</title> <style> html, body, #map { height: 100%; padding: 0; margin: 0; font-family: Verdana, Arial, sans-serif; } </style> <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/themes/css/cartodb.css" /> <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/cartodb.js"></script> </head> <body> <div id="map"> </div> <script> var lang = 'en-US'; var final_transcript = ''; var final_words = ''; var ignore_onend = false; var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onstart = function() { console.log('start') recognizing = true; }; recognition.onerror = function(event) { console.log(event) }; var offSent = false; recognition.onend = function() { recognizing = false; console.log(final_words) $('.cartodb-searchbox .text').val(final_words) $('.cartodb-searchbox form').submit() setTimeout(function(){ recognition.start(); final_transcript = ''; final_words = ''; }, 2800); }; recognition.onresult = function(event) { var interim_transcript = ''; if (offSent == false){ offSent = true; setTimeout(function(){ recognition.stop(); }, 800); } for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { final_transcript += event.results[i][0].transcript; } else { interim_transcript += event.results[i][0].transcript; } } final_transcript = final_transcript; final_words = final_transcript; }; var current_style; function main(){ var url = 'https://team.cartodb.com/api/v2/viz/becbe840-a43a-11e4-86d6-0e018d66dc29/viz.json'; cartodb.createVis('map', url, { shareable: true, title: true, description: true, search: true, tiles_loader: true, https: true}) .done(function(vis, layers) { var v = cdb.vis.Overlay.create('search', vis, {}) v.show(); $('#map').append(v.render().el); recognition.lang = lang; recognition.start(); }); } window.onload = main; </script>
https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/cartodb.js