OpenLayers & GeoJSON by pbogden

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="//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",
            "//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>