Changeset 7722 for trunk/src/map


Ignore:
Timestamp:
Apr 12, 2010, 7:11:44 PM (15 years ago)
Author:
janveeden
Message:

Replaced GGeoXML with our own KMLHandler. It is now possible to identify individual nodes. Temporary mouse over demo inside.

Location:
trunk/src/map
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/map/inc/nodemapWL.js

    r7694 r7722  
     1//Declaring some variables we will be using
    12var map;
    2 var geoXml;
    33var toggleState = 1;
     4var marker_hash = {};
    45
     6        //This function is called from index.php
    57        function initialize_map() {
     8          //We will only do this function if the browser is compatible
    69          if (GBrowserIsCompatible()) {
    7             geoXml = new GGeoXml("http://www.mantixweb.nl/nodemap/example.kml?tijd=10342");
     10            //Adding the google map into the div called #mapcanvas
    811        map = new GMap2(document.getElementById("mapcanvas"));
     12                //Center the map on Leiden
    913        map.setCenter(new GLatLng(52.162687, 4.493294), 11);
    1014        map.setUIToDefault();
    11         map.addOverlay(geoXml);
     15               
     16                //Go through the array 'markers' (Declared in index.php) and add a marker for each marker stored in the array using our addMarker function
     17                for (var i=0; i<markers.length; i++) {
     18            var current = markers[i];
     19            var marker  = addMarker(current);
     20            marker_hash[current.id] = {marker : marker};
     21        }
    1222          }
    1323        }
    1424       
    15         function toggleMyKml() {
     25        //This function will contain the displaying and not displaying of nodes on the map
     26        function toggleNodes() {
    1627          if (toggleState == 1) {
    1728        map.removeOverlay(geoXml);
    … …  
    2233          }
    2334        }
     35       
     36        //This function adds a marker with an object from our 'marker'array defined in index.php
     37        function addMarker(current) {
     38      var marker  = new GMarker(new GLatLng(current.latitude[0], current.longitude[0]));
     39      map.addOverlay(marker);
     40          //Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
     41      GEvent.addListener(marker, 'mouseover', function() {
     42          mouseOver(current.id, current.name[0]);
     43      });
     44      return marker;
     45    }
     46       
     47        //Our mouseover function
     48        function mouseOver(id, name)
     49        {
     50                //For now we only post the id(We made ourself in kmlHandler) and the name of the node
     51                this.obj = document.getElementById("infotop");
     52                obj.innerHTML = id+" - "+name;
     53                //We will replace this function with a httprequest to a php file in the future
     54        }
    2455

  • trunk/src/map/index.php

    r7719 r7722  
     1<?php require_once("inc/kmlHandler.php"); ?>
     2
    13<html>
    24<head>
    … …  
    810        <link href="style/stylesheet2.css" rel="stylesheet" type="text/css">
    911<![endif]-->
     12
     13<!-- Make our $marker[] array from kmlHandler available to javascript in JSON-->
     14<script>
     15var markers = <?php echo json_encode($markers); ?>;
     16</script>
    1017
    1118<!-- Loading in the google-api -->
Note: See TracChangeset for help on using the changeset viewer.