https://weatherfile.com/js/wf/wf_marker.js

1
2var currentWindDirection = 0;
3
4var GRADIENT_ARRAY = ['#da8a00','#da8700','#da8400','#db8200','#db7f00','#db7c00','#db7900','#db7600','#db7300','#dc7000','#dc6d00','#dc6a00','#dc6700','#dc6400','#dc6100','#dc5d00','#dc5a00','#dc5700','#dc5300','#dc4f00','#dc4c00','#dc4800','#db4400','#db3f00','#db3b00','#db3600','#db3100','#db2b00','#db2400','#da1c00','#da1100','#da0000'];
5function colourIndexFromScale(value, scaleRange, degreeRange){
6    // linear transformation - Y = (X-A)/(B-A) * (D-C) + C
7    return (value - scaleRange.min)/(scaleRange.max - scaleRange.min) * (degreeRange.max - degreeRange.min) + degreeRange.min;
8}
9
10
11/* Base class for our custom marker */
12WFMarker.prototype = new google.maps.OverlayView();
13/** @varructor */
14function WFMarker(id, bounds, map) {
15
16    // Initialize all properties.
17    this.bounds_ = bounds;
18    this.map_ = map;
19    this.id = id; // loc_id
20    this.wdc = 0;
21    this.wsc = 0;
22    this.offline = false;
23    this.lastwdc = 0;
24    this.tweening = false;
25    this.infoWindowIsOpen = false;
26    this.NORMAL_COLOUR = "#000071";
27    this.INACTIVE_COLOUR = "#aeb0b2"; 
28    this.colourHex = this.NORMAL_COLOUR;
29
30    // Define a property to hold the image's div. We'll
31    // actually create this div upon receipt of the onAdd()
32    // method so we'll leave it null for now.
33    this.div_ = null;
34    this.canvas = null;
35
36    // Explicitly call setMap on this overlay.
37    this.setMap(map);
38}
39
40/**
41* onAdd is called when the map's panes are ready and the overlay has been
42* added to the map.
43*/
44WFMarker.prototype.onAdd = function() {
45
46    var div = document.createElement('div');
47    div.style.borderStyle = 'none';
48    div.style.borderWidth = '0px';
49    div.style.position = 'absolute';
50
51    // Create the img element and attach it to the div.
52    this.canvas = document.createElement('canvas');
53    this.canvas.width = 38;
54    this.canvas.height = 38;
55    this.canvas.style.position = 'absolute';
56    div.appendChild(this.canvas);
57
58    this.div_ = div;
59
60    // Add the element to the "overlayLayer" pane.
61    var panes = this.getPanes();
62    panes.overlayLayer.appendChild(div);
63
64    //add element to clickable layer 
65    panes.overlayMouseTarget.appendChild(div);
66
67    // set this as locally scoped var so event does not get confused
68    var me = this;
69
70    // Add a listener - we'll accept clicks anywhere on this div, but you may want
71    // to validate the click i.e. verify it occurred in some portion of your overlay.
72    google.maps.event.addDomListener(div, 'click', function() {
73        console.log("Is window open for ", me.id, "? ", me.infoWindowIsOpen);
74        if(!me.infoWindowIsOpen){
75            if(infoWindowOpen){
76                // if we had a window open, and click on another we have to manually close the other one
77                currentmarker.infoWindowIsOpen = false;   
78            }
79            infoWindowOpen = true;
80            load_content(theMap, me, infowindow);
81            me.infoWindowIsOpen = true;
82        }
83    });
84};
85
86WFMarker.prototype.draw = function() {
87    // We use the south-west and north-east
88    // coordinates of the overlay to peg it to the correct position and size.
89    // To do this, we need to retrieve the projection from the overlay.
90    var overlayProjection = this.getProjection();
91    // If projection is undefined we cannot draw yet
92    if(!overlayProjection) return;
93    // Retrieve the south-west and north-east coordinates of this overlay
94    // in LatLngs and convert them to pixel coordinates.
95    // We'll use these coordinates to resize the div.
96    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest

96());
97    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
98
99    // Resize the image's div to fit the indicated dimensions.
100    var div = this.div_;
101    if(!div) return;
102
103    div.style.left = (sw.x - this.canvas.width / 2) + 'px';
104    div.style.top = (ne.y - this.canvas.height / 2) + 'px';
105    div.style.width = (ne.x - sw.x) + 'px';
106    div.style.height = (sw.y - ne.y) + 'px';
107    
108    if (this.offline) {
109    	div.style.zIndex = "-1";
110    } else {
111    	div.style.zIndex = "1000" + this.wsc;
112    }
113    
114    // this was halting updates if the degree ever got set to zero!
115    // if(!this.lastwdc  && this.lastwdc == 0) this.lastwdc = this.wdc;
116    //console.log("Trying to update direction for ", this.id, ". tweening = ", this.tweening);
117    if(!this.tweening) {
118        this.tweening = true;
119        //console.log("Updating direction for ", this.id);
120        this.tweenToNewDirection(this.lastwdc, this.wsc, this.colourHex);
121    }
122    this.lastwdc = this.wdc;
123};
124
125WFMarker.prototype.onRemove = function() {
126    this.div_.parentNode.removeChild(this.div_);
127    this.div_ = null;
128};
129// check if it's Android (bugfix), change the tweening timeout
130const isAndroid = localStorage.getItem("isAndroid");
131
132if (!isAndroid){
133    WFMarker.prototype.tweenToNewDirection = function(current, windspeed, colour){
134        var me = this;
135        setTimeout(function() { // change to requestAnimationFrame?
136            updateDirectionMarker(me.canvas, current,windspeed , colour, me.offline);
137            // console.log("[", me.id, "] Does ", current, " == ", me.wdc, " ? ", current === me.wdc);
138            if(current === me.wdc){
139                me.tweening = false;
140                //console.log("[", me.id, "] Tweening Stopped ", current, " == ", me.wdc, " ? ", current === me.wdc);
141            } else if(getDifference(current, me.wdc) < 0){
142                current -= 1
143                if (current <= 0) current = 360;
144                me.tweenToNewDirection(current, windspeed, colour, me.offline);
145            } else if(getDifference(current, me.wdc) > 0) {
146                current += 1;
147                if (current >= 360) current = 0;
148                me.tweenToNewDirection(current, windspeed, colour, me.offline);
149            } else {
150                me.tweening = false;
151                //console.log("[", me.id, "] Stopped tweening because we got stuck");
152            }
153        }, ((1 / (Math.abs(current - currentWindDirection)) ) + 10) * 2.5);
154    }
155} else {
156    WFMarker.prototype.tweenToNewDirection = function(current, windspeed, colour){
157        var me = this;
158        setTimeout(function() { // change to requestAnimationFrame?
159            updateDirectionMarker(me.canvas, current,windspeed , colour, me.offline);
160            // console.log("[", me.id, "] Does ", current, " == ", me.wdc, " ? ", current === me.wdc);
161            if(current === me.wdc){
162                me.tweening = false;
163                //console.log("[", me.id, "] Tweening Stopped ", current, " == ", me.wdc, " ? ", current === me.wdc);
164            } else if(getDifference(current, me.wdc) < 0){
165                current -= 1
166                if (current <= 0) current = 360;
167                me.tweenToNewDirection(current, windspeed, colour, me.offline);
168            } else if(getDifference(current, me.wdc) > 0) {
169                current += 1;
170                if (current >= 360) current = 0;
171                me.tweenToNewDirection(current, windspeed, colour, me.offline);
172            } else {
173                me.tweening = false;
174                //console.log("[", me.id, "] Stopped tweening because we got stuck");
175            }
176        }, ((1 / (Math.abs(current - currentWindDirection)) ) + 10 * 0.5));
177    }
178}
179
180
181
182function updateDirectionMarker(canvas, directionDegrees, centreInfoValue, colourHex, removeArrow){
183    //var canvas = document.getElementById(canvasID);
184
185    canvas.style="image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: -o-crisp-edges;image-rendering: crisp-edges;-ms-interpolation-mode: nearest-neighbor;";
186
187    var tHeight = (canvas.width/2)/2.5; //3.5;
188    var tWidth = (canvas.width/2)/3;
189
190    var size;;
191    var centre = canvas.width/2;
192    var centrey = canvas.height/2;
193    var ctx = canvas.getContext("2d");
194
195    ctx.imageSmoothingEnabled = true; /// future
196    
197    ctx.clearRect(0, 0, 2 * centre, 2 * centre); /* clear canvas */
198    ctx.fillStyle=colourHex;
199    ctx.strokeStyle="#FFFFFF";
200
201    var direction = directionDegrees;
202
203    // only relevant to canvas, keep inside this func
204    function getFont(size) {
205        var ratio = size / 200;   // calc ratio, first number is normal font, based on he second number of normal width
206        var size = canvas.width * ratio;   // get font size based on current width
207        return (size|0) + 'px Open Sans'; // set font // 'bold ' + 
208    }
209
210    /* draw arrow */
211    if(!removeArrow){
212        ctx.beginPath();
213        ctx.lineWidth = 5;
214
215        size = (canvas.width/2);
216        var rAngle = ((direction*Math.PI/180) - Math.PI/2) - Math.PI; /* -Math.PI flips the direction (for outer arrow display)*/
217
218        var x0= centre + size*Math.cos(rAngle);
219        var y0= centrey + size*Math.sin(rAngle);
220
221        var tricx = centre + (size-tHeight)*Math.cos(rAngle);
222        var tricy = centrey + (size-tHeight)*Math.sin(rAngle);
223        
224        var x1 = tricx + (tWidth) * Math.cos(rAngle - Math.PI/2);
225        var y1 = tricy + (tWidth) * Math.sin(rAngle - Math.PI/2);
226
227        var x2 = tricx + (tWidth) * Math.cos(rAngle + Math.PI/2);
228        var y2 = tricy + (tWidth) * Math.sin(rAngle + Math.PI/2);
229        
230        
231        ctx.moveTo(x0,y0);
232        ctx.lineTo(x1,y1);
233        ctx.lineTo(x2,y2);
234        ctx.closePath();
235        ctx.fill();
236    }
237    
238
239    // draw circle
240    size = (canvas.width/2) - tHeight;
241    ctx.beginPath();
242    ctx.lineWidth = 7;
243    /*  x, y, radius, start angle (-90 so it starts facing north), arc length (2 * PI === 360 degreess === full circle) */
244    ctx.arc(centre ,centrey,size,0, (2*Math.PI), false);
245    ctx.fill();
246    
247
248    ctx.fillStyle="#FFFFFF";
249    ctx.strokeStyle="#FFFFFF";
250    // draw text
251    var bigFont = 80;
252    ctx.font = getFont(bigFont);
253    // ctx.fillText(currentWindDirection, centre - parseInt(ctx.measureText(currentWindDirection).width/2), centrey + centrey/8);
254    ctx.fillText(centreInfoValue, centre - parseInt(ctx.measureText(centreInfoValue).width/2), centrey + centrey/4);
255}