Skip to content

Instantly share code, notes, and snippets.

@kueda

kueda/map.html

Created July 19, 2011 04:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kueda/1091334 to your computer and use it in GitHub Desktop.
Save kueda/1091334 to your computer and use it in GitHub Desktop.
Download ZIP
Tile boundary strokes
Raw
map.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>map test</title>
<script type="text/javascript" charset="utf-8" src="javascripts/polymaps.js"></script>
<script type="text/javascript" charset="utf-8" src="javascripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
window.po = org.polymaps
window.map = po.map()
.container($('#map').get(0).appendChild(po.svg('svg')))
.zoomRange([3, 13])
.zoom(9)
.add(po.interact());
map.add(po.geoJson()
.id('counties')
.url("http://localhost:8080/counties/{Z}/{X}/{Y}.geojson"));
map.add(po.geoJson()
.id('openspace')
.url("http://localhost:8080/openspace/{Z}/{X}/{Y}.geojson"));
map.add(po.geoJson()
.id('observations')
.url("http://localhost:8080/observations/{Z}/{X}/{Y}.geojson"));
})
</script>
<style type="text/css" media="screen">
#map {
position: fixed !important;
width:100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
z-index: 1000 !important;
}
#observations circle {
fill: DeepPink;
}
#counties path {
fill: #DCD8C0;
stroke: #fff;
stroke-width: 3px;
vector-effect: non-scaling-stroke;
}
#openspace path {
fill: #B3C927;
stroke: #5E6708;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}
</style>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment