ej2-javascript-samples/src/maps/bubble.html at master · jesusarockias/ej2-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div id="template" style="display:none">
    <div class="toolback">
                <div class="listing2">
                    <center>
                        ${name}
                    </center>
                </div>
                <hr style="margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD">
                <div>
                    <span class="listing1">Rank : </span><span class="listing2">${rank}</span>
                </div>
                <div>
                    <span class="listing1">Population : </span><span class="listing2">${population}</span>
                </div>
    </div>

</div>
<div class="control-section">
    <div id="container" align="center"></div>
    <!-- Source link -->
    <div style="float: right; margin-right: 10px;">Source:
       <a href="https://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users" target="_blank">en.wikipedia.org</a>
    </div>
</div>
<div id="action-description">
        <p>
            This sample illustrates the top 30 countries which has highest Internet users in bubbles of the year 2016.
       </p>
    </div>
    <div id="description">
        <p>
          In this example, you can see how to render the bubbles for each shape in a map. Values of the shapes can be determined from the size and color of the bubbles. You can bind the desired colors from the data source to the bubbles.

        </p>
        <p>
        Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a bubble or tap a bubble in touch enabled devices.
        </p>
    <br/>
        <p style="font-weight: 500">Injecting Module</p>
        <p>
          Maps component features are segregated into individual feature-wise modules. To use the bubbles, inject the <code>Bubble</code> module using the <code>Maps.Inject(Bubble)</code> method.
        </p>

    </div>
    <style>
        .toolback {
            border-radius: 4px;
            border: 1px #abb9c6;
            opacity: 90%;
            background: rgba(53, 63, 76, 0.90);
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);
            padding-bottom: 10px;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            width: 165px;
        }
        .listing1 {
             font-size:13px;
             color:#cccccc
        }
        .listing2 {
             font-size:13px;
             color:#ffffff;
             font-weight: 500;
        }
     </style>