1+ // if stuck, try this url : window.location.origin + "/api/geodata/siterecs_samhsa_ftloc/name1=Al-Assist
2+ // TODO: change url to get the filter values.
3+ // TODO: maybe change the center to the average of all the latitude and longitude, aka center of every location we have found.
4+ let globalData ;
5+ let markerList = [ ] ;
6+ let myCircle ;
7+ let destination_name ;
8+ let geocoder ;
9+
10+ $ ( document ) . ready ( function ( ) {
11+ function outerHTML ( node ) {
12+ return node . outerHTML || new XMLSerializer ( ) . serializeToString ( node ) ;
13+ }
14+ var table_name = mapParams . table_name ;
15+ var param_values = mapParams . param_values ;
16+ var destination_name = mapParams . destination_name ;
17+ var excluded_values = mapParams . excluded_values ;
18+
19+ var keyword = mapParams . keyword ;
20+ param_values = param_values . replaceAll ( "amp;" , "" )
21+ excluded_values = excluded_values . replaceAll ( "amp;" , "" )
22+ var get_url = "/api/geodata/" ;
23+ get_url += table_name + "/" ;
24+ console . log ( 1 )
25+ console . log ( get_url )
26+ if ( param_values != "" && param_values != "None" ) {
27+ console . log ( 1 )
28+ get_url += param_values + "&archival_only=False/" ;
29+ console . log ( get_url )
30+ }
31+ else {
32+ console . log ( 2 )
33+ get_url += "archival_only=False/"
34+ console . log ( get_url )
35+ }
36+ if ( excluded_values != "None" && excluded_values != "" ) {
37+ console . log ( 3 )
38+ get_url += excluded_values + "/" ;
39+ console . log ( get_url )
40+ }
41+ //if(excluded_values == "None"){
42+ // excluded_values = "archival_only=True"
43+ // console.log("we are safe")
44+ //} else {
45+ // excluded_values += "&archival_only=True"
46+ // console.log("we are not safe")
47+ //}
48+ if ( keyword != "" ) {
49+ if ( excluded_values == "None" || excluded_values == "" ) {
50+ get_url += "None/"
51+ console . log ( 4 )
52+ console . log ( get_url )
53+ }
54+ get_url += keyword
55+ console . log ( 5 )
56+ console . log ( get_url )
57+ }
58+
59+
60+
61+ $ . ajax ( {
62+ type : "GET" ,
63+ url : window . location . origin + get_url , // need to adjust the params to dynamically filter our map
64+ contentType : 'application/json;charset=UTF-8' ,
65+ success : function ( data ) {
66+ globalData = data ;
67+ // Need to hide the access token
68+ mapboxgl . accessToken = 'pk.eyJ1IjoibWF0Y2htYXBwZXIiLCJhIjoiY2tvMWJmZW9wMGtjdzMxb2k0NWhpeW0xMSJ9.ChZtypQ-p77nXwERIAt3Iw' ;
69+ map = new mapboxgl . Map ( {
70+ container : 'map' ,
71+ style : 'mapbox://styles/matchmapper/ckog0go3v3k1417nn7gex8ebr' ,
72+ center : [ - 75.158924 , 39.9629223 ] ,
73+ zoom : 11
74+ } ) ;
75+
76+
77+ // Load Mapbox Geocoder
78+ geocoder = new MapboxGeocoder ( {
79+ accessToken : mapboxgl . accessToken ,
80+ mapboxgl : mapboxgl , // Set the mapbox-gl instance
81+ marker : false , // Use the geocoder's default marker style,
82+ placeholder : "Search for Site by Address"
83+ } ) ;
84+
85+ // Add Geocoder to modal
86+ console . log ( $ ( '#geocodeWidget' ) )
87+ $ ( '#geocodeWidget' ) [ 0 ] . appendChild ( geocoder . onAdd ( map ) ) ;
88+
89+ /*
90+ const ref = window.location.href;
91+ if (ref.indexOf('site_coord') > -1) {
92+ window.ref = ref
93+
94+ const regex = /(.*?)[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)(.*?)$/;
95+ window.regex = regex;
96+ const c = ref.match(regex);
97+ console.log(c)
98+
99+ }
100+ */
101+
102+ // Event listener for geocoder completion
103+ geocoder . on ( 'result' , ( { result } ) => {
104+ const searchResult = result . geometry //||
105+ const options = { units : 'miles' } ;
106+
107+ // Loop through sites and calculate distance to geocoder address
108+ for ( const loc of data . loc ) {
109+ loc . distance = turf . distance (
110+ searchResult ,
111+ [ loc . longitude , loc . latitude ] ,
112+ options
113+ ) ;
114+ }
115+
116+ // filter array by distance in field
117+ const dist = parseInt ( $ ( "#distance" ) [ 0 ] . value ) ; //get distance from text field
118+ const data_ = data . loc . filter ( d => d . distance < dist ) ;
119+
120+ // get count of sites within radius
121+ const sitesInFocus = data_ . length ;
122+
123+ // find site with min distance
124+ const closest = data_ . sort ( ( a , b ) => {
125+ if ( a . distance > b . distance ) {
126+ return 1 ;
127+ }
128+ if ( a . distance < b . distance ) {
129+ return - 1 ;
130+ }
131+ return 0 ; // a must be equal to b
132+ } ) [ 0 ] ;
133+
134+ // fit the map on the entered location and the closest site
135+ // Create a bounding box using the dist variable and right triangle math
136+ // keep is simple by using 69 miles = 1 degree
137+ halfBound = 2 * dist / ( 69 * Math . sqrt ( 2 ) ) ;
138+ const c = searchResult . coordinates ;
139+ const bbox = [ [ c [ 0 ] - halfBound , c [ 1 ] - halfBound ] , [ c [ 0 ] + halfBound , c [ 1 ] + halfBound ] ] ;
140+ map . fitBounds ( bbox ) //, {padding: 600});
141+
142+ // Draw circle of radius
143+ myCircle = new MapboxCircle ( { lat : c [ 1 ] , lng : c [ 0 ] } , dist * 1610 , {
144+ fillOpacity : 0
145+ } ) . addTo ( map ) ;
146+
147+ // Clear map and re-draw with different colors
148+ markerList = clearMap ( markerList ) ;
149+ plotMarkers ( data , destination_name , sitesInFocus )
150+ // Change record totals
151+ document . querySelector ( "#sitecount" ) . textContent = sitesInFocus ;
152+
153+ // Load popup of closest location
154+ // link_object = window.location.origin + "/table/" + table_name + "/oid=" + closest.oid + "/";
155+ // const popup = new mapboxgl.Popup()
156+ // .setLngLat([closest.longitude, closest.latitude])
157+ // .setHTML("<a href=" + link_object + ">" + JSON.stringify(closest.name1) + "</a><br><a href='" + closest.website1 + "'>Website</a><br>Phone: " + closest.phone1 )
158+ // .addTo(map);
159+ } ) ;
160+
161+ // Add zoom and rotation controls to the map.
162+ map . addControl ( new mapboxgl . NavigationControl ( ) ) ;
163+
164+ plotMarkers ( data , destination_name ) ;
165+ document . querySelector ( "#sitecount" ) . textContent = data [ 'loc' ] . length ;
166+
167+ }
168+ } ) ;
169+ } ) ;
170+
171+
172+ // function to toggle the search modal on and off
173+ function toggleSearchModal ( ) {
174+ $ ( "#siteSearch" ) . toggle ( ) ;
175+ }
176+
177+
178+ function reloadMap ( ) {
179+ markerList = clearMap ( markerList ) ;
180+ plotMarkers ( globalData , destination_name ) ;
181+ myCircle . remove ( ) ;
182+ geocoder . clear ( ) ;
183+ }
184+
185+ // function to clear map
186+ function clearMap ( items ) {
187+ for ( i = 0 ; i < items . length ; i ++ ) {
188+ items [ i ] . remove ( ) ;
189+ }
190+ return [ ] ;
191+ }
192+
193+ // function to plot the markers
194+ // Optional argument countFocus to plot those sites in a different color
195+ let map ;
196+ function plotMarkers ( data , dest_name , countFocus = data . length + 1 ) {
197+
198+ // sort data
199+ data = data . loc . sort ( ( a , b ) => {
200+ if ( a . distance > b . distance ) {
201+ return 1 ;
202+ }
203+ if ( a . distance < b . distance ) {
204+ return - 1 ;
205+ }
206+ return 0 ; // a must be equal to b
207+ } ) ;
208+
209+ var link_object ;
210+ for ( i = 0 ; i < data . length ; i ++ ) {
211+ link_object = window . location . origin + "/table/" + mapParams . table_name + "/oid=" + data [ i ] [ 'oid' ] + "/" ;
212+
213+ // set color based on countFocus
214+ if ( i < countFocus ) {
215+ _color = "#2A76D2"
216+ } else {
217+ _color = "#3FB1CE"
218+ }
219+
220+ var marker = new mapboxgl . Marker ( { color : _color } )
221+ . setLngLat ( [ data [ i ] [ 'longitude' ] , data [ i ] [ 'latitude' ] ] )
222+ . setPopup ( new mapboxgl . Popup ( ) . setHTML ( "<a href=" + link_object + ">" + JSON . stringify ( data [ i ] [ dest_name ] ) + "</a><br><a href='" + data [ i ] . website1 + "'>Website</a><br>Phone: " + data [ i ] . phone1 ) )
223+ . addTo ( map ) ;
224+ markerList . push ( marker ) ;
225+ }
226+ }
0 commit comments