Unofficial JDA (Javascript Dataflow Architecture) Wiki

This blueprint works similar to the SimpleGoogleMapInfotron blueprint (ref.)

Demos that use it

• map.html
• multi_map.html

BLUEPRINT(
"~0159FB811A80C9434f92D0E93B84A58FB6",
[
 ["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 = new YSize(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 YMap(this.dom_node, null, size);
    
    // Display the map centered on a latitude and longitude 
    
    this._map.drawZoomAndCenter(new YGeoPoint(lat,lon), 4);
    
    // Set map type to either of: YAHOO_MAP_SAT YAHOO_MAP_HYB YAHOO_MAP_REG
    
    this._map.setMapType(YAHOO_MAP_REG);
    
    if (props["shows_zoom_control"]) {
      this._map.addZoomLong();
    }

    if (props["shows_map_type_control"]) {
      this._map.addTypeControl();
    }

    if (props["shows_pan_control"]) {
      this._map.addPanControl();
    }
  }

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


  Class.prototype._registerEvent = function(m)
  {
      var self = this;
      YEvent.Capture(m, EventsList.MouseClick, function () { 
		       self.postMessage("clicked_location_out", m.eform); 
		     });
  }

  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 YGeoPoint(msg["latitude"], msg["longitude"]);
    
    if (!msg["html_content"]) {
      entity_info = msg["name"];
      
      if (msg["uri"]) {
	entity_info = "<a target='_blank' href='" + msg["uri"] + "'>" + entity_info + "</a>";
      }
      
      entity_info += "<br />" + (msg["description"] || "");
      
      contact_info = (msg["telephone_number"] || "No Phone Number");
      
      if (msg["image_data"]) {
	aux_info = "<img style='border:1px solid black;' width='200' height='200' src='" + msg["image_data"] + "' /><br />";
      }

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

      html = "<div style='padding:5px;'>" + 
	entity_info + "<p>" + msg["street"] + "</p>" + aux_info + "<p>" + contact_info + "</p></div>";
    } else {
      html = msg["html_content"];
    }

    this._map.showSmartWindow(p, html);
    this._map.drawZoomAndCenter(p);
  }
  
  Class.prototype.onLocations = function(msg)
  {
    var i, n, item, m, o;
    var coll = [];
    
    if (typeof(msg) != "object" || !msg.sort) {
      msg = [msg];
    }
    n = msg.length;

    this._map.removeMarkersAll();
    
    for (i = 0; i < n; i ++) {
      item = msg[i];
      p = new YGeoPoint(item["latitude"], item["longitude"]);
      m = new YMarker(p);
      m.eform = item;
      this._map.addOverlay(m);
      this._registerEvent(m);
      coll.push(p);
    }
    
    o = this._map.getBestZoomAndCenter(coll);
    this._map.drawZoomAndCenter(o.YGeoPoint, o.zoomLevel);
  };
}, "Yahoo! Map");