ej2-javascript-samples/src/maps/annotation.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
70
71
72
73

<div class="control-section">
    <div id="maps"></div>
    <!-- Source link -->
   <div style="float: right; margin-right: 10px;">Source:
      <a href="https://en.wikipedia.org/wiki/Africa" target="_blank">en.wikipedia.org</a>
   </div>
</div>
<svg height="150" width="400">
   <defs>
       <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1" />
           <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1" />
       </linearGradient>
   </defs>
</svg>
<div id="maps-annotation" style="display: none;">
   <div id="annotation">
       <div>
           <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
       </div>
       <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
       <div>
           <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
               <li>Africa is the second largest and second most populated continent in the world.</li>
               <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
               <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
           </ul>
       </div>
   </div>
</div>
<div id="compass-maps" style="display: none;">
   <img src="src/maps/images/compass.svg" height="75px" width="75px"/>
</div>
<div id="action-description">
   <p>
       This sample depicts the facts about Africa in an annotation. Africa shape is filled with gradient color.
  </p>
</div>
<!-- custom code start -->
<style>
   #annotation {
       color: #DDDDDD;
       font-size: 12px;
       font-family: Roboto;
       background: #3E464C;
       margin: 20px;
       padding: 10px;
       -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
       border-radius: 2px;
       width: 300px;
       -moz-box-shadow: 0px 2px 5px #666;
       -webkit-box-shadow: 0px 2px 5px #666;
       box-shadow: 0px 2px 5px #666;
   }
   .country-label {
       color: white;
       font-size: 25px;
   }
</style>
<!-- custom code end -->
<div id="description">
       <p>
         In this example, you can see how to place a desired HTML element at desired location in the maps. Any number of annotation can be placed on the maps. In this sample, the gradient fill color has been applied for the shape.
       </p>
   <br/>
       <p style="font-weight: 500">Injecting Module</p>
       <p>
        Maps component features are segregated into individual feature-wise modules. To use an annotation, inject the <code>Annotations</code> module using the <code>Maps.Inject(Annotations)</code> method.
       </p>

   </div>