Skip to content

Instantly share code, notes, and snippets.

@yhahn

yhahn/index.html

Created February 12, 2013 19:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yhahn/4772503 to your computer and use it in GitHub Desktop.
Save yhahn/4772503 to your computer and use it in GitHub Desktop.
Download ZIP
Simple geojson search
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body {
margin:0px;
padding:0px;
font:15px/20px sans-serif;
}
#map {
position:absolute;
top:0px;
bottom:0px;
width:100%;
}
#text {
display:block;
width:300px;
position:absolute;
bottom:20px;
left:50%;
font-size:20px;
line-height:20px;
height:20px;
margin-left:-150px;
}
div.team {
display:block;
position:absolute;
width:20px; height:20px;
background:#333;
margin:-10px 0px 0px -10px;
border-radius:50%;
pointer-events:all;
cursor:pointer;
}
div.team span {
background:#fff;
width:100px;
padding:10px;
text-align:center;
display:none;
position:absolute;
left:50%; bottom:30px;
margin:0px 0px 0px -60px;
border-radius:5px;
}
div.team span:before {
content:'';
border-top:15px solid #fff;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom:15px solid transparent;
position:absolute; top:100%; left:50%;
margin:0px 0px 0px -15px;
}
div.team.active span { display:block; }
</style>
</head>
<body>
<div id='map'></div>
<form id='search'>
<input type='text' id='text' placeholder='NFL Team, ex: Packers' />
</form>
<script>
var tiles = mapbox.layer().id('examples.map-zr0njcqy');
var markers = mapbox.markers.layer();
markers.features([
{
"geometry": { "type": "Point", "coordinates": [ -76.61, 39.30 ] },
"properties": { "title": "Baltimore Ravens" }
},
{
"geometry": { "type": "Point", "coordinates": [ -84.50, 39.13 ] },
"properties": { "title": "Cincinnati Bengals" }
},
{
"geometry": { "type": "Point", "coordinates": [ -81.67, 41.47 ] },
"properties": { "title": "Cleveland Browns" }
},
{
"geometry": { "type": "Point", "coordinates": [ -79.97, 40.43 ] },
"properties": { "title": "Pittsburgh Steelers" }
},
{
"geometry": { "type": "Point", "coordinates": [ -87.68, 41.83 ] },
"properties": { "title": "Chicago Bears" }
},
{
"geometry": { "type": "Point", "coordinates": [ -83.10, 42.38 ] },
"properties": { "title": "Detroit Lions" }
},
{
"geometry": { "type": "Point", "coordinates": [ -87.98, 44.52 ] },
"properties": { "title": "Green Bay Packers" }
},
{
"geometry": { "type": "Point", "coordinates": [ -93.26, 44.96 ] },
"properties": { "title": "Minnesota Vikings" }
},
{
"geometry": { "type": "Point", "coordinates": [ -95.38, 29.78 ] },
"properties": { "title": "Houston Texans" }
},
{
"geometry": { "type": "Point", "coordinates": [ -86.14, 39.77 ] },
"properties": { "title": "Indianapolis Colts" }
},
{
"geometry": { "type": "Point", "coordinates": [ -84.42, 33.76 ] },
"properties": { "title": "Atlanta Falcons" }
},
{
"geometry": { "type": "Point", "coordinates": [ -80.56, 33.62 ] },
"properties": { "title": "Carolina Panthers" }
},
{
"geometry": { "type": "Point", "coordinates": [ -81.66, 30.33 ] },
"properties": { "title": "Jacksonville Jaguars" }
},
{
"geometry": { "type": "Point", "coordinates": [ -86.78, 36.17 ] },
"properties": { "title": "Tennessee Titans" }
},
{
"geometry": { "type": "Point", "coordinates": [ -89.93, 30.06 ] },
"properties": { "title": "New Orleans Saints" }
},
{
"geometry": { "type": "Point", "coordinates": [ -78.85, 42.89 ] },
"properties": { "title": "Buffalo Bills" }
},
{
"geometry": { "type": "Point", "coordinates": [ -80.13, 25.85 ] },
"properties": { "title": "Miami Dolphins" }
},
{
"geometry": { "type": "Point", "coordinates": [ -71.02, 42.33 ] },
"properties": { "title": "New England Patriots" }
},
{
"geometry": { "type": "Point", "coordinates": [ -73.93, 40.66 ] },
"properties": { "title": "New York Jets" }
},
{
"geometry": { "type": "Point", "coordinates": [ -96.76, 32.79 ] },
"properties": { "title": "Dallas Cowboys" }
},
{
"geometry": { "type": "Point", "coordinates": [ -73.93, 40.66 ] },
"properties": { "title": "New York Giants" }
},
{
"geometry": { "type": "Point", "coordinates": [ -75.13, 40.01 ] },
"properties": { "title": "Philadelphia Eagles" }
},
{
"geometry": { "type": "Point", "coordinates": [ -77.01, 38.90 ] },
"properties": { "title": "Washington Redskins" }
},
{
"geometry": { "type": "Point", "coordinates": [ -104.88, 39.76 ] },
"properties": { "title": "Denver Broncos" }
},
{
"geometry": { "type": "Point", "coordinates": [ -94.55, 39.12 ] },
"properties": { "title": "Kansas City Chiefs" }
},
{
"geometry": { "type": "Point", "coordinates": [ -122.22, 37.76 ] },
"properties": { "title": "Oakland Raiders" }
},
{
"geometry": { "type": "Point", "coordinates": [ -117.13, 32.81 ] },
"properties": { "title": "San Diego Chargers" }
},
{
"geometry": { "type": "Point", "coordinates": [ -112.08, 33.57 ] },
"properties": { "title": "Arizona Cardinals" }
},
{
"geometry": { "type": "Point", "coordinates": [ -122.41, 37.77 ] },
"properties": { "title": "San Francisco 49ers" }
},
{
"geometry": { "type": "Point", "coordinates": [ -122.35, 47.62 ] },
"properties": { "title": "Seattle Seahawks" }
},
{
"geometry": { "type": "Point", "coordinates": [ -90.24, 38.63 ] },
"properties": { "title": "St. Louis Rams" }
},
])
// Custom markers.
.factory(function(f) {
// Add section text to spot element.
var el = document.createElement('div');
el.className = 'team';
el.innerHTML = '<span class="popup">' + f.properties.title + '</span>';
MM.addEvent(el, 'click', setActive);
MM.addEvent(el, 'touchend', setActive);
return el;
});
// Set an active class on a marker and pan the map to it.
function setActive(ev) {
_(markers.markers()).each(function(m) {
m.element.className = m.element.className.replace(/\s+active/g, '')
// Set active class and pan to active marker.
if (m.element === ev.toElement) {
m.element.className += ' active';
map.ease.location(m.location).zoom(map.zoom()).optimal();
}
});
};
var map = mapbox.map('map', [tiles, markers]);
map.setZoomRange(5, 7);
map.centerzoom({lon:-95,lat:38}, 5);
map.ui.zoomer.add();
// When a search is submitted, see if any markers title
// include the search query.
document.getElementById('search').onsubmit = function() {
// You may want to do additional normalization here, like stripping
// beginning/trailing whitespace.
var query = document.getElementById('text').value.toLowerCase();
_(markers.markers()).any(function(m) {
if (m.data.properties.title.toLowerCase().indexOf(query) === -1) {
return false;
} else {
setActive({ toElement: m.element });
return true;
}
});
return false;
};
// Attribute map
map.ui.attribution.add().content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment