legend results from the CPAN

HTML-GMap


    
    $files{'gmap-main.css'}{'type'}    = 'ascii';
    $files{'gmap-main.css'}{'content'} = <<'CONTENT';
/*
Author: Payan Canaran (pcanaran@cpan.org)
Copyright 2006-2007 Cold Spring Harbor Laboratory
$Id: Files.pm,v 1.13 2007/09/19 01:49:12 canaran Exp $
*/

body {
    text-align: center;
    font-family: arial;
}    

th {
  font-size: 12px;
}

td {
  font-size: 12px;
  vertical-align: top;
}

table.container {
  border: 1px dashed #333;
  background-color: #F5F5DC;
  text-align: left;
  font-size: 13px;
}

div.sub_header {
  padding: 4px;
  font-size: 14px;
  font-weight: bold;
}

div.status {
  padding: 4px;
  width: 250px;
}

div.filter {
  padding: 4px;
  width: 240px;
}

div.messages {
 padding: 4px;
 width: 250px;
 overflow: auto;
}

div.details_info {
  padding: 4px;
  height: 110px;
  width: 240px;
  overflow: auto;
}

div.legend_info {
  padding: 4px;
  height: 490px;
  width: 180px;
  font-weight: bold;
  overflow: auto;
}

div.float_right {
  clear: right;
  display: inline;
}

div.hidden {
  visibility: hidden;
  display: inline;
}

div.visible {
  visibility: visible;
  display: inline;
}

font.bold {
  font-weight: bold;
}

CONTENT
    
    $files{'gmap-main.html'}{'type'}    = 'ascii';
    $files{'gmap-main.html'}{'content'} = <<'CONTENT';
<!--
Author: Payan Canaran (pcanaran@cpan.org)
Copyright 2006-2007 Cold Spring Harbor Laboratory
$Id: Files.pm,v 1.13 2007/09/19 01:49:12 canaran Exp $
-->

[% cgi_header %]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <link rel="stylesheet" type="text/css" href="[% gmap_main_css_file_eq %]" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>[% page_title %]</title>

    <style type="text/css">
        v\:* {
          behavior:url(#default#VML);
        }
    </style>
</head>

<body>
    [% header %]

    <h1>[% page_title %]</h1>

    <table align="center" class="container">
        <tr>
            <td>
                <div class="sub_header">Legend: </div>
                <div id="legend" class="legend_info"></div>
                <p/>
                <div id="legend_message"></div>
            </td>
        
            <td>
                <div id="map" style="height: [% image_height_pix %]px; width: [% image_width_pix %]px">
                Loading map ...
                </div>
            </td>

            <td>
                <div class="sub_header">Status: </div>
                <div id="status" class="status">Initializing ...</div>

                <div>
                    <form id="filter">
                    <div class="sub_header">Filter: </div>

                    <div class="filter">
                        <table width="100%">
                            [% FOREACH field = param_fields_with_values %]
                            <tr>
                                <!-- Param [% field.name %] -->
                                <td align="left">
                                    <font class="bold">[% field.display %]:</font>
                                </td>
                                <td align="right">
                                    <select id="[% field.name %]" name="[% field.name %]">
                                        [% FOREACH value = field.values %]
                                        <option value="[% value.param %]">[% value.display %]</option>
                                        [% END %]
                                    </select>
                                </td>
                            [% END %]
                            </tr>
                        </table>
                   
                        <div id="cluster_slices_group" class="visible">
                            [% IF display_cluster_slices %]
                            <table width="100%">
                                <tr>
                                    <td align="left">
                                        <input id="cluster_slices" type="checkbox" name="cluster_slices"></input>
                                        Cluster rare values:
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        (less than
                                        <input id="cluster_slices_value" type="text" name="cluster_slices_value" size="2" value="2">
                                        <select id="cluster_slices_by" name="cluster_slices_by">
                                            <option value="percent" selected="1">%</option>
                                            <option value="count">pt</option>
                                        </select>
                                        per tile)
                                    </td>
                                </tr>
                            </table>
                            [% END %]
                        </div>
    
                        <div>

lib/HTML/GMap/Files.pm view on Meta::CPAN

    var lngMid   = (lngWest < lngEast) ? lngWest + (lngEast - lngWest) / 2
                                       : lngWest + ((lngEast - (-180)) + (180 - lngWest)) / 2;
    if (lngMid > 180) { // Longitude +180 continues with -180
        lngMid = -180 + (lngMid - 180); // (lngMid - 180) is overflow over 180'
    }

    // Longitude +180 continues with -180
    tileSideLng = (lngWest < lngEast) ? (lngEast - lngWest) / numberOfHorizontalTiles              
                                      : ((lngEast - (-180)) + (180 - lngWest)) / numberOfHorizontalTiles;

    tileSideLat = (latNorth - latSouth) / numberOfVerticalTiles;

//  document.getElementById("debug").innerHTML =   '> latNorth:' + latNorth
//                                               + ' latSouth:' + latSouth
//                                               + '<br>'
//                                               + ' lngWest:'  + lngWest
//                                               + ' lngEast:'  + lngEast
//                                               + ' tileSideLng:'  + tileSideLng
//                                               + '<br/>';

    for (var n = 1; n < numberOfHorizontalTiles; n++) {
        // Draw longitudes
        var lngNth = lngWest + n * tileSideLng;

        if (lngNth > 180) { // Longitude +180 continues with -180
            lngNth = -180 + (lngNth - 180); // (lngNth - 180) is overflow over 180'
        }

        var polyline = new GPolyline([
            new GLatLng(latNorth, lngNth),
            new GLatLng(latSouth, lngNth)
            ], "#ff8b04", 2);
        map.addOverlay(polyline);
        map.addOverlay(polyline); // Every other polyline is skipped, a potential bug; observe 8/10/07        
    }   

    for (var n = 1; n < numberOfVerticalTiles; n++) {
        // Draw latitudes
        var latNth = latSouth + n * tileSideLat;

        var polyline = new GPolyline([
            new GLatLng(latNth, lngWest),
            new GLatLng(latNth, lngMid),   // A mid point is needed to ensure direction of the line is correct
            new GLatLng(latNth, lngEast)
            ], "#ff8b04", 2);
        map.addOverlay(polyline);
        map.addOverlay(polyline); // Every other polyline is skipped, a potential bug; observe 8/10/07       
    }

// document.getElementById("debug").innerHTML = 'zoom:' + map.getZoom();

    return 1;
}

