Skip to content

Instantly share code, notes, and snippets.

View tristen's full-sized avatar

Tristen Brown tristen

View GitHub Profile
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
<link href='play.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
@tristen
tristen / gist:5456161
Last active December 16, 2015 15:29 — forked from samanpwbb/gist:5456139
var getTop = function(el) {
var id = el.attr('href');
return $(id).offset().top;
};
var getBottom = function(el) {
var id = el.attr('href');
return $(id).offset().top + $(id).height();
};

Mapas Dinámicos Rápidos con OpenStreetMap, MapBox.js y Google Spreadsheets

En Tiempo para Desarrollando América Latina: Una Receta para Desarrollar Rápidamente Aplicaciones Geográficas

En los talleres de mapeo en preparación a Desarrollando América Latina de este fin de semana, pasamos una parte hablando de cómo utilizar Google Spreadsheets y MapBox.js. Es una arquitectura especialmente favorable en el contexto de una hackathon ya que permite rápidamente crear una aplicación para la colección y presentación de datos geográficos. Aquí les mostramos un ejemplo.

Registro de Incidentes Delictivos

Este sitio es un prototipo que desarrollamos con la Sub Gerencia de Seguridad Ciudadana de la Municipalidad Provincial de Huamanga. Permite registrar incidentes delictivos en la ciudad de Ayacucho y mostrar automáticamente los datos de manera dinámica y en tiempo real.

var locked,
fadeOut;
b = $('.branding');
$('body').mousemove(function() {
if (fadeOut) clearInterval(fadeOut);
locked = false;
b.addClass('visible');
fadeOut = setInterval(function() {
if (!locked) b.removeClass('visible');
@tristen
tristen / index.html
Created April 6, 2012 16:02 — forked from tmcw/index.html
Wax interactivity with location interaction
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Wax Interactivity</title>
</head>
<body>
<style>
#map {
width: 100%;
<style>
body .wax-popup {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #fff;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
<style>
.wax-tooltip {
position: absolute;
height: auto;
background: #fff;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
<style>
.wax-popup {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
height: auto;
background: #fff;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);