pbogden/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Recreating the result of Mike Bostock's awesome tutorial with OpenLayers

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>openlayers</title>
<style>

body {
  margin: 0em 0em;
}

#map {
  width: 960px;
  height: 500px;
  border: 1px solid #ccc;
}

path {
  fill: #000;
  fill-opacity: .2;
  stroke: #fff;
  stroke-width: 1.5px;
}

path:hover {
  fill: brown;
  fill-opacity: .7;
}

</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<body>
<div id="map"></div>
<script>

var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
    map.addLayer(layer);
    map.zoomToExtent([ -125, 20, -65, 50]);    // draw the map centered on the US

var states = new OpenLayers.Layer.Vector("GeoJSON", {
        protocol: new OpenLayers.Protocol.HTTP({
            url: "us-states.json",
            format: new OpenLayers.Format.GeoJSON()
        }),
        strategies: [new OpenLayers.Strategy.Fixed()]
    });
    map.addLayer( states );

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>openlayers</title>
	<style>

	body {
	margin: 0em 0em;
	}

	#map {
	width: 960px;
	height: 500px;
	border: 1px solid #ccc;
	}

	path {
	fill: #000;
	fill-opacity: .2;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	path:hover {
	fill: brown;
	fill-opacity: .7;
	}

	</style>
	<script src="http://openlayers.org/api/OpenLayers.js"></script>
	<body>
	<div id="map"></div>
	<script>

	var map = new OpenLayers.Map('map');
	var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
	map.addLayer(layer);
	map.zoomToExtent([ -125, 20, -65, 50]); // draw the map centered on the US

	var states = new OpenLayers.Layer.Vector("GeoJSON", {
	protocol: new OpenLayers.Protocol.HTTP({
	url: "us-states.json",
	format: new OpenLayers.Format.GeoJSON()
	}),
	strategies: [new OpenLayers.Strategy.Fixed()]
	});
	map.addLayer( states );

	</script>