source: tmcsimulator/trunk/webapps/visualizer/js/controls.js @ 516

Revision 516, 3.3 KB checked in by jdalbey, 6 years ago (diff)

Add new web app: Traffic Events Visualizer

Line 
1    // Initialize the center button (to re-center the map)
2    function initCenter()
3    {
4        var centerBtnDiv = document.getElementById('ctrButton');
5        map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(centerBtnDiv)
6        centerBtnDiv.title = 'Click to recenter the map';
7
8        // Setup the click event listeners: reset center location and zoom factor
9        centerBtnDiv.addEventListener('click', function()
10        {
11            map.setCenter(centerPoint);
12            map.setZoom(initZoom);
13            clearPlacePins();
14        });
15    }
16
17    // Initialize the search box and listener
18    function initSearch()
19    {
20        // Create the search box and link it to the UI element.
21        var input = document.getElementById('search-input');
22        var searchBox = new google.maps.places.SearchBox(input);
23        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
24
25        // Bias the SearchBox results towards current map's viewport.
26        map.addListener('bounds_changed', function()
27        {
28            searchBox.setBounds(map.getBounds());
29        });
30
31        // Listen for the event fired when the user selects a prediction and retrieve
32        // more details for that place.
33        searchBox.addListener('places_changed', function()
34        {
35            var places = searchBox.getPlaces();
36
37            if (places.length == 0)
38            {
39                return;
40            }
41
42            clearPlacePins();
43
44            // Create a bounding region to include the search result places
45            var bounds = new google.maps.LatLngBounds();
46            // For each place, get the icon, name and location.
47            // There may be multiple search results
48            places.forEach(function(place)
49            {
50                if (!place.geometry)
51                {
52                    console.log("Returned place contains no geometry");
53                    return;
54                }
55
56                // Create a marker for each place.
57                placeMarker = new google.maps.Marker(
58                {
59                    map: map,
60                    title: place.name,
61                    position: place.geometry.location
62                })
63
64                // Click on the marker to remove it from the display
65                placeMarker.addListener('click', function()
66                {
67                    placeMarker.setMap(null);
68                });
69
70                // Add this marker to the collection of current markers
71                placePins.push(placeMarker);
72
73                // Create a bounding region to include this place
74                if (place.geometry.viewport)
75                {
76                    // Only geocodes have viewport.
77                    bounds.union(place.geometry.viewport);
78                }
79                else
80                {
81                    bounds.extend(place.geometry.location);
82                }
83            });
84            // This will pan and zoom to the area around the marker
85            //map.fitBounds(bounds);
86            // This will center the map on the new marker(s) but not zoom
87            map.setCenter(bounds.getCenter());
88        });
89    }
90
91    // Remove any place pins from a previous search
92    function clearPlacePins()
93    {
94        placePins.forEach(function(marker)
95        {
96            marker.setMap(null);
97        });
98        placePins = [];
99    }
100
Note: See TracBrowser for help on using the repository browser.