OpenLayers OpenLayers

Ticket #965: create-vml-current.html

File create-vml-current.html, 3.5 kB (added by pgiraud, 1 year ago)

current way to draw point in the vml renderer

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3   <head>
4     <title>#965 : rendered geometries blink sometimes in the VML renderer</title>
5     <style type="text/css">
6         #map {
7             width: 400px;
8             height: 400px;
9             border: 1px solid black;
10             overflow: hidden;
11         }
12     </style>
13     <script type="text/javascript">
14      
15      
16       init = function() {
17           var xmlns = "urn:schemas-microsoft-com:vml";
18           document.namespaces.add("v", xmlns);
19          
20           var style = document.createStyleSheet();
21           style.addRule('v\\:*', "behavior: url(#default#VML); " +
22                                  "position: relative; display: inline-block;");
23          
24           var rendererRoot = document.createElement("div");
25           rendererRoot.id = "vmlRoot";
26          
27           rendererRoot.style.width = 400;
28           rendererRoot.style.height = 400;
29          
30           var root = document.createElement("v:group");
31           root.id = "root";
32           root.style.width = "100%";
33           root.style.height = "100%";
34           rendererRoot.appendChild(root);
35          
36           var resolution = 10;
37           var extent = {left: 0, top: 0, right: 400, bottom: 400};
38           extent.getWidth = function() {
39               return this.right - this.left;
40           }
41           extent.getHeight = function() {
42               return this.top - this.bottom;
43           }
44           var org = extent.left/resolution + " " +
45                         extent.top/resolution;
46           root.setAttribute("coordorigin", org);
47          
48           var size = extent.getWidth()/resolution + " " +
49                         -extent.getHeight()/resolution;
50           root.setAttribute("coordsize", size);
51          
52          
53           document.getElementById('viewport').appendChild(rendererRoot);
54          
55           function drawPoint(x, y) {
56               var radius = 10;
57               var node = document.createElement("v:oval");
58               node.style.left = (x / resolution).toFixed() - radius / resolution;
59               node.style.top = (y / resolution).toFixed() - radius / resolution;
60               node.style.width = radius / resolution * 2;
61               node.style.height = radius / resolution * 2;
62               //aply style
63               node.setAttribute("fillcolor", "#0000FF" );
64              
65               root.appendChild(node)
66           }
67      
68           function mapClicked(evt) {
69               drawPoint(evt.x, evt.y);
70           }
71           document.getElementById('viewport').attachEvent('onclick', mapClicked, false);
72       }
73      
74     </script>
75   </head>
76   <body onload="init();">
77   <div id="map">
78     <div id="viewport" style="position:relative;left:0px;top:0px;width:100%;height:100%;"></div>
79   </div>
80   Try to click in the square. If you add a point on top or left of existing points, currently drawn points may blink.<br />
81   This example :
82   <ul>
83     <li>uses the XHTML strict doctype.
84   <pre>
85     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
86   </pre>
87     </li>
88     <li>css vml rule is set to
89     <pre>
90      
91           style.addRule('v\\:*', "behavior: url(#default#VML); " +
92                                  "position: relative; display: inline-block;");
93     </pre>
94     </li>
95     <li>vml root width and height are set to relative value (100%).</li>
96   </ul>
97   </body>
98 </html>