LM: Javascript API

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

 

 

LM Project1

(updating)

For this project, I was using Jackie’s data of street artists. Street art has become a more and more important part of the city culture. So I wanted to build an album for them and help to spread this kind of culture. At the same time, I made the project more interactive by adding some feature letting users alter the music the way they like and create their own music.
The first thing that I did was to get familiar with the Google map API. I read through the sample and had some trouble understanding it, the map wouldn’t show on the screen. After I tried for several times, I figured that the API key was not working and I had the canvas and the map at the same time. So I fixed that.
Then I tried to import the data from GeoJson file to the map and add markers. There were three ways introduced on the developer page and I tried all of them. Thanks to Matt helping me fix all the bugs. API key was the first bug, and me forgetting the call back function in the HTML file was the other reason that it didn’t work. When trying to debug, I added a callback function in the JavaScript file, which was unnecessary at all. What’s more, I also kept the original name from the sample code online without changing it.
Then I started with the “radio” code. Which I simply write the code of a video recorder with street artist’s picture on it rotating. Also, I write a simple simulator, which can control the music. First I wrote about all the thing in sublime using HTML and then when I started to have the thought of letting users manipulate the recordings, I looked up and found the p5 sound library was actually an easier way of doing it so I switched all the things into p5. Then I connected the mouse position with pitch and speed of the music.
I created a radio page for each individual artist. Linking map to the “radio pages” that I have done is another challenge. I was trying to using to link but in my code, the linking is actually in JavaScript. So I went to the library and reference and got code “window.location.href” Then I put markers in a for loop and use I to define them so that I can link them to the “radio pages”. The code didn’t work at first but after I pushed all the markers into the aerialist then I worked.
I also added a typing effect at the very beginning and explain the whole project to make more sense.
I also contained the p5 geolocation library and managed to grab the longitude and latitude. If I have enough data, I really want to expend the map and let users to get information of the street artists of their current location.

 

LM – P5 map

I used the p5 library to create a color-changing ellipse based on the location. I used the latitude and longitude to fill in the red and blue.  At first, the difficulty came from that I didn’t totally understand the library. Then I figured and called the functions correctly.

At first, I asked other classmates to run the code and test it for me, However, all of them tell me that they saw a blue ellipse. Then I asked them to screenshot the reading in their inspectors. It turned out that reading is absolutely normal. Then I asked them to send over the screenshot and figured that it’s different but just making such a small difference. So I end up mapping the value figured that it’s still not making the obvious change in color. What I did afterward is linked the coordinate reading of the user to the measurement of the ellipse so that a more obvious change can be observed.

There is also another thing that I want to mention when trying to debug, I also think of the possibility that it might be the negative number or the decimal that was not recognized.

New York

China

Montreal

Zeyao – LM – mapping project

For this project, I made a map based in prague. The first layer that I have is some places that I want to go in Prague, mostly tourist places that I haven’t been to. It gives me a general idea about where should I go if I stay in Prague for the weekend. The second layer is my daily routine (aka how do I go to school from my dorm?). You can see the route is kinda weird because that how the 6 tram which I take it everyday goes. It goes most of the part of Prague 7 so it takes more time to go to school. It is like a 20 mins ride. The third layer is quite interesting. I marked the area where OFO is located at! OFO just landed in Prague last month! Now I can see them everywhere around my dorm area. It is so cool to see Chinese brand takes over Prague haha

Locative Media 12 – Google Map / My Map

For this mapping project, I uses the locations I usually visit in Paris daily – to find out what are the areas I’m usually in and what areas I haven’t really been too. I found this useful since we are not always having a map of the city we live in our mind. Rather, we have something like linear lines with broken dots in our mind. It is interesting to record our routine behaviour and see how’s our relationship with a city. It might be more interesting for one to make a map marked with places they’ve been in his/her own home city, since we always hear stories like “I’ve lived in this city for 20 years, but I never heard of the place that my friend is going everyday”.

This is how my map looks like:

It’s divided by 5 layers: school routine, direction from dorm – school, cafes and bakeries, groceries, and museums. the direction layer connects my places from the edge of Paris to the center.

It’s not hard to tell that most of places I visit together make a line that crossing through Paris – wow, and I realized that I hardly (or never) visit 15, 16, 17, 19, 20 arr. in these two month.

Locative Media-Google Maps

  

Here’s the map I created. I first mapped the place I frequently visit in red and then landmarks in blue. Which contains the gym, local CVS Macys and grocery stores like trader&joe’s. Also, I marked places and landmarks that I wanted to visit. Which has Lincoln Memorial, National Mall, Capitol Hill (where I am interning) Pentagon, National Museum of history.

After that, i marked the NYU DC building and tried to visualize routes. There are lots of one-way road in DC so I have to distinguish and keep it in mind when I am making “driving route” and “walking route”

After all, those, based on the route and markers. I marked the area that I always hang out (big triangle is living area and the small on in my hangout place during my internship). And I also find that this place is also the place that’s walkable for me since I tend to walk pretty much everywhere in DC.