|
|
| Line 47: |
Line 47: |
| | } | | } |
| | | | |
| − | //<![CDATA[
| |
| − | var map = null;
| |
| − | var lastmarker = null;
| |
| − | // ========== Read paramaters that have been passed in ==========
| |
| − |
| |
| − | // Before we go looking for the passed parameters, set some defaults
| |
| − | // in case there are no parameters
| |
| − | var id;
| |
| − | var index = -1;
| |
| − |
| |
| − | // these set the initial center, zoom and maptype for the map
| |
| − | // if it is not specified in the query string
| |
| − | var lat = 75;
| |
| − | var lng = -115;
| |
| − | var zoom = 2;
| |
| − | var maptype = 'S2';
| |
| − |
| |
| − |
| |
| − | // If there are any parameters at eh end of the URL, they will be in location.search
| |
| − | // looking something like "?marker=3"
| |
| − |
| |
| − | // skip the first character, we are not interested in the "?"
| |
| − | var query = location.search.substring(1);
| |
| − |
| |
| − | // split the rest at each "&" character to give a list of "argname=value" pairs
| |
| − | var pairs = query.split("&");
| |
| − | for (var i=0; i<pairs.length; i++) {
| |
| − | // break each pair at the first "=" to obtain the argname and value
| |
| − | var pos = pairs[i].indexOf("=");
| |
| − | var argname = pairs[i].substring(0,pos).toLowerCase();
| |
| − | var value = pairs[i].substring(pos+1).toLowerCase();
| |
| − |
| |
| − | // process each possible argname - use unescape() if theres any chance of spaces
| |
| − | if (argname == "id") {id = unescape(value);}
| |
| − | if (argname == "marker") {index = parseFloat(value);}
| |
| − | if (argname == "lat") {lat = parseFloat(value);}
| |
| − | if (argname == "lng") {lng = parseFloat(value);}
| |
| − | if (argname == "zoom") {zoom = parseInt(value);}
| |
| − | if (argname == "layers") {
| |
| − | if (value == "m") {maptype = 'S2';}
| |
| − | if (value == "d") {maptype = 'dungeons';}
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function MapTypeId2UrlValue(maptype) {
| |
| − | var urlValue = 'm';
| |
| − | switch(maptype){
| |
| − |
| |
| − | case 'dungeons': urlValue='d';
| |
| − | break;
| |
| − | default:
| |
| − | case 'S2': urlValue='m';
| |
| − | break;
| |
| − | }
| |
| − | return urlValue;
| |
| − | }
| |
| − |
| |
| − | // this variable will collect the html which will eventually be placed in the side_bar
| |
| − | var side_bar_html = "";
| |
| − |
| |
| − | // arrays to hold copies of the markers and html used by the side_bar
| |
| − | // because the function closure trick doesnt work there
| |
| − | var gmarkers = [];
| |
| − | var idmarkers = [];
| |
| − |
| |
| − | // global "map" variable
| |
| − |
| |
| − |
| |
| − | var customIcons = {
| |
| − | boss: {icon: 'boss.png'},
| |
| − | easter: {icon: 'easter.png'},
| |
| − | employee: {icon: 'employee.png'}
| |
| − | };
| |
| − |
| |
| − | // A function to create the marker and set up the event window function
| |
| − | function createMarker(latlng, id, html, type) {
| |
| − | var contentString = html;
| |
| − | var icon = customIcons[type] || {};
| |
| − | var marker = new google.maps.Marker({
| |
| − | position: latlng,
| |
| − | map: map,
| |
| − | icon: icon.icon,
| |
| − | zIndex: Math.round(latlng.lat()*-100000)<<5
| |
| − | });
| |
| − | marker.id = id;
| |
| − | marker.index = gmarkers.length;
| |
| − | google.maps.event.addListener(marker, 'click', function() {
| |
| − | lastmarker = new Object;
| |
| − | lastmarker.id = marker.id;
| |
| − | lastmarker.index = marker.index;
| |
| − | infowindow.setContent(contentString);
| |
| − | infowindow.open(map,marker);
| |
| − | });
| |
| − | // save the info we need to use later for the side_bar
| |
| − | gmarkers.push(marker);
| |
| − | idmarkers[id.toLowerCase()] = marker;
| |
| − | // add a line to the side_bar html
| |
| − | side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + id + '<\/a><br>';
| |
| − | }
| |
| − |
| |
| − | // This function picks up the click and opens the corresponding info window
| |
| − | function myclick(i) {
| |
| − | google.maps.event.trigger(gmarkers[i], "click");
| |
| − | }
| |
| − |
| |
| − | function makeLink() {
| |
| − | var mapinfo = "lat=" + map.getCenter().lat().toFixed(6)
| |
| − | + "&lng=" + map.getCenter().lng().toFixed(6)
| |
| − | + "&zoom=" + map.getZoom()
| |
| − | + "&layers=" + MapTypeId2UrlValue(map.getMapTypeId());
| |
| − | if (lastmarker) {
| |
| − | var a="http://www.sacredwiki.org/index.php5/User:Schot/Map?id=" + lastmarker.id + "&" + mapinfo;
| |
| − | var b="http://www.sacredwiki.org/index.php5/User:Schot/Map?marker=" + lastmarker.index + "&" + mapinfo;
| |
| − | } else {
| |
| − | var a = "http://www.sacredwiki.org/index.php5/User:Schot/Map?"+mapinfo;
| |
| − | var b = a;
| |
| − | }
| |
| − |
| |
| − | document.getElementById("idlink").innerHTML = '<a href="' +a+ '" id=url target=_new><img src=images/link.gif>- ' +a+ '</a> (id in xml file also entry "name" in sidebar menu)';
| |
| − | document.getElementById("indexlink").innerHTML = '<a href="' +b+ '" id=url target=_new><img src=images/link.gif>- Link directly to this page by index</a> (position in gmarkers array)';
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function swmap() {
| |
| − | // create the map
| |
| − | var myOptions = {
| |
| − | zoom: zoom,
| |
| − | center: new google.maps.LatLng(lat,lng),
| |
| − | backgroundColor: '#f0e0be',
| |
| − | mapTypeId: maptype
| |
| − | }
| |
| − |
| |
| − |
| |
| − | map = new google.maps.Map(document.getElementById("map_canvas"),
| |
| − | myOptions);
| |
| − |
| |
| − | var S2Options = {
| |
| − | getTileUrl: function(coord, zoom) {
| |
| − | return "http://www.darkmatters.org/Map/MainMap/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
| |
| − | },
| |
| − | tileSize: new google.maps.Size(256, 256),
| |
| − | isPng: false
| |
| − | };
| |
| − |
| |
| − | var S2 = new google.maps.ImageMapType(S2Options);
| |
| − | S2.name = "Main Map";
| |
| − | S2.maxZoom = 7;
| |
| − | S2.minZoom = 2;
| |
| − | map.mapTypes.set('S2', S2);
| |
| − |
| |
| − |
| |
| − | var dungeonOptions = {
| |
| − | getTileUrl: function(coord, zoom) {
| |
| − | return "http://www.darkmatters.org/Map/Dungeons/"+zoom+"_"+coord.x+"_"+coord.y+".jpg";
| |
| − | },
| |
| − | tileSize: new google.maps.Size(256, 256),
| |
| − | isPng: false
| |
| − | };
| |
| − |
| |
| − | var dungeons = new google.maps.ImageMapType(dungeonOptions);
| |
| − | dungeons.name = "Dungeons";
| |
| − | dungeons.maxZoom = 7;
| |
| − | dungeons.minZoom = 2;
| |
| − | map.mapTypes.set('dungeons', dungeons);
| |
| − |
| |
| − |
| |
| − | map.setOptions({
| |
| − | mapTypeControl: true,
| |
| − | mapTypeControlOptions: {
| |
| − | style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
| |
| − | mapTypeIds: ['S2', 'dungeons']
| |
| − | }
| |
| − | });
| |
| − |
| |
| − | // Make the link the first time when the page opens
| |
| − | makeLink();
| |
| − |
| |
| − | // Make the link again whenever the map changes
| |
| − | google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
| |
| − | google.maps.event.addListener(map, 'center_changed', makeLink);
| |
| − | google.maps.event.addListener(map, 'bounds_changed', makeLink);
| |
| − | google.maps.event.addListener(map, 'zoom_changed', makeLink);
| |
| − |
| |
| − | google.maps.event.addListener(map, 'click', function() {
| |
| − | lastmarker = null;
| |
| − | makeLink();
| |
| − | infowindow.close();
| |
| − | });
| |
| − | // Read the data from example.xml
| |
| − | downloadUrl("example.xml", function(doc) {
| |
| − | var xmlDoc = xmlParse(doc);
| |
| − | var markers = xmlDoc.documentElement.getElementsByTagName("marker");
| |
| − | for (var i = 0; i < markers.length; i++) {
| |
| − | // obtain the attribues of each marker
| |
| − | var lat = parseFloat(markers[i].getAttribute("lat"));
| |
| − | var lng = parseFloat(markers[i].getAttribute("lng"));
| |
| − | var point = new google.maps.LatLng(lat,lng);
| |
| − | var html = markers[i].getAttribute("description");
| |
| − | var type = markers[i].getAttribute("type");
| |
| − | var label = markers[i].getAttribute("label");
| |
| − | // create the marker
| |
| − | var marker = createMarker(point,label,html,type);
| |
| − | }
| |
| − | // put the assembled side_bar_html contents into the side_bar div
| |
| − | document.getElementById("side_bar").innerHTML = side_bar_html;
| |
| − | // ========= If a parameter was passed, open the info window ==========
| |
| − | if (id) {
| |
| − | if (idmarkers[id]) {
| |
| − | google.maps.event.trigger(idmarkers[id],"click");
| |
| − | } else {
| |
| − | alert("id "+id+" does not match any marker");
| |
| − | }
| |
| − | }
| |
| − | if (index > -1) {
| |
| − | if (index < gmarkers.length) {
| |
| − | google.maps.event.trigger(gmarkers[index],"click");
| |
| − | } else {
| |
| − | alert("marker "+index+" does not exist");
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | //]]>
| |
| | | | |
| | addOnloadHook(swmap); | | addOnloadHook(swmap); |
