raphael.example.js

function buildingMouseIn(building) {
  building.tooltip.show();
  building.g = building.glow({
    'width':   0,
    'fill':    true,
    'opacity': 0,
    'color':   interactiveMapSelectColor
  });
}

function buildingMouseOut(building) {
  building.tooltip.hide();
  building.g.remove();
}

function drawMapOverlay() {
  /* Create buildings */
  var
    map       = Raphael(document.getElementById('map-overlay'), 888, 400),
    buildings = map.set(),
    tooltips  = map.set(),
    circles   = map.set(),
    lines     = map.set(),
    numbers   = map.set(),
    names     = map.set(),
    office    = map.path('M 206 185 l 0 42 l 42 20 l 0   4  l 23 11 l  4  -2  l  45 21 l  48  -23 l  0 -38 l -115 -56 z'),
    warehouse = map.path('M 84  133 l 0 26 l 92 44 l 22 -16 l 4  2  l  3  -1  l  0 -3  l  48  -21 l  2  1  l  50  -23 l -48 -23 l 0 -16 l -70 -33 l -39 16 l -48 25 l 0 13 z'),
    onco      = map.path('M 538 48  l 0 24 l 84 41 l 52 -25 l 0 -22 l -86 -41 l -22 6  z'),
    bio       = map.path('M 402 110 l 0 22 l 89 43 l 32 -15 l 6  3  l  12 -6  l  0 -6  l  52  -24 l  0 -24 l -86  -41 l -50  20 z'),
    drugs     = map.path('M 282 162 l 0 17 l 86 42 l 0   12 l 33 16 l  94 -44 l  0 -28 l -120 -58 l -44 17 z')
  ;
  buildings.push(office, warehouse, onco, bio, drugs);

  /* Create tooltip elements */
  office.tooltip                     = map.set(),
  warehouse.tooltip                  = map.set(),
  onco.tooltip                       = map.set(),
  bio.tooltip                        = map.set(),
  drugs.tooltip                      = map.set()
  office.tooltip.line                = map.path  ('M 320 230 l 360 0');
  office.tooltip.startCircle         = map.circle(330, 230, 16);
  office.tooltip.number              = map.text(330, 230, '1');
  office.tooltip.endCircle           = map.circle(680, 230, 16);
  office.tooltip.name                = map.text(700, 230, interactiveMapOfficeName);
  warehouse.tooltip.line             = map.path  ('M 180 100 l 340 0 0c80 0 50 0 160 -80');
  warehouse.tooltip.startCircle      = map.circle(180, 100, 16);
  warehouse.tooltip.number           = map.text(180, 100, '2');
  warehouse.tooltip.endCircle        = map.circle(680, 20, 16);
  warehouse.tooltip.name             = map.text(700, 18, interactiveMapWarehouseName);
  onco.tooltip.line                  = map.path  ('M 630 70  l 50  0');
  onco.tooltip.startCircle           = map.circle(630, 70, 16);
  onco.tooltip.number                = map.text(630, 70, '3');
  onco.tooltip.endCircle             = map.circle(680, 70, 16);
  onco.tooltip.name                  = map.text(700, 70, interactiveMapOncoName);
  bio.tooltip.line                   = map.path  ('M 500 130 l 180 0');
  bio.tooltip.startCircle            = map.circle(500, 130, 16);
  bio.tooltip.number                 = map.text(500, 130, '4');
  bio.tooltip.endCircle              = map.circle(680, 130, 16);
  bio.tooltip.name                   = map.text(700, 130, interactiveMapBioName);
  drugs.tooltip.line                 = map.path  ('M 400 180 l 280 0');
  drugs.tooltip.startCircle          = map.circle(400, 180, 16);
  drugs.tooltip.number               = map.text(400, 180, '5');
  drugs.tooltip.endCircle            = map.circle(680, 180, 16);
  drugs.tooltip.name                 = map.text(700, 180, interactiveMapDrugsName);

  /* Group tooltip elements */
  tooltips.push (
    office.tooltip,
    warehouse.tooltip,
    onco.tooltip,
    bio.tooltip,
    drugs.tooltip
  );
  office.tooltip.push (
    office.tooltip.line,
    office.tooltip.startCircle,
    office.tooltip.number,
    office.tooltip.endCircle,
    office.tooltip.name
  );
  warehouse.tooltip.push (
    warehouse.tooltip.line,
    warehouse.tooltip.startCircle,
    warehouse.tooltip.number,
    warehouse.tooltip.endCircle,
    warehouse.tooltip.name
  );
  onco.tooltip.push (
    onco.tooltip.line,
    onco.tooltip.startCircle,
    onco.tooltip.number,
    onco.tooltip.endCircle,
    onco.tooltip.name
  );
  bio.tooltip.push (
    bio.tooltip.line,
    bio.tooltip.startCircle,
    bio.tooltip.number,
    bio.tooltip.endCircle,
    bio.tooltip.name
  );
  drugs.tooltip.push (
    drugs.tooltip.line,
    drugs.tooltip.startCircle,
    drugs.tooltip.number,
    drugs.tooltip.endCircle,
    drugs.tooltip.name
  );
  circles.push (
    office.tooltip.startCircle,
    office.tooltip.endCircle,
    warehouse.tooltip.startCircle,
    warehouse.tooltip.endCircle,
    onco.tooltip.startCircle,
    onco.tooltip.endCircle,
    bio.tooltip.startCircle,
    bio.tooltip.endCircle,
    drugs.tooltip.startCircle,
    drugs.tooltip.endCircle
  );
  numbers.push (
    office.tooltip.number,
    warehouse.tooltip.number,
    onco.tooltip.number,
    bio.tooltip.number,
    drugs.tooltip.number
  );
  names.push (
    office.tooltip.name,
    warehouse.tooltip.name,
    onco.tooltip.name,
    bio.tooltip.name,
    drugs.tooltip.name
  );

  /* Style tooltips */
  tooltips.attr({
    'fill-opacity': 0,
    'stroke-width': 6
  })
  office.tooltip.attr ({
    'fill':   interactiveMapOfficeColor,
    'stroke': interactiveMapOfficeColor
  });
  warehouse.tooltip.attr ({
    'fill':   interactiveMapWarehouseColor,
    'stroke': interactiveMapWarehouseColor
  });
  onco.tooltip.attr ({
    'fill':   interactiveMapOncoColor,
    'stroke': interactiveMapOncoColor
  });
  bio.tooltip.attr ({
    'fill':   interactiveMapBioColor,
    'stroke': interactiveMapBioColor
  });
  drugs.tooltip.attr ({
    'fill':   interactiveMapDrugsColor,
    'stroke': interactiveMapDrugsColor
  });
  circles.attr ({
    'stroke-width': 0,
    'fill-opacity': 1
  });
  numbers.attr ({
    'stroke-width': 0,
    'fill':        '#fff',
    'fill-opacity': 1,
    'font-size':   '16px'
  });
  names.attr ({
    'text-anchor': 'start',
    'stroke-width': 0,
    'fill':        '#000',
    'fill-opacity': 1,
    'font-size':   '12px'
  })
  /* Style buildings; filling because of Firefox can't select transparent element */
  buildings.attr ({
    'stroke-width': 0,
    'fill':        '#000',
    'fill-opacity': 0
  });

  tooltips.hide          ();
  buildings.hover        (function() {buildingMouseIn(this)},      function() {buildingMouseOut(this)});
  office.tooltip.hover   (function() {buildingMouseIn(office)},    function() {buildingMouseOut(office)});
  warehouse.tooltip.hover(function() {buildingMouseIn(warehouse)}, function() {buildingMouseOut(warehouse)});
  onco.tooltip.hover     (function() {buildingMouseIn(onco)},      function() {buildingMouseOut(onco)});
  bio.tooltip.hover      (function() {buildingMouseIn(bio)},       function() {buildingMouseOut(bio)});
  drugs.tooltip.hover    (function() {buildingMouseIn(drugs)},     function() {buildingMouseOut(drugs)});
}

document.ready = function() {
  drawMapOverlay();
};