ej2-javascript-samples/src/maps/marker.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
68
69
<div class="control-section">
    <div id="container"></div>
    <!-- Source link -->
    <div style="float: right; margin-right: 10px;">Source:
            <a href="http://www.citymayors.com/statistics/largest-cities-population-125.html" target="_blank">www.citymayors.com</a>
         </div>
</div>
<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">Country : </span><span class="listing2">${Country}</span>
                    </div>
                    <div>
                        <span class="listing1">Population : </span><span class="listing2">${population}</span>
                    </div>
        </div>

    </div>
    <div id="action-description">
            <p>
                This sample visualizes the top 25 populated cities in the world by displaying the markers in their locations.
           </p>
        </div>
        <div id="description">
            <p>
              In this example, you can see how to render the markers in a map. Markers are used to indicate or mark a particular location on the map with desired symbols.

            </p>
            <p>
            Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a marker or tap a marker 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 a marker, inject the <code>Marker</code> module using the <code>Maps.Inject(Marker)</code> method.
            </p>

        </div>
    <!-- custom code start -->
    <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: 170px;
   }
   .listing1 {
        font-size:13px;
        color:#cccccc
   }
   .listing2 {
        font-size:13px;
        color:#ffffff;
        font-weight: 500;
   }
    </style>
    <!-- custom code end -->