reidab/geojson.html

## geojson.html
<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>
	<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&v=2&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>