https://www.westcotthouse.org/sites/all/modules/trailhead/assets/js/TrailheadMap.js?tfpecm

1/**
2 * map module
3 */
4var TrailheadMap = (function()
5{
6    var _tm = {};
7    var mapConfig = {};
8
9    _tm.setMapConfig = function(config)
10    {
11        mapConfig = config;
12    }
13
14    _tm.initMap = function()
15    {
16
17        var zoomify_width = mapConfig.getMapWidth();
18        var zoomify_height = mapConfig.getMapHeight();
19        var zoomify_url = mapConfig.getZoomifyUrl();
20
21        var defaultZoom = mapConfig.getDefaultZoom();
22
23        if (mobileCheck())
24        {
25            defaultZoom = mapConfig.getMobileZoom();
26        }
27
28        //First we initialize the zoomify pyramid (to get number of tiers)
29        var zoomify = new OpenLayers.Layer.Zoomify("Zoomify", zoomify_url, new OpenLayers.Size(zoomify_width, zoomify_height));
30        // Map with raster coordinates (pixels) from Zoomify image
31        var options =
32        {
33            maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
34            restrictedExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
35            maxResolution: Math.pow(2, zoomify.numberOfTiers - 1),
36            numZoomLevels: zoomify.numberOfTiers,
37            units: 'pixels',
38            gutter: '1px',
39            //set min max zoom levels for OpenLayers_Map_minZoom_maxZoom_Patch.js
40            minZoom: defaultZoom,
41            maxZoom: mapConfig.getMaxZoom(),
42            controls: //add controls
43                [
44                    new OpenLayers.Control.TouchNavigation({dragPanOptions: {enableKinetic: true}}),
45                    new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}}),
46                    new OpenLayers.Control.PanPanel({slideRatio: .5})
47
48                ]
49        };
50
51        var map = new OpenLayers.Map("map", options);
52
53        if (mapConfig.isDev())
54        {
55            map.addControl(new OpenLayers.Control.MousePosition({
56                prefix: "<span style='color: #ddd'>",
57                suffix: "</span>"
58            }));
59        }
60
61        var zoomPanel = new OpenLayers.Control.Panel({displayClass: 'insidePanel'});
62
63        var zoomIn = new OpenLayers.Control.ZoomIn();
64        var zoomOut = new OpenLayers.Control.ZoomOut();
65
66        map.addLayer(zoomify);
67        map.setBaseLayer(zoomify);
68        map.zoomToMaxExtent();
69        map.setCenter(new OpenLayers.LonLat(mapConfig.getCenterLon(), mapConfig.getCenterLat()), defaultZoom);
70
71        //register some events to clean up the popover
72        zoomify.events.register('move', zoomify, function ()
73        {
74            jQuery("#popover-box").hide();
75        });
76
77        zoomify.events.register('click', zoomify, function ()
78        {
79            jQuery("#popover-box").hide();
80        });
81
82        //add markers
83        map.addLayers(_getMarkers(false));
84
85        //Add the Layer Switcher Legend
86        var externalControl = new OpenLayers.Control.LayerSwitcher(
87            {
88                div: document.getElementById('externalLayerSwitcher')
89            });
90
91        externalControl.events.register('click', externalControl, function () {});
92
93        map.addControl(externalControl);
94        zoomPanel.addControls([zoomIn, zoomOut]);
95        map.addControl(zoomPanel);
96
97        //disable the zoom wheel
98        var controls = map.getControlsByClass('OpenLayers.Control.Navigation');
99        for (var i = 0; i < controls.length; i++)
100        {
101            controls[i].disableZoomWheel();
102        }
103
104
105    }
106
107    _tm.initGeoMap = function()
108    {
109
110
111        var geolocate = new OpenLayers.Control.Geolocate(
112        {
113            bind: true,
114            watch: true,
115
116            geolocationOptions:
117            {

118                enableHighAccuracy: false,
119                maximumAge: 0,
120                timeout: 7000
121            }
122        });
123
124        var vector = new OpenLayers.Layer.Vector('vector');
125        var mapBounds = new OpenLayers.Bounds(mapConfig.getGeoBounds());
126        var restrictedExtent = new OpenLayers.Bounds(mapConfig.getGeoBounds()).transform('EPSG:4326', 'EPSG:3857');
127
128        var options =
129        {
130            restrictedExtent: restrictedExtent,
131            projection: 'EPSG:3857',
132            displayProjection: 'EPSG:4326',
133            minZoom: mapConfig.getGeoMinZoom(),
134            maxZoom: mapConfig.getGeoMaxZoom(),
135            numZoomLevels: mapConfig.getGeoMaxZoom()
136
137        };
138
139
140
141        var map = new OpenLayers.Map('map', options);
142
143        var gmap = new OpenLayers.Layer.Google(
144
145          "Google Streets", // the default
146          {
147              numZoomLevels: mapConfig.getGeoMaxZoom(),
148          }
149
150        );
151
152
153        map.addLayers([gmap, vector]);
154        map.zoomToExtent(mapBounds.transform(map.displayProjection, map.projection));
155
156        map.setCenter(new OpenLayers.LonLat(-83.810052,39.925843).transform(map.displayProjection, map.projection), mapConfig.getGeoDefaultZoom());
157        map.addControl(geolocate);
158        map.addLayers(_getMarkers(true));
159
160
161        var dragcontrol = new OpenLayers.Control.DragPan({'panMapDone':function(e) {
162                geolocate.deactivate();
163                panel.activate()
164            }
165        });
166        dragcontrol.draw();
167        map.addControl(dragcontrol);
168        dragcontrol.activate();
169
170
171        var panel = new OpenLayers.Control.Panel({
172            displayClass: "olGeoResumePanel",
173            autoActivate: false
174        });
175        var button = new OpenLayers.Control.Button({
176            displayClass: "geoResumeButton",
177            trigger: function()
178            {
179                geolocate.activate();
180                panel.deactivate();
181            }
182        });
183        panel.addControls([button]);
184        panel.deactivate();
185        map.addControl(panel);
186
187        if(_tm.isInBounds())  {
188            _initGeoEventHandlers(geolocate, vector);
189        }
190    }
191
192    _tm.isInBounds = function()
193    {
194        return _isInBounds().then(function(location)
195        {
196            if(!location)
197            {
198                return false;
199            }
200            var latLon = new OpenLayers.LonLat(location.coords.longitude, location.coords.latitude);
201            var mapBounds = new OpenLayers.Bounds(mapConfig.getGeoBounds());
202
203            if(mapBounds.containsLonLat(latLon))
204            {
205                return true;
206            }
207            else
208            {
209                return false;
210            }
211        });
212
213    }
214
215    /*** Private Functions ***/
216    function _isInBounds()
217    {
218
219        var deferred = Q.defer();
220
221        if (!navigator.geolocation)
222        {
223            deferred.resolve(false);
224        }
225        else
226        {
227            navigator.geolocation.getCurrentPosition(function(location)
228            {
229                deferred.resolve(location);
230            }, function()
231            {
232                deferred.resolve(false);
233            });
234        }
235
236        return deferred.promise;
237    }
238
239    function _getMarkers(useGeo)
240    {
241
242        var markerSize = mapConfig.getMarkerSize();
243
244        var size = new OpenLayers.Size(markerSize.w, markerSize.h);
245        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
246        var icon_array = mapConfig.getIconArray();
247
248        var markers = {};
249
250        for (var i in icon_array)
251        {
252            var c = icon_array[i];
253            markers[c.category] = new OpenLayers.Layer.Markers(c.category, {visibility: c.visibility});
254        }
255
256        var _popOver = mapConfig.getPopOverCallback();
257
258        jQuery.get(mapConfig.getDataUrl(), function (data)
259        {
260            jQuery.each(data, function (index, item)
261            {
262
263                if (icon_array[item.category])
264                {
265                    var icon = new OpenLayers.Icon(mapConfig.getIconPath() + icon_array[item.category]['icon'], size, offset);
266
267                    var marker = _getMarker(useGeo, item, icon);
268
269                    //setup the touch event for popover
270                    marker.events.register("touchstart", marker, function (e)
271                    {
272                        if(mapConfig.isUseAnalytics())
273                        {
274                            ga('send', '_trackEvent', 'Building', 'Click', item.title);
275                        }
276
277                        window[_popOver](item, e, mapConfig.getSiteUrl());
278
279                    });
280
281                    //setup the click event for popover
282                    marker.events.register("mouseover", marker, function (e)
283                    {
284                        if(mapConfig.isUseAnalytics())
285                        {
286                            ga('send', '_trackEvent', 'Building', 'Click', item.title);
287                        }
288
289                        window[_popOver](item, e, mapConfig.getSiteUrl());
290
291                    });
292
293                    markers[item.category].addMarker(marker);
294                }
295            });
296        });
297
298        var markerArray = [];
299
300        for (var i in markers)
301        {
302            markerArray.push(markers[i]);
303        }
304
305        return markerArray;
306
307    }
308
309    function _getMarker(useGeo, item, icon)
310    {
311        if (useGeo)
312        {
313            return new OpenLayers.Marker(new OpenLayers.LonLat(item.field_tour_longitude, item.field_tour_latitude).transform('EPSG:4326', 'EPSG:3857'), icon);
314        }
315        else
316        {
317            return new OpenLayers.Marker(new OpenLayers.LonLat(item.field_tour_x_coordinate, item.field_tour_y_coordinate), icon);
318        }
319    }
320
321    function _initGeoEventHandlers(geolocate, vector)
322    {
323        //setup event handlers and style location marker
324        geolocate.events.register("locationupdated", geolocate, function (e)
325        {
326            vector.removeAllFeatures();
327            var circle = new OpenLayers.Feature.Vector(
328                OpenLayers.Geometry.Polygon.createRegularPolygon(
329                    new OpenLayers.Geometry.Point(e.point.x, e.point.y),
330                    e.position.coords.accuracy / 2,
331                    40,
332                    0
333                ),
334                {},
335                mapConfig.getVectorPinStyle().outer
336            );
337            vector.addFeatures([
338                new OpenLayers.Feature.Vector(
339                    e.point,
340                    {},
341                    mapConfig.getVectorPinStyle().inner
342                ),
343                circle
344            ]);
345        });
346
347        geolocate.activate();
348
349
350    }
351
352    return _tm;
353
354}
355());