Hi Guys ive been tryin to implement the virtual earth layer for quite a while, though i have it workin in several other scripts, it just seems to not work this time.
<!-- Einbinden der benoetigten Map Libraries -->
<link rel="stylesheet" href="/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script src="/OpenLayers.js"></script>
<!--
<link rel="stylesheet" href="/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script src="/OpenLayers.js"></script>
-->
<script defer="defer" type="text/javascript">
var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
var dortmund= new OpenLayers.LonLat(7.46, 51.51).transform(
geographic, mercator
);
var map;
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
var icon2 = icon.clone();
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
function myInit(){
// alert("before initializing map");
map = new OpenLayers.Map(document.getElementById("map_location"), {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults()
],
numZoomLevels: 9
});
// create Virtual Earth layers
var bing = new OpenLayers.Layer.VirtualEarth("VE Streets", {
sphericalMercator: true
});
var osm = new OpenLayers.Layer.OSM();
// map.addLayer(osm);
// alert("loading map add layers");
map.addLayers([ osm,bing]);
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
// var lonLat = new OpenLayers.LonLat(lon, lat).transform(geographic, map.getProjectionObject());
// layerMarkers.addMarker(new OpenLayers.Marker(dortmund,icon));
map.setCenter(dortmund, 6);
// end of function init
}
function getHkiks() {
// alert("inside getHkiks");
return hkiks.split(', ');
}
function focusMap(lat,lang) {
// alert("inside focusMap");
// alert("lang = " + lang + "lat = " + lat);
var poi= new OpenLayers.LonLat(lang, lat).transform(geographic, mercator);
layerMarkers.addMarker(new OpenLayers.Marker(poi,icon2));
map.setCenter(poi, 8);
}
function clearMap() {
// alert("inside clearMap");
// remove old markers
if ( layerMarkers.markers.length > 0) {
// alert("clearing layermarker");
while (layerMarkers.markers.length > 0) {
mark2delete = layerMarkers.markers[0];
layerMarkers.removeMarker(layerMarkers.markers[0]);
mark2delete.destroy();
};
// markerScores = [ ];
};
};
function addPoints() {
// alert("inside addPoints");
// remove old markers
clearMap();
/*
if ( layerMarkers.markers.length > 0) {
// alert("clearing layermarker");
while (layerMarkers.markers.length > 0) {
mark2delete = layerMarkers.markers[0];
layerMarkers.removeMarker(layerMarkers.markers[0]);
mark2delete.destroy();
};
// markerScores = [ ];
};
*/
var drilldownUrlCommon = "http://myDrilldownURL";
var hkiksArray = getHkiks();
for (var i=0;i<hkiksArray.length;i++) {
drilldownUrlCommon += "¶m="+hkiksArray[i];
}
// var drilldownUrl = "http://myDrilldownURL";
// var drilldownUrl = "http://myDrilldownURL";
//var drilldownUrl = "http://myDrilldownURL";
var geocodes = new Array();
var iks = new Array();
var div = document.getElementsByTagName("div");
var k=0;
for (j=0;j<div.length;j++) {
if (div[j].getAttribute("name") == 'geocode') {
geocodes[k] = div[j];
iks[k] = div[j].getAttribute("id");
k++;
}
}
//alert(" anzahl k = " + k);
// alert("last div id := " + iks[k-1]);
for (var i=0;i<geocodes.length; i++) {
// alert ("inside for loop i = " + i );
var lg = geocodes[i].getAttribute("Laengengrad");
var bg = geocodes[i].getAttribute("breitengrad");
var adresse = geocodes[i].getAttribute("address");
var ort = geocodes[i].getAttribute("city");
var poi= new OpenLayers.LonLat(lg, bg).transform(geographic, mercator);
// var drilldownUrl = "http://myDrilldownURL";
var drilldownUrl = drilldownUrlCommon + "¶m=" + iks[i];
// if (i < 2) {alert("drillurl : "+ drilldownUrl);};
var linkHTML = "<a href=" + drilldownUrl+" target=\"_blank\">an-klicken fuer Details</a>";
var infoHTML = "<b>Institutskennzeichen : </b>"+iks[i]+"<br/><b>Adresse : </b>"+adresse +"<br/><b>Details: </b>"+linkHTML+"</br>";
var feature = new OpenLayers.Feature(layerMarkers, poi);
feature.closeBox =true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, { minSize: new OpenLayers.Size(200, 100) });
feature.data.popupContentHTML = infoHTML;
feature.data.popupDescription = adresse;
// feature.data.popupIK = iks[i];
feature.data.overflow = "hidden";
// layerMarkers.addMarker(new OpenLayers.Marker(poi,icon.clone()));
// generate marker with info and event listener
var mark = new OpenLayers.Marker(poi,icon.clone());
mark.feature = feature;
mark.setOpacity(1.0);
// this event creates the mini report of attibutes
mark.events.register('mouseover', mark, function(evt)
{
// Get the location of the mouse when entering object
var mx=0; var my=0;
if(document.all)
{ mx= window.event.clientX; my=window.event.clientY; }
else
{ mx= evt.pageX; my= evt.pageY;}
var posx = mx+"px"; var posy = my+"px";
// important to use this qualification
var markik = this.feature.data.popupContentHTML;
var zusatztext =this.feature.data.popupDescription;
// alert("inside marker mouseover event, posx, posy, ik =: " + posx+","+posy+"," +markik + "," +zusatztext);
// set up the mini report of attributes for the tooltip
var atts = document.getElementById("markerinfo");
// atts.innerHTML = "<b>Institutskennzeichen :</b>"+markik +"<br/><b>Infotest Hallo</b>";
atts.innerHTML = "<b>Institutskennzeichen :</b>"+markik +" ";
Event.stop(evt);
});
// this event just clears out the attribute data
mark.events.register('mouseout', mark, function(evt)
{
// alert("inside marker mouseout event");
var atts = document.getElementById("markerinfo");
atts.innerHTML=" ";
// atts.style.display='none';
Event.stop(evt);
});
// define and register popup event for marker
var markerClick = function(evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};
mark.events.register("mousedown", feature, markerClick);
// now add marker to map
layerMarkers.addMarker(mark);
//layerMarkers.addMarker(new OpenLayers.Marker(poi,icon.clone()));
}
}
// end of function addPoints
var head= document.getElementsByTagName(head)[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () {
if (this.readyState == 'complete') myInit();
}
script.onload= myInit;
script.src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us';
head.appendChild(script);
</script>