/** * Adds the banenkaart javascriptcode * name* banenkaart * Since: Mon Feb 02 2009 **/ var MCTGmaps = Class.create({ /** * initialize * * Creates a new MCTGmaps object * * @since Fri Oct 23 2009 * @access public * @param string mode * @param string requested * @return MCTGmaps **/ initialize: function(mode, requested) { if (GBrowserIsCompatible()) { this.knownmarkers = new Hash(); this.mode = mode; this.maploader = false; var requested = requested || ""; this.map = new GMap2(document.getElementById("map_canvas")); switch (requested) { case "Drenthe": this.map.setCenter(new GLatLng(52.950293,6.627502), 9); break; case "Flevoland": this.map.setCenter(new GLatLng(52.49616,5.429993), 9 ); break; case "Friesland": this.map.setCenter(new GLatLng(53.084127,5.657959), 9); break; case "Gelderland": this.map.setCenter(new GLatLng(52.049112,5.877686), 9 ); break; case "Groningen": this.map.setCenter(new GLatLng(53.215902,6.568451), 9 ); break; case "Limburg": this.map.setCenter(new GLatLng(51.153509,6.17981), 9 ); break; case "Noord-Brabant": this.map.setCenter(new GLatLng(51.491645,5.234985), 9 ); break; case "Noord-Holland": this.map.setCenter(new GLatLng(52.69969,4.828491), 9 ); break; case "Overijssel": this.map.setCenter(new GLatLng(52.442618,6.509399), 9 ); break; case "Utrecht": this.map.setCenter(new GLatLng(52.121685,5.196533), 9 ); break; case "Zeeland": this.map.setCenter(new GLatLng(51.541211,3.806763), 9 ); break; case "Zuid-Holland": this.map.setCenter(new GLatLng(52.032218,4.498901), 9 ); break; default: this.map.setCenter(new GLatLng(52.27488, 5.394287), 7); break; } this.map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 27) ) ); if (this.mode != "small") { this.map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(27, 27) ) ); } this.currentMarker = false; this.createVacatureWindow(); } }, /** * createVacatureWindow * * Creates a custom infowindow * * @since Fri Oct 23 2009 * @access public * @return void **/ createVacatureWindow: function() { this.vacatureWindow = function(marker, html) { this.marker = marker; this.html = html; } this.vacatureWindow.prototype = new GOverlay(); this.vacatureWindow.prototype.MCTGmaps = this; this.vacatureWindow.prototype.initialize = function(map) { var div = document.createElement("div"); var contentDiv = document.createElement("div"); var bgimage = document.createElement("img"); var closeimage = document.createElement("img"); closeimage.src = "/images/iw_close.gif"; bgimage.src = "/images/banenkaart_infowindow2.png"; bgimage.height = "268";//for pngbehavior bgimage.width = "255"; div.className = "pos_infowindow_container"; closeimage.className = "pos_closeimage"; contentDiv.className = "pos_infowindow_content stl_infowindow_content"; div.appendChild(bgimage); div.appendChild(closeimage); div.appendChild(contentDiv); contentDiv.innerHTML = this.html; this.vacatureWoffsetX = -2; this.vacatureWoffsetY = 0; this.vacatureWHeight = 268; this.vacatureWWidth = 255; div.style.position = "absolute"; div.style.height = this.vacatureWHeight + "px"; div.style.width = this.vacatureWWidth + "px"; div.style.top = (map.fromLatLngToDivPixel(this.marker.getPoint() ).y - this.vacatureWHeight - this.vacatureWoffsetY) + 'px'; div.style.left = (map.fromLatLngToDivPixel(this.marker.getPoint() ).x - this.vacatureWoffsetX) + 'px'; Element.extend(closeimage); closeimage.observe('click', this.MCTGmaps.closeOverlay.bindAsEventListener(this.MCTGmaps) ); this._map = map; this._div = div; map.getPane(G_MAP_FLOAT_PANE).appendChild(div); var stopInfowindowEvents = function(event) { Event.stop(event); } GEvent.bindDom(this._div, 'mousedown', this, stopInfowindowEvents); GEvent.bindDom(this._div, 'dblclick', this, stopInfowindowEvents); } this.vacatureWindow.prototype.remove = function() { this._div.parentNode.removeChild(this._div); } this.vacatureWindow.prototype.redraw = function(force) { this._div.style.left = (this._map.fromLatLngToDivPixel(this.marker.getPoint() ).x - this.vacatureWoffsetX)+ 'px'; this._div.style.top = (this._map.fromLatLngToDivPixel(this.marker.getPoint() ).y - this.vacatureWHeight - this.vacatureWoffsetY) + 'px'; } }, /** * createMarker * * Creates a marker whose info window displays the corresponding vacature * * @since Fri Oct 23 2009 * @access public * @param GLatLng point * @param string text **/ createMarker: function(point, text) { var vacatureIcon = new GIcon(G_DEFAULT_ICON); vacatureIcon.iconSize = new GSize(32, 32); vacatureIcon.iconAnchor= new GPoint(1, 32); vacatureIcon.imageMap = new Array(0,0,32,0,32,26,0,26); vacatureIcon.image = "images/banenkaarticoon.png"; // Setup our GMarkerOptions object markerOptions = { icon:vacatureIcon }; var marker = new GMarker(point, markerOptions); GEvent.addListener(marker, "click", this.showInfoWindow.bindAsEventListener(this, marker, text) ); return marker; }, /** * showInfoWindow * * Replaces the standard infowindow with our custom one * * @since Fri Oct 23 2009 * @access public * @param GEvent e * @param GMarker marker * @param string text * @return void **/ showInfoWindow: function(e, marker, text) { if (typeof this.vacatureWindow !== "undefined") { if (this.currentMarker) { this.closeOverlay(); } if (!marker.overlay) { marker.overlay = new this.vacatureWindow(marker, text); } this.currentMarker = marker; this.currentMarker.hide(); //computes the middle of the infowindow in latlng var markerXinPix = this.map.fromLatLngToDivPixel(marker.getPoint() ).x; var markerYinPix = this.map.fromLatLngToDivPixel(marker.getPoint() ).y; var infowindowMiddleXInPix = markerXinPix + 120; var infowindowMiddleYInPix = markerYinPix - 138; var infowindowMiddleLatLng = this.map.fromDivPixelToLatLng(new GPoint(infowindowMiddleXInPix, infowindowMiddleYInPix) ); this.map.panTo(infowindowMiddleLatLng); this.map.addOverlay(marker.overlay); } else { marker.openInfoWindowHtml(text, {maxWidth: 255}); } }, /** * registerMarker * * Registers a marker to the knowmarkers hash and adds it to the map * * @since Mon Oct 26 2009 * @access public * @param string latitude * @param string longitude * @param string html * @param string id * @return void **/ registerMarker: function(latitude, longitude, html, id) { if (this.maploader == false) { this.showMaploader(); setTimeout(this.hideMaploader.bind(this), 500); } var marker = mctgmaps.createMarker(new GLatLng(latitude, longitude), html); mctgmaps.map.addOverlay(marker); this.knownmarkers.set(id, marker); }, /** * showMaploader * * Shows the map loader bar * * @since Mon Dec 07 2009 * @access public * @return void **/ showMaploader: function() { if ( $('maploader') ) { var maploader = $('maploader'); maploader.addClassName('showmapsloader'); } this.maploader = true; }, /** * hideMaploader * * Hides the map loader bar * * @since Mon Dec 07 2009 * @access public * @return void **/ hideMaploader: function() { if ( $('maploader') ) { var maploader = $('maploader'); maploader.removeClassName('showmapsloader'); } this.maploader = false; }, /** * showRequestedInfowindow * * Opens the vacatureWindow with information for the requested vacature identified by requested * * @since Mon Oct 26 2009 * @access public * @param string requested * @return void **/ showRequestedInfowindow: function(requested) { GEvent.trigger(mctgmaps.knownmarkers.get(requested), 'click'); this.map.setCenter(mctgmaps.knownmarkers.get(requested).getPoint(), 11); }, /** * closeOverlay * * function that closes the vacature infowindow * * @since Fri Oct 23 2009 * @access public * @return void **/ closeOverlay: function() { if (this.currentMarker) { this.currentMarker.show(); this.map.removeOverlay(this.currentMarker.overlay); } this.currentMarker = false; return false; } });