Info

Show map Poster Source Code

This pages was developed for a project in course Data Mining - MTAT.03.183.
It takes data from Estonia's geocaching site http://www.geopeitus.ee and displays all hidden treasures on a single map. Only active normal, multi and puzzle type of treasures are shown. In this map you can also see a heatmap. It shows treasures density. Nearby treasures are also clustered together, when zooming in, they are displayed without clusters.

Main window code - reads data and displays map:


                    	<!-- 
    3rd party software used:
        FancyBox - http://fancybox.net/
        MarkerClusterer - http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/
        Bootstrap - http://getbootstrap.com/
        Google Maps API - https://developers.google.com/maps/
        jQuery - http://jquery.com/
        Geopeitus - http://www.geopeitus.ee/
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Geopeitus map</title>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_7kkgZXE1GcgF5VdtjzLT6sIRzPkVQ24&sensor=false&libraries=visualization">
    </script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0.2/src/markerclusterer_compiled.js"></script> 
    
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" media="screen" />
    
    <!-- Add fancyBox -->
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
    
    <style>
		html, body, #map-canvas {
			height: 100%;
			margin: 0px;
			padding: 0px;
		}
		#panel {
			position: absolute;
			top: 5px;
			left: 50%;
			margin-left: -180px;
			z-index: 5;
			padding: 5px;
			border: 1px solid #999;
		}
		.gm-style-iw{
			width: 100% !important;
		}
	</style>
    
    <script type="text/javascript">
		var heatmapData = [];
		var markers = [];
		var infoWindows = [];
		
		$(document).on("ready", function(){
			$(".fancybox").fancybox();
			function readDataFromFile(){
				// Reads data from file
				$.ajax({
					url : "coordinates2.txt",
					dataType: "text",
					async: false,
					success : function (data) {
						var splitedData = data.split(";");	
						for (var i=0;i<splitedData.length;i+=9){
							// Put coordinates to heatmap
							var location = new google.maps.LatLng(splitedData[i+1], splitedData[i+2]);
							heatmapData.push(location);
	
							// read all images
							var images = splitedData[i+3].split(",");
							// make icons
							var iconImage = new google.maps.MarkerImage(
								'http://www.geopeitus.ee/pic/t'+images[0]+'.jpg',
								null, /* size is determined at runtime */
								null, /* origin is 0,0 */
								null, /* anchor is bottom center of the scaled image */
								new google.maps.Size(50, 50)
							);
							
							var marker = new google.maps.Marker({
								position : location,
								map : map,
								icon : iconImage,
								animation : google.maps.Animation.DROP,
								infoWindowIndex : i
							});
							
							switch(splitedData[i+4]) {
							case '0':
								var type="M&otilde;istatusaare";
								break;
							case '1':
								var type="Tavaline aare";
								break;
							default:
								var type="Multiaare";
							} 
							// Add all images to lightbox
							var imagesString = '<a class="fancybox" rel="group" href="http://www.geopeitus.ee/pic/'+images[0]+'.jpg">'+
								'<img border="0" src="http://www.geopeitus.ee/pic/t'+images[0]+'.jpg" /></a>';
							if(images.length>1){
								for (var img=1;img<images.length;img+=1){
									imagesString += '<a class="fancybox" rel="group" href="http://www.geopeitus.ee/pic/'+images[img]+'.jpg"></a>';
								}
							}
	
							// Infowindow content
							var contentString = '<div id="content">'+
								'<div id="siteNotice">'+
								'</div>'+
								'<a href="http://www.geopeitus.ee/aare/'+splitedData[i+8]+'" target="_blank">'+
								'<h1 id="firstHeading" class="firstHeading">'+splitedData[i]+'</h1></a>'+
								'<div id="bodyContent">'+
								imagesString+
								'<br />T&uuml;&uuml;p: '+type+
								'<br />Peidukoha raskusaste: '+splitedData[i+5]+
								'<br />Maasiku raskusaste: '+splitedData[i+6]+
								'<br />Aarde suurus: '+splitedData[i+7]+
								'</div>'+
								'</div>';
	
							var infoWindow = new google.maps.InfoWindow({
								content : contentString
							});
	
							infoWindows.push(infoWindow);
							markers.push(marker);
						}
					}
				});
				startMap();
			}
			readDataFromFile();
			
		});
		
		var map, pointarray, heatmap, markerCluster;
		
		function initialize() {
			var mapOptions = {
				zoom: 8,
				center: new google.maps.LatLng(58.831401, 25.591504),
				mapTypeId: google.maps.MapTypeId.HYBRID  
			};
			
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);		
	
			markerCluster = new MarkerClusterer(map, markers); // adds markers to clusters
			
			google.maps.event.addListener(map, 'idle', showMarkers(map));
			
			var pointArray = new google.maps.MVCArray(heatmapData);
			
			heatmap = new google.maps.visualization.HeatmapLayer({
				data: pointArray
			});  	
	
			heatmap.setMap(map);
			
			changeRadius(); // makes heatmap radius bigger at the start
		
		}
		
		function showMarkers(map){
			for (var i=0;i<markers.length;i++){
				markers[i].setMap(map);
				bindInfoWindow(markers[i], map, infoWindows[i]);
			}
		}
		
		function bindInfoWindow(marker, map, infowindowSelected) {
			google.maps.event.addListener(marker, 'click', function(event) {
				closeAllInfoWindows();
				infowindowSelected.open(map, marker);
			});
		}
		
		function closeAllInfoWindows() {
			for (var i=0;i<infoWindows.length;i++) {
				infoWindows[i].close();
			}
		}
		
		function toggleHeatmap() {
			heatmap.setMap(heatmap.getMap() ? null : map);
		}
		
		function toggleMarkers() {
			for (var i = 0; i < markers.length; i++) {
				var marker = markers[i];
				if (marker.getVisible()) {
					marker.setVisible(false);
					if(i==markers.length-1){
						markerCluster.clearMarkers();
					}
				} else {
					marker.setVisible(true);
					if(i==markers.length-1){
						markerCluster.addMarkers(markers);
					}
				}
			} 
		}
		
		function changeRadius() {
			heatmap.set('radius', heatmap.get('radius') ? null : 30);
		}
		
		function startMap() {
			google.maps.event.addDomListener(window, 'load', initialize);
		}
	</script>
    </head>
    
    <body>
        <div id="panel">
            <button onclick="toggleHeatmap()" class="btn btn-default" >Toggle Heatmap</button>
            <button onclick="changeRadius()" class="btn btn-default" >Change radius</button>
            <button onclick="toggleMarkers()" class="btn btn-default" >Toggle markers</button>
            <a href="info.html" class="btn btn-default" >Info</a>
        </div>
        <div id="map-canvas"></div>
    </body>
