Skip to content

Instantly share code, notes, and snippets.

@reidab
Created May 19, 2010 01:03
Show Gist options
  • Save reidab/405802 to your computer and use it in GitHub Desktop.
Save reidab/405802 to your computer and use it in GitHub Desktop.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="js/lib/openlayers/theme/default/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA5FcJvXKhmrpf2jr99XJHVxQ-o7GAwDWghJL_7GZwxCTqALC9_RSOrg-MaIsEOUC3Ktal5cNmzKKJJw'></script>
<script src="js/lib/openlayers/lib/OpenLayers.js"></script>
<script src='js/lib/jquery.js'></script>
<script src='js/lib/jquery.enumerable.js'></script>
<script type="text/javascript">
var lon = -122.548188;
var lat = 45.798997;
var zoom = 11;
var map, layer;
var featurecollection;
var geojson_format;
var vector_layer;
var raw_data;
var feature_json;
var dynamic_vector;
function init(){
$.getJSON("http://data.pdxapi.com:5984/city_boundaries/f0f6b0d5927d01880f3824585bdee4c7?callback=?", function(data){
raw_data = data;
setup_map(data);
})
}
function setup_map(data) {
map = new OpenLayers.Map( 'map' );
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, numZoomLevels: 22}
);
map.addLayers([gphy, gmap, ghyb, gsat]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
var geometry = fix_coordinates(data.geometry);
feature_json = { 'type': 'Feature',
'properties': {},
'geometry': geometry
}
geojson_format = new OpenLayers.Format.GeoJSON();
vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.parseFeature(feature_json));
var dynamic_vector = new OpenLayers.Layer.Vector("Bike Parking", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://data.pdxapi.com:5984/bicycle_parking/_design/geojson/_spatial/points/",
format: new OpenLayers.Format.GeoJSON()
})
})
map.addLayer(dynamic_vector);
}
function fix_coordinates(geom) {
if(geom.type == "Polygon") {
geom.coordinates = [geom.coordinates];
} else {
if(geom.geometries) {
geom.geometries = $(geom.geometries).collect(function(){
return fix_coordinates(this);
});
}
}
return geom;
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment