1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<html>
<head>
<!-- OpenLayers core js -->
<script
src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- OpenStreetMap base layer js -->
<script
src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<!-- Google Maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
//set up projections
// World Geodetic System 1984 projection
var WGS84 = new OpenLayers.Projection("EPSG:4326");
// WGS84 Google Mercator projection
var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");
//Initialize the map
//creates a new openlayers map in the <div> html element id map
var map = new OpenLayers.Map ("map", {
controls:[
//allows the user pan ability
new OpenLayers.Control.Navigation(),
//displays the pan/zoom tools
new OpenLayers.Control.PanZoom(),
//displays a layer switcher
new OpenLayers.Control.LayerSwitcher(),
//displays the mouse position's coordinates in a <div> html element with
new OpenLayers.Control.MousePosition({
div:document.getElementById("coordinates")
})
],
projection: WGS84_google_mercator,
displayProjection: WGS84
} );
//base layers
var openstreetmap = new OpenLayers.Layer.OSM();
var google_maps = new OpenLayers.Layer.Google(
"Google Maps", {
numZoomLevels: 20
}
);
var google_satellite = new OpenLayers.Layer.Google(
"Google Satellite", {
type: google.maps.MapTypeId.SATELLITE,
numZoomLevels: 20
}
);
//wfs overlay
var wfs_layer = new OpenLayers.Layer.Vector("Blocks", {
strategies: [new OpenLayers.Strategy.BBOX()],
projection: WGS84,
protocol: new OpenLayers.Protocol.WFS({
version: "1.1.0",
url: "http://hazardmapping.com/geoserver/wfs",
featureNS : "http://www.opengeospatial.net/cite",
featureType: "testblocks",
})
});
map.addLayers([openstreetmap, google_maps, google_satellite, wfs_layer]);
//add markers
var couche_markers = new OpenLayers.Layer.Markers("Markers");
var dimension_icon = new OpenLayers.Size(24,24);
var offset_icon = new OpenLayers.Pixel(-(dimension_icon.w/2), -dimension_icon.h);
var icon = new OpenLayers.Icon('10.jpg', size, offset);
lonlat=new OpenLayers.LonLat(2.44834,48.87729).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
);
var mon_marker=new OpenLayers.Marker(lonlat, icon);
markers.addMarker(mon_marker);
map.addLayer(markers);
// map extent
var mapextent = new OpenLayers.Bounds(-123.17341, 49.24343, -123.06183, 49.29899).transform(WGS84, map.getProjectionObject());
map.zoomToExtent(mapextent);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:500px; height:500px;"></div>
<div id="coordinates"></div>
</body>
</html> |