// Start refresh (clear overlays and messages)
function startRefresh() {
    // Clear existing overlays
    map.clearOverlays();

    document.getElementById("status").innerHTML         = 'Moving ...';
    document.getElementById("legend").innerHTML         = '';
    document.getElementById("legend_message").innerHTML = '';
    document.getElementById("details").innerHTML        = '';
}

// Refresh display (clear overlays, send an AJAX request, process request)
function doRefresh(event) {
    var drawGrid = varStore.drawGrid;

    // Clear existing overlays
    map.clearOverlays();

    document.getElementById("status").innerHTML = "Refreshing ...";

    // Construct URL based on coordinates and form values
    var requestUrl = constructUrl();

    // Query database, pass results on for parsing
    GDownloadUrl(requestUrl, processRequest); // No parentheses

    // Draw grid
    if (drawGrid > 0) {
        addLatLngLines();
    }    
}

// Place markers on the map
function processRequest(data, responseCode) {
    var xml = GXml.parse(data);

    var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
        var lat = parseFloat(markers[i].getAttribute("latitude"));
        var lng = parseFloat(markers[i].getAttribute("longitude"));

        var iconUrl         = markers[i].getAttribute("icon_url");
        var iconSize        = markers[i].getAttribute("icon_size");
        var messagesOnClick = markers[i].getAttribute("messages_on_click");
        var detailsOnClick  = markers[i].getAttribute("details_on_click");
        var legendOnClick   = markers[i].getAttribute("legend_on_click");

        var point = new GLatLng(lat, lng);

        addMarker(point, iconUrl, iconSize, legendOnClick, detailsOnClick, messagesOnClick);

        document.getElementById("details").innerHTML = '[Click on an icon on the map for details ...]';
    }

    var metaData = xml.documentElement.getElementsByTagName("meta_data"); // Only one present

    var legendByDefault   = metaData[0].getAttribute("legend_by_default");
    var detailsByDefault  = metaData[0].getAttribute("details_by_default")
    var messagesByDefault = metaData[0].getAttribute("messages_by_default")

    if (legendByDefault) {
        document.getElementById("legend").innerHTML = legendByDefault;
    }

    if (detailsByDefault) {
        document.getElementById("details").innerHTML = detailsByDefault;
    }

    if (messagesByDefault) {
        document.getElementById("messages").innerHTML = messagesByDefault;
    }

document.getElementById("status").innerHTML = "Ready";
}

// Utility function to add a marker
function addMarker(point, iconUrl, iconSize, legendOnClick, detailsOnClick, messagesOnClick) {
    var icon   = createIcon(iconUrl, iconSize);
    var marker = new GMarker(point, icon);

    if (legendOnClick) {
        GEvent.addListener(marker, "click", function() {
            document.getElementById("legend").innerHTML = legendOnClick;
        })
    };

    if (detailsOnClick) {
        GEvent.addListener(marker, "click", function() {
            document.getElementById("details").innerHTML = detailsOnClick;
        })
    };

    if (messagesOnClick) {
        GEvent.addListener(marker, "click", function() {
            document.getElementById("message").innerHTML = messagesOnClick;
        })
    };

    map.addOverlay(marker);
}

// Utility function to create an icon object to be used as a marker
function createIcon(imageUrl, size) {
    var icon                = new GIcon();
    icon.image              = imageUrl;

    icon.shadow             = "";
    icon.iconSize           = new GSize(size, size);
    icon.shadowSize         = "";
    icon.iconAnchor         = new GPoint(Math.floor(size/2)+1, Math.floor(size/2)+1);
    icon.infoWindowAnchor   = new GPoint(Math.floor(size/2)+1, Math.floor(size/2)+1);;
    return icon;
}

// Utility function to toggle cluster slices group
function toggleClusterSlicesGroup(event) {
    var element      = Event.element(event);
    var elementValue = element.value;

    var clusterSlicesGroup = document.getElementById("cluster_slices_group");

    if (elementValue == 'all') {
        clusterSlicesGroup.className = 'visible';
    }

    else {
        clusterSlicesGroup.className = 'hidden';
    }
}

// Utility function to limit zoom
function limitZoom() {
    var zoom = map.getZoom();

    if (zoom < 2) {
        map.setZoom(2);
    }
}

// Utility function to limit vertical move
function limitVerticalMove() {
    var mapBounds = map.getBounds();

( run in 0.591 second using v1.01-cache-2.11-cpan-e1769b4cff6 )