Skip to content

Instantly share code, notes, and snippets.

@rukku

rukku/estero.html

Created February 12, 2012 09:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rukku/1807407 to your computer and use it in GitHub Desktop.
Save rukku/1807407 to your computer and use it in GitHub Desktop.
Download ZIP
Loading the estero WFS file
Raw
estero.html
<html>
<head>
<title>OpenLayers: Google Layer Example</title>
<link rel="stylesheet" href="style1.css" type="text/css" />
<link rel="stylesheet" href="style2.css" type="text/css" />
<!-- this gmaps key generated for http://localhost:8080/geoserver/ -->
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="resources/openlayers/OpenLayers.js"></script>
<script type="text/javascript">
var map;
// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
// Map is in mercator this time, so over-ride the default
// options that assume lat/lon.
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 20,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
// Create the map object
map = new OpenLayers.Map('map', options);
// create Google Maps layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{'sphericalMercator': true, numZoomLevels: 20}
);
// create Google Satellite layer
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 20}
);
// create WMS taxlots layer
var wmslayer = new OpenLayers.Layer.WMS(
"Medford Taxlots",
"http://localhost:8080/geoserver/wms",
{'layers': 'medford:schools_pt', 'format':'image/png', 'transparent':'true'},
{'opacity': 1.0, 'isBaseLayer': false, 'visibility': true}
);
// create WFS point layer
var wfslayer = new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "/geoserver/wfs",
featureType: "schools_pt",
featureNS: "http://medford.ph",
srsName: "EPSG:900913",
version: "1.1.0"
})
});var estero = new OpenLayers.Layer.Vector("WFS2", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "/geoserver/wfs",
featureType: "estero",
featureNS: "http://up.edu.ph",
srsName: "EPSG:900913",
version: "1.1.0"
})
});
var vector_style = new OpenLayers.Style({
'fillColor': 'teal',
'fillOpacity': 1,
'strokeColor': 'teal',
'strokeWidth': 1,
});
var vector_style_map = new OpenLayers.StyleMap({
'default': vector_style
});
estero.styleMap = vector_style_map;
map.addLayers([gmap, estero]);
//map.addLayers([gmap, gsat, wmslayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// Coordinate display at bottom of map
map.addControl(new OpenLayers.Control.MousePosition());
// Zoom to Medford, Oregon
//var point = new OpenLayers.LonLat(-122.8764, 42.3263);
//Zoom to Manila
var point = new OpenLayers.LonLat(120.988, 14.593);
// Need to convert zoom point to mercator too
point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(point, 14);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers: Google Layer Example</h1>
<div id="map" class="smallmap"></div>
<p><a href="workshop2.html">Next</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment