<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<title>Wallonie with GoogleMaps</title>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACxUxJ46tcIiZKWG81HlNYBQNmDPi4Y89dW251X5Bl4Z1--Eg2BTkAwr63SeUaRI4wI8RwX7LgtHN0g'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
// Declaration des variables
var map, gbase, points, selectControl, selectedFeature;
var proj = new OpenLayers.Projection("EPSG:4326");
var bounds = new OpenLayers.Bounds(6.190,50.517,6.205,50.535);
bounds.transform(proj, map.getProjectionObject());
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 18,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
};
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div" + feature.id +"></div>",
null, true, onPopupClose);
popup.setBackgroundColor("red");
popup.setBorder("10px");
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function init() {
map = new OpenLayers.Map('map',options);
// Add google layers
gbase = new OpenLayers.Layer.Google( "Google Physical", {type: G_PHYSICAL_MAP}, {'sphericalMercator': true} );
map.addLayer(gbase);
// Add Bornes Frontières Geometry
var Bornes = new Array();
Bornes[0] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20475,50.52167));
Bornes[1] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20440,50.52148));
//Bornes[0] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20475,50.52167).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")));
//Bornes[1] = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(6.20440,50.52148).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")));
points = new OpenLayers.Layer.Vector("Infos", {projection: new OpenLayers.Projection("EPSG:4326")});
points.addFeatures(Bornes);
map.addLayer(points);
// Ajout des Controls
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.ScaleLine({div:document.getElementById("scale")}));
map.addControl(new OpenLayers.Control.MousePosition({div:document.getElementById("mouseposition")}));
selectControl = new OpenLayers.Control.SelectFeature(points,{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
map.zoomToExtent(bounds);
}
</script>
</head>
<body onload="init()">
<h4 id="title">Wallonie with GoogleMaps</h4>
<div> Carte dynamique OpenLayers</div>
<div style="width:100%; height:80%" id="map"></div>
<div align="right" id="mouseposition"></div>
<div align="right" id="scale"> </div>
</body>
</html>