maptalks - Marker with D3 chart

Marker with D3 chart

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Geometry Styles - Marker with D3 chart</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
    .point{fill:#999;stroke:#fff}
    .point.scanned{fill:orange;fill-opacity:1;stroke:brown}
    .point.selected{fill:red;fill-opacity:1}
    .node{fill:none;stroke:#ccc;shape-rendering:crispEdges}
    .brush .extent{stroke:#fff;fill-opacity:.125;shape-rendering:crispEdges}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>

    <script type="text/javascript" src="d3.v3.min.js"></script>
    <div id="map" class="container"></div>

    <script>
      var map = new maptalks.Map('map', {
        center: [-0.113049,51.49856],
        zoom: 14,
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ["a","b","c","d"],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });

      var d3 = new maptalks.ui.UIMarker([-0.113049,51.49856], {
        'draggable'     : false,
        'single'        : false,
        'content'       : createD3Dom()
      });
      d3.addTo(map).show();

      // copy right d3js.org
      function createD3Dom() {
        var width = 600,
          height = 300;

        var dom = document.createElement('div');
        dom.style.cssText = 'width:' + 600 + 'px; height:' + 300 + 'px;';

        var data = d3.range(5000).map(function () {
          return [Math.random() * width, Math.random() * width];
        });

        var quadtree = d3.geom.quadtree()
                    .extent([[-1, -1], [width + 1, height + 1]])(data);

        var brush = d3.svg.brush()
                    .x(d3.scale.identity().domain([0, width]))
                    .y(d3.scale.identity().domain([0, height]))
                    .extent([[100, 100], [200, 200]])
                    .on('brush', brushed);

        var svg = d3.select(dom).append('svg')
                    .attr('width', width)
                    .attr('height', height);

        svg.selectAll('.node')
                    .data(nodes(quadtree))
                  .enter().append('rect')
                    .attr('class', 'node')
                    .attr('x', function (d) { return d.x; })
                    .attr('y', function (d) { return d.y; })
                    .attr('width', function (d) { return d.width; })
                    .attr('height', function (d) { return d.height; });

        var point = svg.selectAll('.point')
                    .data(data)
                  .enter().append('circle')
                    .attr('class', 'point')
                    .attr('cx', function (d) { return d[0]; })
                    .attr('cy', function (d) { return d[1]; })
                    .attr('r', 4);

        svg.append('g')
                    .attr('class', 'brush')
                    .call(brush);

        brushed();

        return dom;

        function brushed() {
          var extent = brush.extent();
          point.each(function (d) { d.scanned = d.selected = false; });
          search(quadtree, extent[0][0], extent[0][1], extent[1][0], extent[1][1]);
          point.classed('scanned', function (d) { return d.scanned; });
          point.classed('selected', function (d) { return d.selected; });
        }

        // Collapse the quadtree into an array of rectangles.
        function nodes(quadtree) {
          var nodes = [];
          quadtree.visit(function (node, x1, y1, x2, y2) {
            nodes.push({ x: x1, y: y1, width: x2 - x1, height: y2 - y1 });
          });
          return nodes;
        }

        // Find the nodes within the specified rectangle.
        function search(quadtree, x0, y0, x3, y3) {
          quadtree.visit(function (node, x1, y1, x2, y2) {
            var p = node.point;
            if (p) {
              p.scanned = true;
              p.selected = (p[0] >= x0) && (p[0] < x3) && (p[1] >= y0) && (p[1] < y3);
            }
            return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0;
          });
        }
      }



    </script>
  </body>
</html>

var map = new maptalks.Map('map', {
  center: [-0.113049, 51.49856],
  zoom: 14,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ["a", "b", "c", "d"],
    attribution: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
  })
});

var d3 = new maptalks.ui.UIMarker([-0.113049, 51.49856], {
  'draggable': false,
  'single': false,
  'content': createD3Dom()
});
d3.addTo(map).show();

// copy right d3js.org

function createD3Dom() {
  var width = 600,
    height = 300;

var dom = document.createElement('div');
  dom.style.cssText = 'width:' + 600 + 'px; height:' + 300 + 'px;';

var data = d3.range(5000).map(function() {
    return [Math.random() * width, Math.random() * width];
  });

var quadtree = d3.geom.quadtree()
    .extent([
      [-1, -1],
      [width + 1, height + 1]
    ])(data);

var brush = d3.svg.brush()
    .x(d3.scale.identity().domain([0, width]))
    .y(d3.scale.identity().domain([0, height]))
    .extent([
      [100, 100],
      [200, 200]
    ])
    .on('brush', brushed);

var svg = d3.select(dom).append('svg')
    .attr('width', width)
    .attr('height', height);

svg.selectAll('.node')
    .data(nodes(quadtree))
    .enter().append('rect')
    .attr('class', 'node')
    .attr('x', function(d) {
      return d.x;
    })
    .attr('y', function(d) {
      return d.y;
    })
    .attr('width', function(d) {
      return d.width;
    })
    .attr('height', function(d) {
      return d.height;
    });

var point = svg.selectAll('.point')
    .data(data)
    .enter().append('circle')
    .attr('class', 'point')
    .attr('cx', function(d) {
      return d[0];
    })
    .attr('cy', function(d) {
      return d[1];
    })
    .attr('r', 4);

svg.append('g')
    .attr('class', 'brush')
    .call(brush);

brushed();

return dom;

// Collapse the quadtree into an array of rectangles.

// Find the nodes within the specified rectangle.