For this project, I used Karen’s data about CVS locations around the D.C. area.
My plan was to have a different colored Rx show up depending on whether the CVS’s Pharmacy was open or not (in the D.C. timezone). Because of this, I specifically left two of her CVS locations out because the stores were not open 24 hours.
At first, I tried to load the geojson map to have the plots automatically placed, and then I would just edit the style and write the rest of my code. I ended up having to write it out the long way – I made an array and listed all the lat and long of all the points.
I found a Shutterstock photo with Matt and edited it to make the Rx symbol. I tried to make the Rx symbol smaller but never got that to work.
My next thing to tackle was to have the code compare the current (EST) time to the operating hours of the pharmacy. As I mentioned before, I cut two of the locations because the larger store of CVS was not 24 hours like the others. I found a library called Moment.js. It allows its users to grab specific moments of time (past, present, and future). I couldn’t get the moment() to work until I realized I had to put the script source BEFORE the sketch.js’s script source. Then my code was working.
Now, I had to check if the current time in D.C. was in between open hours. .inBetween() does just this! However, it’s input formatting required I pick a certain day. Because I wanted the day to be any weekday (excluding Saturday and Sunday) I didn’t have a definite day to put in. I then made variables for just the hours (ignoring the day of the week) to see if I could just get that to work. The only way this worked was using “<” and “>” signs instead of .inBetween(), but didn’t work the way it needed to. I tried .isAfter() and .isBefore() as well. However, .isAfter() always made the shop closed and .isBefore() always made the shop open.
I decided to try the days instead of hours. I made an array for the work week, then a for loop for that array, and then an if statement for if the current day in D.C. was equal to one of the days in the work week array. This worked! I then decided to add && and add in hours to the if statement. It seemed to only work if I had one argument for an hour (if the current time > the open time). If I tried to add a closing hour (if the current time is < the close time), it didn’t work.
Because of this, I just decided to stick with days and see if I could add in the other two locations I dropped. My thought was to model what I had done with the locations array, for loop for the locations, for loop for the work week, and if statement for the days. I opened a new document and copied what I had already written, then plugged in the two locations, made the work week array just for saturday and sunday, then put it all right after the for loop for the first set of locations was done. I added another marker variable too. Nothing showed up, though. Thinking I had to do what previously fixed an issue, I moved this second set of locations before the first. That didn’t work either.
GitHub: https://github.com/nyushima/locative-media/tree/master/javascript-mapping-api/amf755/Google%20Map%202