Unofficial JDA (Javascript Dataflow Architecture) WikiPublic Space

SimpleGoogleMapInfotron

Simple and delicious! Creates a google map wherever it's dropped and plops out locations as soon as they're passed to the input terminal. Details are for some reason posted separately.

When any location is clicked, the details for the clicked location are posted on the clicked_location_out otuput terminal.

Demos that use it

  • multi_map.html

BLUEPRINT(
"~01136DD508DAE741d1A6EAEEFC189ACC16",
[
 ["locations_in", "onLocations", 10],
 ["detail_in", "onDetail", 10]
],
[
 "clicked_location_out"
],
function(Class) 
{
  Class.prototype._onInit = function(props)
  {
    var lat = props["center_lat"];
    var lon = props["center_lon"];
    var size = [parseInt(this._getCssProp(this.dom_node,
                           "width")), 
             parseInt(this._getCssProp(this.dom_node,
                           "height"))];

    if (isNaN(lat)) {
      lat = 37.5038;
    }
    if (isNaN(lon)) {
      lon = 127.0046;
    }

    // Create a map object     
    this._map = new GMap2(this.dom_node);
    
    this._map.setCenter(new GLatLng(lat, lon), 14);
    // Display the map centered on a latitude and longitude 
    
    //this._map.drawZoomAndCenter(new GLatLng(0,0), 1);
    
    // Set map type to either of: YAHOO_MAP_SAT YAHOO_MAP_HYB YAHOO_MAP_REG
    
    this._map.setMapType(G_NORMAL_MAP);


    if (props["shows_zoom_control"] &&
        props["shows_map_type_control"] &&
        props["shows_pan_control"]) {
      this._map.addControl(new GSmallMapControl());
    }



    //_map.addZoomLong();
    this._registerEvent();
  };


  Class.prototype._getCssProp = function(node, prop)
  {
    if (node.currentStyle) {
      if (node.currentStyle.getAttribute) {
    return node.currentStyle.getAttribute(prop.replace(/-/g,""));
      } else {
    return node.currentStyle[prop.replace(/-/g,"")];
      }
    } else {
      
      return node.ownerDocument.defaultView.getComputedStyle(node,
                                 null).getPropertyValue(prop);
    }
  };


  Class.prototype._registerEvent = function()
  {
    var self = this;

    function _onClick(m)
    {
    self.postMessage("clicked_location_out", m.eform);
    }

    GEvent.addListener(this._map, "click", function(marker, point) {
             if (marker) {
               
               _onClick(marker);
               
             }
               });
  }

    Class.prototype.onDetail = function(msg)
    {

    var o, p;
    var entity_info = "", contact_info = "", aux_info = "";
    
    if (msg.length == 1) {
      // got an array of one
      msg = msg[0];
    } else if (typeof(msg) != "object") {
      self.error("expected single item, got " + msg);
      
      return;
      /***********************************************************************/
    }

    p = new GLatLng(msg["latitude"], msg["longitude"]);
    
    if (!msg["html_content"]) {
      entity_info = msg["name"];
      
      if (msg["uri"]) {
    entity_info = "" + entity_info + "";
      }
      
      entity_info += "
" + (msg["description"] || "");
      
      contact_info = (msg["telephone_number"] || "No Phone Number");
      
      if (msg["image_data"]) {
    aux_info = "
";
      }

      aux_info += msg["text_content"] || "";

      html = "
" + 
    entity_info + "
" + msg["street"] + "
" + aux_info + "
" + contact_info + "
";
    } else {
      html = msg["html_content"];
    }


        this._map.openInfoWindow(p, html);
    this._map.setCenter(p);

    }

    Class.prototype.onLocations = function(msg)
    {
        var i, n, item, m, o, bound, zoom, pt, center;
        var coll = [];

        n = msg.length;

        this._map.clearOverlays();

       bound = new GLatLngBounds();

        for (i = 0; i < n; i ++) {
            item = msg[i];
            p = new GLatLng(item["latitude"], item["longitude"]);
            pt = this._map.fromLatLngToDivPixel(p);
          
  if (!isNaN(pt.x) && !isNaN(pt.y)) {
                m = new GMarker(p);
                m.eform = item;
                this._map.addOverlay(m);
                bound.extend(p);
            }
        }
        

    zoom = this._map.getBoundsZoomLevel(bound);
    
    this._map.setZoom(zoom);
    this._map.setCenter(bound.getCenter());
    };

}, "Google Map");
View Page History
Print this page