openumea-recreational_facilities/htdocs/js/facilities.js

var map;
var pois;
var selectControl;

function init() {
	map = new OpenLayers.Map("mapdiv");
	//map.addControl(new OpenLayers.Control.LayerSwitcher());
	var osm = new OpenLayers.Layer.OSM();
/*	var osm = new OpenLayers.Layer.WMS(
		"OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
		{layers: 'basic'}
	);*/

	map.addLayers([osm]);
	update_markers();
 
	//Set start centrepoint and zoom	
	var lonLat = new OpenLayers.LonLat( 20.263889, 63.825 )
		  .transform(
			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			map.getProjectionObject() // to Spherical Mercator Projection
		  );
	var zoom=9;
	map.setCenter (lonLat, zoom);
}

function update_markers() {
	if (pois) {
		while( map.popups.length ) {
			 map.removePopup(map.popups[0]);
		}
		pois.destroyFeatures();
		map.removeLayer(pois);
		selectControl.deactivate();
	}
	
	selectbox = document.getElementById('btype');
	btype = [];
	for (var i=0; i<selectbox.options.length; i++) {
		if (selectbox.options[i].selected) {
			btype.push(selectbox.options[i].value);
		}
	}

	pois = new OpenLayers.Layer.Vector("Umeå Fritid Facilities", {
		strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
		protocol: new OpenLayers.Protocol.HTTP({
			url: "./filter-markers.php?btype[]=" + btype.join('&btype[]='),
			format: new OpenLayers.Format.Text()
		})
	}); 
	map.addLayer(pois);

	selectControl = new OpenLayers.Control.SelectFeature(pois);
	map.addControl(selectControl);
	selectControl.activate();
	pois.events.on({
		'featureselected': onFeatureSelect,
		'featureunselected': onFeatureUnselect
	});

	update_facility_list(btype);

	// Needed only for interaction, not for the display.
	function onPopupClose(evt) {
		// 'this' is the popup.
		var feature = this.feature;
		if (feature.layer) { // The feature is not destroyed
			selectControl.unselect(feature);
		} else { // After "moveend" or "refresh" events on POIs layer all 
				 //	 features have been destroyed by the Strategy.BBOX
			this.destroy();
		}
	}
	function onFeatureSelect(evt) {
		feature = evt.feature;
		popup = new OpenLayers.Popup.FramedCloud("featurePopup",
								 feature.geometry.getBounds().getCenterLonLat(),
								 new OpenLayers.Size(100,100),
								 facility_popup_data(feature.attributes.id),
								 null, true, onPopupClose);
		feature.popup = popup;
		popup.feature = feature;
		map.addPopup(popup, true);
	}
	function onFeatureUnselect(evt) {
		feature = evt.feature;
		if (feature.popup) {
			popup.feature = null;
			map.removePopup(feature.popup);
			feature.popup.destroy();
			feature.popup = null;
		}
	}
}

function update_facility_list(btype) {
	var r = new XMLHttpRequest();
	r.open("GET", "./facility-list.php?btype[]=" + btype.join('&btype[]='), false);
	r.send();

	var databox = document.getElementById('facility-list');
	databox.innerHTML = r.responseText;
}

function facility_popup_data(facility_id) {
	var r = new XMLHttpRequest();
	r.open("GET", "./facility-data.php?id=" + facility_id + "&popup", false);
	r.send();

	return r.responseText;
}

function update_facility_data(facility_id) {
	var r = new XMLHttpRequest();
	r.open("GET", "./facility-data.php?id=" + facility_id, false);
	r.send();
	var databox = document.getElementById('facility-data');
	databox.innerHTML = r.responseText;

	make_facility_popup(facility_id);
}

function make_facility_popup(facility_id) {
	// using layer 'pois'
	for (var i=0; i<pois.features.length; i++) {
		feature = pois.features[i];
		if (feature.attributes.id == facility_id) {
			map.setCenter(feature.geometry.getBounds().getCenterLonLat(), 16);
			selectControl.select(feature);
			break;
		}
	}
}