Changeset 8843


Ignore:
Timestamp:
Feb 21, 2011, 11:51:23 AM (14 years ago)
Author:
dennisw
Message:

website_ontwerp - gheat implementatie, stuk heatmap in USA (standaard testdata uit gheat)

Location:
src/website_ontwerp
Files:
200 added
3 deleted
3 edited

Legend:

Unmodified
Added
Removed

  • src/website_ontwerp/css/style.css

    r8836 r8843  
    99
    1010#wrapper{
    11         background-image:url('../img/bg.png');
     11        background-image:url('../img/bg.jpg');
    1212        background-repeat: no-repeat;
    1313        width:960px;
    … …  
    2222        width:910px;
    2323        height:100px;
    24         background-image:url('../img/header.png');
     24        background-image:url('../img/header.jpg');
    2525        padding-top:21px;
    2626        padding-left:50px;

  • src/website_ontwerp/index.html

    r8836 r8843  
    99</head>
    1010
    11 <body onload="initialize()">
     11<body onload="initialize()" onunload="GUnload()">
    1212<div id="wrapper">
    1313        <div id="header">
    14         <a href="index.html"><img src="img/logo.png" border="0" style="float: left;"/></a>
     14        <a href="index.html"><img src="http://localhost:8080/img/logo.jpg" border="0" style="float: left;"/></a>
    1515        &nbsp; <font style="font-size:24px; color:white;">Stichting Wireless Leiden</font><br />
    1616        &nbsp; <font style="font-size:46px; color:white;">Heatmap</font>
    … …  
    1818        <div id="content">
    1919        <h1>Info</h1><br />
    20         Rechts is een implementatie van Google Maps te zien met 3 lat/long punten die een polygon vormen.
     20        Rechts is een heatmap te zien met standaard testdata uit gheat. Let op dat het hier alleen om de USA gaat, en dat niet op elk zoomlevel een plaatje te zien is.<br /><br />
     21        Inzoomen op Dallas geeft op het moment het beste resultaat.
    2122        </div>
    2223        <div id="heatmap"></div>

  • src/website_ontwerp/script/gmap.js

    r8836 r8843  
    11  function initialize() {
    2     var myLatlng = new google.maps.LatLng(52.164309,4.493694);
     2    var myLatlng = new google.maps.LatLng(41.257989,-98.642582);
    33    var myOptions = {
    4       zoom: 14,
     4      zoom: 4,
    55      center: myLatlng,
    66      mapTypeId: google.maps.MapTypeId.ROADMAP
    77    }
    88    var map = new google.maps.Map(document.getElementById("heatmap"), myOptions);
    9 
     9        map.overlayMapTypes.insertAt(0, heatmap);
     10  }     
    1011       
    11   var bermudaTriangle;
    12   var triangleCoords = [
    13     new google.maps.LatLng(52.162197,4.490733),
    14     new google.maps.LatLng(52.162092,4.497428),
    15     new google.maps.LatLng(52.159723,4.493222),
    16     new google.maps.LatLng(52.162197,4.490733)
    17   ];
    18 
    19   // Construct the polygon
    20   // Note that we don't specify an array or arrays, but instead just
    21   // a simple array of LatLngs in the paths property
    22   bermudaTriangle = new google.maps.Polygon({
    23     paths: triangleCoords,
    24     strokeColor: "#FF0000",
    25     strokeOpacity: 0.8,
    26     strokeWeight: 2,
    27     fillColor: "#FF0000",
    28     fillOpacity: 0.35
    29   });
    30 
    31   bermudaTriangle.setMap(map);
    32 
    33   }
     12        var heatmap = new google.maps.ImageMapType({
     13        getTileUrl: function(coord, zoom)
     14        {
     15        return 'classic/' + zoom + '/' + coord.x + ',' + coord.y + '.png';
     16        },
     17        tileSize: new google.maps.Size(256, 256),
     18        isPng: true
     19    });
Note: See TracChangeset for help on using the changeset viewer.