https://static.pendletonsafes.com/static/coderedcms/js/codered-maps.js

1/*
2CodeRed CMS (https://www.coderedcorp.com/cms/)
3Copyright 2018-2019 CodeRed LLC
4License: https://github.com/coderedcorp/coderedcms/blob/dev/LICENSE
5@license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
6*/
7
8// Initialize the map on the gooogle maps api js callback.
9function initMap() {
10    // Set defaults
11    const map = new google.maps.Map(document.querySelector('#cr-map'), {
12        zoom: parseInt($("#cr-map").data("zoom")),
13        center: {
14            lat: parseFloat($("#cr-map").data("latitude")),
15            lng: parseFloat($("#cr-map").data("longitude")),
16        },
17        mapTypeControl: $("#cr-map").data("map-type-control"),
18        streetViewControl: $("#cr-map").data("street-view-control"),
19    });
20    // Create an infowindow object.
21    var infowindow = new google.maps.InfoWindow({});
22
23    if (navigator.geolocation) {
24        var currentLocationControlDiv = document.createElement('div');
25        var currentLocation = new CurrentLocationControl(currentLocationControlDiv, map);
26
27        currentLocationControlDiv.index = 1;
28        map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentLocationControlDiv);
29    }
30
31
32    // Listener to update the map markers when the map is idling.
33    google.maps.event.addListener(map, 'idle', () => {

34        const sw = map.getBounds().getSouthWest();
35        const ne = map.getBounds().getNorthEast();
36        let locationDataFeatures = [];
37        map.data.loadGeoJson(
38            $("#cr-map").data("geojson-url") + `&viewport=${sw.lat()},${sw.lng()}|${ne.lat()},${ne.lng()}`,
39            null,
40            features => {
41                locationDataFeatures.forEach(dataFeature => {
42                    map.data.remove(dataFeature);
43                });
44                locationDataFeatures = features;
45                if ($("#cr-map").data("show-list") == "True") {
46                    updateList(locationDataFeatures);
47                }
48            }
49        );
50    });
51
52    // Listener to update the info window when a marker is clicked.
53    map.data.addListener('click', ev => {
54        const f = ev.feature;
55        infowindow.setContent(f.getProperty('pin_description'));
56        infowindow.setPosition(f.getGeometry().get());
57        infowindow.setOptions({
58            pixelOffset: new google.maps.Size(0, -30)
59        });
60        infowindow.open(map);
61    });
62
63
64    // Logic to create a search box and move the map on successful search.
65
66    if ($("#cr-map").data("show-search") == "True") {
67        var input = document.getElementById('pac-input');
68        var searchBox = new google.maps.places.SearchBox(input);
69        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
70        map.addListener('bounds_changed', function () {
71            searchBox.setBounds(map.getBounds());
72        });
73        searchBox.addListener('places_changed', function () {
74            var places = searchBox.getPlaces();
75            if (places.length == 0) {
76                return;
77            }
78            // For each place, get the icon, name and location.
79            var bounds = new google.maps.LatLngBounds();
80            places.forEach(function (place) {
81                if (!place.geometry) {
82                    return;
83                }
84                if (place.geometry.viewport) {
85                    // Only geocodes have viewport.
86                    bounds.union(place.geometry.viewport);
87                } else {
88                    bounds.extend(place.geometry.location);
89                }
90            });
91            map.fitBounds(bounds);
92        });
93    }
94
95    // Updates the list to the side of the map with markers that are in the viewport.
96    function updateList(features) {
97        new_html = "";
98        if (features.length == 0) {
99            $("#LocationList").hide();
100            $("#LocationListEmpty").show();
101        } else {
102            $("#LocationList").show();
103            $("#LocationListEmpty").hide();
104            for (i = 0; i < features.length; i++) {
105                feature = features[i];
106                new_html += feature.getProperty('list_description');
107            }
108        }
109        $("#LocationList").html(new_html);
110    }
111}
112
113function CurrentLocationControl(controlDiv, map) {
114    var controlUI = document.createElement('div');
115    controlUI.style.backgroundColor = '#fff';
116    controlUI.style.border = '2px solid #fff';
117    controlUI.style.borderRadius = '3px';
118    controlUI.style.boxShadow = '0 2px 2px rgba(0,0,0,.3)';
119    controlUI.style.cursor = 'pointer';
120    controlUI.style.marginTop = '10px'
121    controlUI.style.marginBottom = '22px';
122    controlUI.style.marginLeft = '10px';
123    controlUI.style.textAlign = 'center';
124    controlUI.title = 'Near Me';
125    controlDiv.appendChild(controlUI);
126
127    // Set CSS for the control interior.
128    var controlText = document.createElement('div');
129    controlText.style.color = 'rgb(25,25,25)';
130    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
131    controlText.style.fontSize = '16px';
132    controlText.style.lineHeight = '36px';
133    controlText.style.paddingLeft = '5px';
134    controlText.style.paddingRight = '5px';
135    controlText.innerHTML = 'Near Me';
136    controlUI.appendChild(controlText);
137
138    // Setup the click event listeners: simply set the map to Chicago.
139    controlUI.addEventListener('click', function () {
140        navigator.geolocation.getCurrentPosition(function (position) {
141            currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
142            map.setCenter(currentPosition);
143        });
144    });
145}
146
147/* @license-end */