cloud-8.x-2.0-beta1/js/cloud_config_location.js

(function($, drupalSettings) {
  'use strict';

  let svg = d3.select('#cloud_config_location')
    .style('text-align', 'center')
    .append('svg');

  let width = $('#cloud_config_location svg').width();
  let height = width * 1 / 2;

  svg.style('width', '100%')
    .style('height', 'auto')
    .style('max-width', '1150px')
    .attr("viewBox", "0 0 " + width + " " + height )
    .attr("preserveAspectRatio", "xMinYMin");

  let g_pointer = svg.append('g')
    .attr('id', 'pointer')
    .attr('transform', 'scale(0.15)');
  g_pointer.append('path')
    .attr('d', 'M0-1c-14.5-25.6-14.5-25.7-14.5-33.8c0-8.1,6.5-14.6,14.5-14.6s14.5,6.6,14.5,14.6C14.5-26.7,14.5-26.6,0-1z');
  g_pointer.append('path')
    .attr('d', 'M0-49c7.7,0,14,6.3,14,14.1c0,8,0,8.1-14,32.8c-14-24.7-14-24.9-14-32.8C-14-42.7-7.7-49,0-49 M0-50c-8.3,0-15,6.8-15,15.1 S-15-26.5,0,0c15-26.5,15-26.5,15-34.9S8.3-50,0-50L0-50z');

  let projection = d3.geoMercator()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height * 3 / 5])

  let path = d3.geoPath()
    .projection(projection);

  if (!drupalSettings.cloud || !drupalSettings.cloud.cloud_config_location_json_url) {
    return;
  }
  let json_url = drupalSettings.cloud.cloud_config_location_json_url;

  if (!drupalSettings.cloud || !drupalSettings.cloud.cloud_location_map_json_url) {
    return;
  }
  let map_json_url = drupalSettings.cloud.cloud_location_map_json_url;

  // Create a tooltip.
  let tooltip = d3.select('body')
    .append('div')
    .style('opacity', 0)
    .attr('class', 'tooltip')
    .style('background-color', '#68c16c')
    .style('color', '#ffffff')
    .style('font-size', '0.9em')
    .style('border-radius', '5px')
    .style('padding', '5px')
    .style('position', 'absolute');

  let mouseover = function (d) {
    let parent = this.parentNode;
    let node = d3.select(this).node();
    let children = $(parent).children();
    if (children[children.length - 1] != node) {
      parent.insertBefore(this, null);
    }
    let clientRect = this.getBoundingClientRect();
    let x = window.pageXOffset + clientRect.left;
    let y = window.pageYOffset + clientRect.top;
    tooltip.transition();
    tooltip.html('<strong>' + d.Name + '<br/>[' + d.City + ', ' + d.Country + ']</strong>')
      .style('text-align', 'center')
      .style('opacity', 1)
      .style("left", (x - 20) + "px")
      .style("top", (y + 30) + "px");
  };

  let mouseleave = function (d) {
    tooltip.transition()
      .style('opacity', 0);
  };

  d3.json(map_json_url).then(function (json) {
    svg.append('path')
      .attr('d', path(json))
      .attr('class', 'map');
    let g = svg.append('g');
    d3.json(json_url).then(function (data) {
      g.selectAll("a")
        .data(data)
        .enter()
        .append("a")
        .on('mouseover', mouseover)
        .on('mouseleave', mouseleave)
        .attr('xlink:href', function (d) {
          return d.Url;
        })
        .append('use')
        .attr('href', '#pointer')
        .attr('x', function (d) {
           return projection([d.Longitude, d.Latitude])[0];
         })
        .attr('href', '#pointer')
        .attr('y', function (d) {
           return projection([d.Longitude, d.Latitude])[1];
        })
        .attr('class', function (d) {
            return d.Type;
          })
        .attr('fill', '#f69393')
        .attr('stroke', '#f69393')
        .attr('stroke-width', '1px');
    });
  });

  d3.select('body')
    .style('position', 'static');

}(jQuery, drupalSettings));