Collaborama

Source: site.view [edit]
Function name:	map
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>WubHub</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=AIzaSyAO2RntyX5IUgDJmXO-i39U06wwIhKwdEE" type="text/javascript"></script>
    <!-- script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAO2RntyX5IUgDJmXO-i39U06wwIhKwdEE&sensor=false">
    </script -->
   
  </head>
  <body>

<webl>
var reqinfo, cmdinfo, usermsg;

if wubinfo.user != nil then
   usermsg = `User: <a href="/webl/WubHub_DoIt?cmdline=` + wubinfo.user + `.profile">`+wubinfo.user + `</a> [<a href="/webl/WubHub_DoIt?cmdline=site.logout">logout</a>]`
else
   usermsg = `Anonymous [<a href="/webl/WubHub_DoIt?cmdline=site.login">login</a>]`
end;

if wubinfo.cmd != nil then
  reqinfo = "Source: "+wubinfo.cmd+` [<a href="/webl/WubHub_DoIt?cmdline=site.edit(`+wubinfo.cmd+`)">edit</a>]`;
  cmdinfo = "Command: "+wubinfo.cmdline;
else
  reqinfo = "Source: (none)";
  cmdinfo = "";
end;
 
var header = Markup(WubCall("siteheader",[usermsg]));
header;
</webl>


<h1><webl>
   var title = (data["title"] ? "Map");
</webl></h1>

   <table>
    <tr><td valign=top>
    <div id="map" 
<webl>
   var w = (data["width"] ? "500");
   var h = (data["height"] ? "500");
   var s = `style="width: ` + ToString(w) + `px; height: ` + ToString(h) + `px">` 
</webl>
     </div>
    </td>
    <td valign=top>

    <div id="addrs">
      <webl>
        var s = "";
        var listItems = [];
        if Type(data) == "list" then
           listItems = data
        elsif Type(data) == "object" then
           listItems = (data.items ? data.entries ? [])
        end;
        var i = 0;
        var showIndex = ((data.showIndex == "true") ? false);
        if showIndex then
           every d in listItems do
             var addr = (Str_Trim(d.addr) ? Str_Trim(d.address) ? "Unknown Address");
             var label = (Str_Trim(d.label) ? Str_Trim(d.title) ? Str_Trim(addr) ? "Uknown Label");
             s = s + `<a href="javascript:viewPoint(` + ToString(i) + `)">` + label + `</a><br>`;
             s = s + addr + "<p>";
             i = i + 1
           end
        end;
        s;
      </webl>
    </div>
    </td>
    </tr>
    </table>

    <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) {
      // map = new google.maps.Map(document.getElementById('map'), {
      //    center: {lat: -34.397, lng: 150.644},
      //    zoom: 8
      //  });
      //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 = `<!-- OK -->
            var G = new GPoint(` + long + "," + lat+ `);
           // map.centerAndZoom(G, ` + zoomLevel + `);
           map.setCenter({lat: ` + lat + `, lng: ` + long + `});
           map.setZoom(` + 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 ? "14");
    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>


<webl>
   var cmdinfo;
   if wubinfo.cmd != nil then
      cmdinfo = "Command: "+wubinfo.cmdline;
   else
     cmdinfo = "";
   end;

   var footer = "<p>" + cmdinfo + "</p><p>Generated by WubHub (v. "+wubinfo.wubversion+")</p>";
   footer = `<div id="footer">` + footer + "</div>";
   footer;
</webl>

  </body>
</html>