Hi all.
I’ve got a very nervous-driving problem I have been spending several hours on, lately. Here it is:
In fact, it’s rather simple : I’d like to have my OpenLayers Map with a Google Street background, and on this map, I’d like to add a layer with markers on it (I’d like to add markers on the map in short…). But when I do the following, nothing appears, except the zoom in/out and other navigation buttons What should I do?
Here is my code:
<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](http://hazardmapping.com/geoserver/wfs)",
featureNS : "[http://www.opengeospatial.net/cite](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>
Thank you in advance…