https://eurosdr.net/sites/all/modules/contrib/gmap/js/highlight.js?tlvrdx

1/**
2 * @file
3 * Common marker highlighting routines.
4 */
5
6/**
7 * Highlights marker on rollover.
8 * Removes highlight on previous marker.
9 *
10 * Creates a "circle" at the given point
11 * Circle is global variable as there is only one highlighted marker at a time
12 * and we want to remove the previously placed polygon before placing a new one.
13 *
14 * Original code "Google Maps JavaScript API Example"
15 * JN201304:
16 *    converted rpolygons to circles (not using the shapes.js API, should we be?)
17 *    move marker highlight events to custom handler here, to handle radius in pixels (note behavior.radiusInMeters to skip geodesic calcs)
18 *    removed google.events and moved events to gmaps binds
19 *    added overlay object for creating a shape based on pixels instead of meters (seems to be the use case?)
20 *    added gmaps binds for marker higlights, and general highlights.
21 * JN201305 refactored to use a single overlay.  move functions from draw method to solve zoom problem, and multiple
22 *    highlights problem.
23 *
24 * You can add highlights to a map with:
25 *    obj.change('highlightAdd',-1, {latitude:#, longitude:#} );
26 * You can highlight a marker with:
27 *    obj.change('markerHighlight',-1, marker);
28 *      marker: that marker object used when creating the marker.  It can have options set at marker.highlight
29 *
30 * A Highlight object has to have either a <LatLng>Position or a <Number>latitude and <Number>longitude
31 * Note the new highlight options = {
32 *       radius: 10, // radius in pixels
33 *       color: '#777777',
34 *       weight: 2,
35 *       opacity: 0.7,
36 *       behavior: {
37 *          draggable: false,
38 *          editable: false,
39 *       }
40 *       opts: { actual google.maps.Circle opts can be put here for super custom cases }
41 * }
42 */
43
44Drupal.gmap.factory.highlight = function (options) {
45    /** @note it could be argued that we use the shapes library to create a circle,
46     * but this requires the shapes library be loaded and it would make all highlights
47     * repond to shapes events.
48     */
49    return new google.maps.Circle(options);
50};
51
52Drupal.gmap.addHandler('gmap', function (elem) {
53    var obj = this;
54    obj.highlights = {};
55
56    /**
57     * This is a single overlay that can hold multiple highlight.
58     * All highlight shapes will be creted in this overlay, and use
59     * it to translate pixel dimensions to meters.
60     */
61    var highlightOverlay = function () {
62        this.highlights = []; // this will hold all of the highlights that we created, in case we need to recalculate/deactivate them
63    };
64    highlightOverlay.prototype = new google.maps.OverlayView();
65
66    // overlay method for when you .setMap( some map );
67    highlightOverlay.prototype.onAdd = function (map) {
68    };
69    // overlay method for when you .setMap(null);
70    highlightOverlay.prototype.onRemove = function () {
71        // we have to recalculate radii for all shapes
72        var self = this;
73        jQuery.each(this.highlights, function (index, highlight) {
74            if (highlight.shape.getMap()) { // don't calculate if we don't have a map.
75                self.calculateHighlight(highlight); //recalculate all of those radii
76            }
77        });
78    };
79
80    // overlay method executed on any map change methods (zoom/move)
81    highlightOverlay.prototype.draw = function () {
82        // we have to recalculate radii for all shapes
83        var self = this;
84        jQuery.each(this.highlights, function (index, highlight) {
85            if (highlight.shape.getMap()) { // don't calculate if we don't have a map.
86                self.deactivateHighlight(highlight); //recalculate all of those radii
87            }
88        });
89    };
90
91    highlightOverlay.prototype.configHighlight = function (highlight) {
92        if (!highlight.opts) {
93            highlight.opts = {};
94        } // sanity
95        if (!highlight.behavior) {
96            highlight.behavior = {};
97        } // sanity
98        if (!highlight.position) {
99            highlight.position = new google.maps.LatLng(highlight.latitude, highlight.longitude);
100        } // if you have a pos already then use it, otherwise gimme a lat/lon
101
102        jQuery.each({ // collect the options from either the highlight.opts object, from the passed target value, as a behavior or a defaultVal value.
103            radius: {target: 'radius', defaultVal: 10}, // radius in pixels
104            strokeColor: {target: 'border', defaultVal: '#777777'},
105            strokeWeight: {target: 'weight', defaultVal: 2},
106            strokeOpacity: {target: 'opacity', defaultVal: 0.7},
107            fillColor: {target: 'color', defaultVal: '#777777'},
108            fillOpacity: {target: 'opacity', defaultVal: 0.7},
109            draggable: {behavior: 'draggable', defaultVal: false},
110            editable: {behavior: 'editable', defaultVal: false}
111        }, function (key, config) {
112            if (highlight.opts[key]) { // options was passed in
113                return true;
114            }
115            else if (config.target && highlight[ config.target ]) { // highight[target] can give us a setting
116                highlight.opts[key] = highlight[ config.target ];
117            }
118            else if (config.behavior && highlight.behavior && highlight.behavior[ config.behavior ]) { // value is a behaviour, should it be enabled?
119                highlight.opts[key] = highlight.behavior[ config.behavior ];
120            }
121            else if (config.defaultVal) { // defaultVal value
122                highlight.opts[key] = config.defaultVal;
123            }
124        });
125
126        highlight.opts.center = highlight.position;
127        // note that there is no opts.map, unless you passed one in.  maybe we should make sure that you didn't?
128
129        // add this highlight to our list, so that we can draw it in the draw method (which will also redraw it after map change events.
130        this.highlights.push(highlight);
131    };
132    // determine how big the circle should be in meters (as we were likely passed pixels).  This radius changes on zoom and move events.
133    highlightOverlay.prototype.calculateHighlight = function (highlight) { // this nees a better name
134
135        if (highlight.behavior.radiusInMeters) {
136            highligh.opts.radiusInMeters = highlight.opts.radius;
137        }
138        else {
139            var mapZoom = this.map.getZoom();
140            var projection = this.getProjection();
141            var center = projection.fromLatLngToDivPixel(highlight.opts.center, mapZoom);
142            var radius = highlight.opts.radius;
143            var radial = projection.fromDivPixelToLatLng(new google.maps.Point(center.x, center.y + radius), mapZoom); // find a point that is the radius distance away in pixels from the ccenter point.
144            highlight.opts.radiusInMeters = google.maps.geometry.spherical.computeDistanceBetween(highlight.opts.center, radial);
145        }
146
147        if (highlight.shape) {
148            highlight.shape.setOptions(highlight.opts);
149            // we can use this if we don't care about other options changing : highlight.shape.setRadius(highlight.opts.radiusInMeters)
150        }
151        else {
152            highlight.shape = Drupal.gmap.factory.highlight(jQuery.extend({}, highlight.opts, {radius: highlight.opts.radiusInMeters})); // only pass radiusinmeters to g.m.circle.  We keep the pixel radius in case we need to calculate again after a zoom
153        }
154    };
155    highlightOverlay.prototype.activateHighlight = function (highlight) {
156        if (!highlight.shape) {
157            this.configHighlight(highlight);
158            this.calculateHighlight(highlight);
159        }
160        highlight.shape.setMap(this.map);
161    };
162    highlightOverlay.prototype.deactivateHighlight = function (highlight) {
163        if (highlight.shape) {
164            highlight.shape.setMap(null);
165        }
166    };
167    highlightOverlay.prototype.updateHighlight = function (highlight) {
168        if (highlight.shape) {
169            this.configHighlight(highlight);
170            this.calculateHighlight(highlight);
171        }
172    };
173
174    // prepare a single highlight overlay to be used for all highlights
175    obj.bind('init', function (highlight) {
176        obj.highlightOverlay = new highlightOverlay(obj.map);
177        obj.highlightOverlay.setMap(obj.map); // this will trigger the onAdd() method, and the first draw()
178    });
179
180    // set and remove map highlights
181    obj.bind('highlightAdd', function (highlight) { // if you activate an activated highlight, nothing happens.
182        obj.highlightOverlay.activateHighlight(highlight);
183    });
184    obj.bind('highlightRemove', function (highlight) {
185        obj.highlightOverlay.deactivateHighlight(highlight);
186    });
187    obj.bind('highlightUpdate', function (highlight) {
188        obj.highlightOverlay.updateHighlight(highlight);
189    });
190
191    // Marker specific highlight events:
192    var highlightedMarkers = []; // remember markers that have been highlighted. so that we can un-highlight them all at one.  The defaultVal behaviour is to allow only 1 marker highlighted at any time.
193    obj.bind('markerHighlight', function (marker) {
194        highlightedMarkers.push(marker);
195
196        // If the highlight arg option is used in views highlight the marker.
197        if (!marker.highlight) {
198            marker.highlight = {};
199        }
200        if (!marker.highlight.color && obj.vars.styles.highlight_color) {
201            marker.highlight.color = '#' + obj.vars.styles.highlight_color;
202        }
203        marker.highlight.position = marker.marker.getPosition();
204        obj.change('highlightAdd', -1, marker.highlight);
205    });
206    obj.bind('markerUnHighlight', function (marker) {
207        if (marker.highlight) {
208            obj.change('highlightRemove', -1, marker.highlight);
209            delete marker.highlight;
210        }
211    });
212    obj.bind('markerUnHighlightActive', function () {
213        var marker;
214        while (!!(marker = highlightedMarkers.pop())) {
215            obj.change('highlightRemove', -1, marker);
216        }
217    });
218
219    /**
220     * Marker Binds
221     *
222     * Marker highlight code has been moved to this file from the marker.js
223     *
224     * Note that we rely on the obj.vars.behavior.highlight var to
225     * decide if should highlight markers on events.
226     * This decision could be made as an outer if conditional, instead
227     * of repeated inside each bind, but this arrangement allows for
228     * the behaviour to change, at a small cost.
229     */
230    obj.bind('addmarker', function (marker) {
231        if (obj.vars.behavior.highlight) {
232            google.maps.event.addListener(marker.marker, 'mouseover', function () {
233                obj.change('markerHighlight', -1, marker);
234            });
235            google.maps.event.addListener(marker.marker, 'mouseout', function () {
236                obj.change('markerUnHighlight', -1, marker);
237            });
238            google.maps.event.addListener(marker.marker, 'mouseout', function () {
239                obj.change('markerUnHighlight', -1, marker);
240            });
241        }
242        // If the highlight arg option is used in views highlight the marker.
243        if (marker.opts.highlight == 1) {
244            obj.change('markerHighlight', -1, marker);
245        }
246    });
247
248// Originally I moved mouse highlights to the extra event binds before I realized that there is likely a usecase for highlights without enabling extra events
249//   obj.bind('mouseovermarker', function(marker) {
250//     if (obj.vars.behavior.highlight && marker) {
251//       obj.change('markerHighlight',-1,marker);
252//     }
253//   });
254//   obj.bind('mouseoutmarker', function(marker) {
255//     if (obj.vars.behavior.highlight && marker) {
256//       obj.change('markerUnHighlight',-1,marker);
257//     }
258//   });
259
260});