</html>

PHP page what gathers data:


                    	<?php
// To run this code longer
ini_set('max_execution_time', 18000);

// Run when form is submitted 
if(isset($_POST['start'])){
	$start = $_POST['start'];
	$stop = $_POST['stop'];
	getData($start, $stop);
	echo "Done!";
}

// Gets data from geopeitus.ee 
function getData($start, $stop){
	$file = 'coordinates3.txt'; // file to put results
	file_put_contents($file, ""); // empties previous file
	$result="";
	$limit = $stop;
	for ($i = $start; $i <= $limit; $i++) {
		$content = file_get_contents('http://www.geopeitus.ee/aare/'.$i);
		// Takes only regular, multy and puzzle treasures
		if (strpos($content,'<h1><font color=red>!!! Arhiveeritud !!!</font></h1>') === false && strpos($content,'</a><br/></td></tr><tr><td>Tüüp: <b>Sündmusaare</b>') === false && strpos($content,'</a><br/></td></tr><tr><td>Tüüp: <b>Veebikaamera</b> ') === false
			 && strpos($content,'</a><br/></td></tr><tr><td>Tüüp: <b>Asukohata (tagurpidi) aare</b> ') === false  && strpos($content,'</a><br/></td></tr><tr><td>Tüüp: <b>Virtuaalne aare</b> ') === false) {
				preg_match('/class=\"left\" \/\>\<\/a\>\n(.*?)\<\/h1\>/', $content, $treasureName); // tries to get treasure name
				if (sizeof($treasureName) > 1) {
					$name = $treasureName[1];
					$name = str_replace("; ", ", ", $name);
					preg_match('/dd\.dddd\: \<b\>(.*?)\<\/b\>/m', $content, $coordinate); // finds treasures coordinates
					if (sizeof($coordinate) > 1) {
						preg_match_all('/\<div class=\"evpic\" id=\"pic(.*?)\"\>\<a target/', $content, $treasureImage); // looks for user posted images
						$images = "";
						if(sizeof($treasureImage[1]) > 0){						
							for($c=0; $c<sizeof($treasureImage[1]); $c++){
								$images .= $treasureImage[1][$c].",";
							}
						}
						preg_match_all('/\<div class=\"cachepic\" id=\"pic(.*?)\"\>\<a target/', $content, $treasureImage2); // looks for authors images
						if(sizeof($treasureImage2[1]) > 0){
							for($c=0; $c<sizeof($treasureImage2[1]); $c++){
								$images .= $treasureImage2[1][$c].",";
							}
						}else if($images==""){ // if no images is found, show default image
							$images = "1771,";
						}	
						$images = substr($images, 0, -1); // remove last coma
						$type=0;
						preg_match('/td\>Tüüp: \<b\>(.*?)\<\/b\> /', $content, $treasureType); // get treasure type
						if (sizeof($treasureType) > 1) {
							switch ($treasureType[1]) {
								case "Tavaline aare":
									$type=1;
									break;
								case "Multiaare":
									$type=2;
									break;
							}
						}
						$hiding=0;
						preg_match('/\<b\>Raskusaste:\<\/b\> peidukoht (.*?), maastik /', $content, $hidingPlace); // get hiding place level
						if (sizeof($hidingPlace) > 1) {
							$hiding=$hidingPlace[1];
						}
						$terrain=0;
						preg_match('/, maastik (.*?) \<b\>Suurus:\<\/b\> /', $content, $terrainLevel); // get terrian level
						if (sizeof($terrainLevel) > 1) {
							$terrain=$terrainLevel[1];
						}
						$size="normaalne";
						preg_match('/ \<b\>Suurus:\<\/b\> (.*?)\<\/td\>\<\/tr\>\<\/table\>/', $content, $treasureSize); // get trasure size
						if (sizeof($treasureSize) > 1) {
							$size=$treasureSize[1];
						}
						$coordinates = $coordinate[1];
						$coordinates = str_replace(",", ".", $coordinates);
						$coordinates = str_replace(" ", ";", $coordinates);				
						$result = $name.";".$coordinates.";".$images.";".$type.";".$hiding.";".$terrain.";".$size.";".$i.";";
						// if this treasure is not in file put it there
						if(strpos(file_get_contents($file), ";".$i.";")=== false){
							file_put_contents($file, $result, FILE_APPEND);
						}
					}
				}
		}
//		sleep(1);
		usleep(500000); // wait 0,5 secondsbefore making new query
	}
	// removes last semicolon from file
	$fileContent = file_get_contents($file);
	file_put_contents($file, substr($fileContent, 0, -1));
}

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Get data</title>
    </head>
    
    <body>
        <form name="data" method="post" action="getdata.php">
            <p>
                <label for="start">Start: </label>
                <input type="text" name="start" id="start" required>
            </p>
            <p>
                <label for="stop">Stop: </label>
                <input type="text" name="stop" id="stop" required>
            </p>
            <p>
            	<input type="submit" name="submit" id="submit" value="Submit">
            </p>
        </form>
        <p><a href="index.php" title="Go To Map" target="_self">To map</a></p>
    </body>
</html>

Geopeitus map - Info by: Lauri Laur

Main window code - reads data and displays map:

PHP page what gathers data: