Collaborama

Source: site.view [edit]
Function name:	mobilemap
Arguments:	data
Description:	Display a map of a given address or coordinate point
Page type:	html
Render function:
Module:	global
Page source:
<!-- 
Map can receive as input:
   - A string representing a single address
   - An object, with attributes 
     - items: a list of items to map - list
     - title: title for the map - string
     - width: width of the map - int
     - height: height of the map - int
     - image: html pointing to an image for the item
     - showIndex: true if should showIndex on righthand side - string "true"
     - zoomLevel: an integer specifying how much to zoom (1 = tight, 14 = far) - int
   - A list of items

Each item can be an object with
   - label: label of item - string
   - addr: address of location for item - string
   - desc: a description of the item (html) - string
   - lat: latitude (optional) - string
   - long: longitude (optional) - string
or a string (address)

Note:
   For some reason, googlemap's <div id="map"> doesn't work embedded in another <div>.  Instead of doing a short "HTML snippet", I was forced to do an "HTML page" and copy most of sitepage here.

   Currently, map only accepts a string address, but I want to allow accepting a list of addresses and/or a list of data points.  This is moving towards defining types, where we can pass functions as arguments (e.g. map(restaurants(palo alto))) or use context to resolve arguments (e.g. restaurants(palo alto); map)
-->

<!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">
  <head>
  <title>MAP</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <!-- link rel="stylesheet" type="text/css" href="/static/basic.css"/ -->
    <script src="http://maps.google.com/maps?file=api&v=1&key=<webl>wubinfo.googlemapkey</webl>" type="text/javascript"></script>
  </head>
  <body>



<h3><webl>
   var title = (data["title"] ? ToString(data));
</webl></h3>

    <div id="map" 
<webl>
   var w = (data["width"] ? "325");
   var h = (data["height"] ? "350");
   var s = `style="width: ` + ToString(w) + `px; height: ` + ToString(h) + `px">` 
</webl>
     </div>

    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    newpoints = new Array();
    map.addControl(new GMapTypeControl());
    map.addControl(new GSmallMapControl());

    function viewPoint(num) {
      this.map.centerAndZoom(new GPoint(this.newpoints[num][0],this.newpoints[num][1]),this.map.getZoomLevel());
      this.newpoints[num][4].openInfoWindowHtml(this.newpoints[num][3]);
    }

    // Create a marker, and info window when clicked
    function createMarker(point, label, desc) {
      var marker = new GMarker(point);

      // Show this marker's index in the info window when it is clicked.
      var html = "<b>" + label+ "</b><br><small>" + desc+ "<br><a href=\"javascript:this.map.zoomTo(3)\">Zoom</a></small>";
      GEvent.addListener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
      });
      return marker;
    }


<webl>
    var CLIPLEN=100;

    var addToMap = fun(item, zoomLevel)
      var label;
      var addr = "";
      var loc;
      if Type(item) == "string" then
         label = Str_Trim(data);
         addr = Str_Trim(data);
         loc = WubCall("geocode", [data])
      elsif Type(item) == "object" then
         label = (Str_Trim(item.label) ? item.title ? "Unknown Address");
         addr = (Str_Trim(item.addr) ? item.address ? "");
         var lat = (Str_Trim(item.lat) ? Str_Trim(item.latitude) ? "");
         var long = (Str_Trim(item.long) ? Str_Trim(item.longitude) ? "");
         if (addr != "") and (lat == "") and (long == "") then
            loc = WubCall("geocode", [addr])
         end
      end;
      var lat = (Str_Trim(loc.lat) ? (Str_Trim(item.lat) ? Str_Trim(item.latitude) ? "unknown"));
      var long = (Str_Trim(loc.long) ? (Str_Trim(item.long) ? Str_Trim(item.longitude) ? "unknown"));
      var desc = (Str_Trim(item.desc) ? label ? Str_Trim(addr) );
      var img = (item.image ? nil);
      // if img != nil then
      //   desc = img + desc
      // end;
      var s = "";
      if (lat != "unknown") and (long != "unknown") then
         s = `
            var G = new GPoint(` + long + "," + lat+ `);
           map.centerAndZoom(G, ` + zoomLevel + `);
           var marker = createMarker(G, "` + label + `","` + desc + `");
           map.addOverlay(marker);
           var newpoint = new Array(` + long + `,` + lat + `,"` + 
               label + `","<b>` + label + `</b><br><small>` + desc + 
               `<br><a href=\"javascript:this.map.zoomTo(3)\">Zoom</a></small>` + `",marker);
	   this.newpoints[this.newpoints.length] = newpoint;
         `;
      end;
      return s
    end;
    
    var s = "";
    var prob = "no prob";
    var zoomLevel = (data.zoomLevel ? "5");
    var listItems = [];
    if Type(data) == "list" then
       listItems = data
    elsif Type(data) == "object" then
       listItems = (data.items ? data.entries ? [])
    end;
 
    if Type(data) == "string" then
       s = addToMap(data, zoomLevel)
    else
       var k = 0;
       every d in listItems do
          var ddesc = (d.desc ? d.label ? d.addr ? d.address ? "Unknown Description");
          d.desc := Wub_TruncateWithEllipsis(ddesc, CLIPLEN);
          d.desc := Wub_ReplaceAll(ddesc, `"`, `'`);
          s = s + addToMap(d, zoomLevel);
          k = k + 1
       end

    end;
    s;

</webl>
    
    //]]>
    </script>

  </body>
</html>