For my location website, I decided to make a website that would show the user which hemisphere (north vs south) they were in. This is a play on other location websites that try to show you a more precise location, whereas mine is very vague.

I made my website give the user their coordinate, then check whether the latitude was greater than 0. If it is, then a picture of the northern hemisphere will pop up. If not, a picture of the southern hemisphere will pop up.

In the middle of working on this project, my computer decided that it no longer thought the getLocation() attached to the onclick of the button was valid. I didn’t make any edits to this part of the code, and it suddenly stopped working. I tried closing the programs and reopening them, but nothing fixed it. This happened before I was able to put the photos in the program, so even if this getLocation() problem gets fixed, I don’t know if the photos will show up.

https://github.com/ashley-aili/Location-Website

For my location-based game, I chose to do an airport bingo game.

The user will open the website and see a traditional looking bingo game board. On the 24 squares (not counting the free space) the user will see different situations or people that they may encounter at the airport or in the airplane. As the user sees these, they can simply tap the square to check it off. There is no “signifier” when a user gets a bingo, allowing them to check off as many as they see, not just simply stopping when they’ve found 4 or 5 of the squares.

I found a website that allows the user to create bingo squares and every time the website is refreshed, the game board is reconfigured with the tiles you put in. I then loaded this website onto an html document. I wanted to make sure that this game could be played anywhere, but also couldn’t be completely filled in at one airport, so I put specific squares in that are only available at certain airports or contradicting squares like only two terminals or more than four terminals – you can’t have both of those.

In order to put more emphasis on the location of the user (what airport they are at), I decided to put a form at the bottom of the website where the user can fill in their name, airport, and an interesting/unique/cool thing they saw at that airport. Once they press submit, the website will load a new page that lists all the users and their answers. This way users can see similarities and differences between airports (that may be in a similar area).

I had a bit of trouble with the layout of the website. I continued to use EvoThings and its platforms. When I would view the website on my phone, the bingo table (which is in an iframe) would continuously shrink. I also couldn’t zoom in. The form was also all the way on the left instead of centered. With Matt, I put a red border around everything to see the edges of all my sections on the page. We finally were able to configure the CSS to make everything look nice.

I tried to add another page that would display all users’ answers, but I ran into more issues. I had to work with PHP and got confused pretty fast. What the website does now is navigates to the list page, but for some reason comments out my php get functions so they don’t show up. I would love to get this working eventually!

This is before centering the form (and before the second page):

IMG_6435.TRIM_

This is how it is now:

https://github.com/ashley-aili/Location-Game

For my beacon project, I wanted to have one beacon that loaded events at the student dorms and one beacon that loaded events at the academic center. This way, students could see exactly which events were happening that day because it’s easy to forget what’s happening on Thursday when we are sent an events email early Monday morning.

I started with testing EvoThings and its connection from my laptop to my phone. I simply loaded the events email onto an HTML document. It worked on the first try! I then went to create my own website that listed all the events for that specific beacon.

I then ran into issues with trying to connect this HTML document to the beacon. In order to configure the URL to the beacon, I had to first find my localhost address, then try to configure a shorter URL address, then attach it to the beacon.

The local host address was the biggest issue. I downloaded MAMP and copied the beacon folder into MAMP’s htdocs folder. Matt and I had to try a few different options with the local host address. We finally found my IPv4 address, then had to find whether I needed to put :8888 after the address or not. We finally got it to work on the laptop, but couldn’t connect on my phone. We figured this was because of NYU Berlin’s WiFi configuration and settings. When I arrived back at my home in the US, my phone was able to connect.

I put my localhost address into bitly’s URL shortener and put that as my beacon’s URL. Normally, you can’t shorten localhost addresses with a URL shortener, but this time it did work. Because I spent so much time trying to figure out the URL and the local host issues, I decided to just do one beacon that would load the events email we got every Monday. If this project were to go as is in the school, I would just replace the email URL every Monday with the new events email. One issue that still remains is that on the laptop, the loaded email is very small whereas it loads correctly on the phone. I don’t see this as a huge issue as I intended people to be looking at this on their phones, and not have a laptop in close proximity to the beacon.

This was the first test:

This was the first test:

IMG_6385.TRIM_

This is the website I built:

This is the final:

IMG_6438.TRIM_

https://github.com/ashley-aili/Beacons-Project

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

Here is the geoJSON I made with 15 different locations.

I tried to upload to the git repository but didn’t know which folder to put it into, so I just put it in the main one.

I mapped out common buses, trams, and metros that I use. The 3 data factors are slightly different between the 3 categories. I also marked them with different colors and different symbols.

locative-media/amf755 (15).geojson

For this mapping project, I mapped out my intended itinerary for Fall Break. I had planned to go to Ireland and explore as much of it as I could. Unfortunately, the hurricane stopped me from going.

There are four main areas in my map: Dublin, Cork/Blarney, Belfast, and the Cliffs. My plan was to explore Dublin on my own but to be on a tour for each of the other areas. It was really cool to see my itinerary mapped out like this. I still definitely want to go, but I found more places on the map that I want to see, too, so maybe I’ll have to plan a longer stay!

In Dublin, I tried to input my own information into the places, because that’s what I myself planned out. The routes and order of stops in the other cities were based on the itinerary for each tour. Because of this, I searched the place, then clicked “Add to map”. I didn’t have to look up the entrance fees and times because the tour guide already did that for me.

I think this map definitely shows the more popular places in Ireland. I chose destinations based off of what I had to see in Ireland while I was there – basically the super touristy stuff. This map gives a visual representation of popular Ireland. I don’t think I’ve seen that done before.

One issue that I found was that Google Maps didn’t offer a public transport or flight option under the direction tab – only car, bike, and walk. That was a let down because it’s desktop and mobile app allow users to pick public transport option on how to get there.

I wonder what this kind of mapping would look like on a very small scale (like just your small neighborhood – similar to what Clay did in the demonstration) and then how that would compare to the touristy map in your area.

MAP: https://drive.google.com/a/nyu.edu/open?id=1Wwnsv3zSaKTZfZFN0WVdBdlsqJY&usp=sharing

OR

https://www.google.com/maps/d/edit?hl=en&mid=1Wwnsv3zSaKTZfZFN0WVdBdlsqJY&ll=53.56902123689213%2C-8.879696953125062&z=7

For this assignment, I chose the three common places I get food and coffee around the city. I visit these places at least once a week. The first one is Lidl. It is a discount grocery store where I get my groceries. It also has a coffee vending machine inside where I’ll sometimes get coffee. The second place is Chupenga. It is a Mexican restaurant along the lines of Chipotle. I get lunch/dinner here every Wednesday. The last place is Rewe. This is a supermarket chain located all throughout Berlin. I am specifically talking about the one close to the academic center. I get coffee here almost every morning (if I don’t grab it from Lidl), as well as a mid-class snack or breakfast items to take home for the next mornings. I’ll often get lunch here, too.

For the file, I put in the places’ names, if I get mainly food or coffee there, and their opening hours. I also used Google Maps to help me find the coordinates. I chose coordinates that were at the entrance I normally use to enter (not always the main entrance).

I got frustrated pretty easily with this software. I started by typing everything in, then realized I could just place a marker and the site would write it for me. Then I realized that every time I tried to edit the map, the code would change, erasing any extra elements I put in. I finally figured out to just edit the table on the map, and it finally all pieced together.

Berlin: Berlin had a fair amount of traffic. There were many passenger vessels and tugboats or special crafts. There were a few cargo vessels. There was one port that showed up on the south side of the river. There were lots of photos that popped up west of the port. I didn’t realize the river was used that much. I assumed the passenger vessels were like the dinner cruise parties, but there’s a whole category for pleasure crafts, but there weren’t many of those. I wonder what the cargo vessels are carrying.

Prague: There wasn’t much traffic. Actually basically none. There was one port in the northern part of the river, but not any pictures. It seemed very scarce compared to Berlin. I guess this is because there’s no major water port or major body of water nearby (unlike Germany who has access to the coast.

Shanghai: There were tons of cargo vessels. It was a little shocking to see all the activity after the barren Prague and medium Berlin. This actually makes a lot of sense since China exports and ships for several companies. Most of the ships were in the mouth/delta of the Yangzi River, but there was a fair amount of boats in the Huangpu River as well.

Ashley1:
Lat 50.090942 Long 14.424169
Taoist Tai Chi Association in the Czech Republic, Prague, Czech Republic

Ashley2:
Lat 40.424217 Long -3.709244
Aviatur Travel Agency, Madrid, Spain
When trying to find the lat and long, I realized I forgot to put a – with the long as the command prompt read West

Ashley3:
Lat 40.41365 Long -3.682419
Palacio de Cristal, Madrid, Spain

This was a great review of JS. I didn’t touch JS at all over the summer, so it was nice to see it again like this. I also liked the small introductory to jQuery. That’s something that confused me a bit in Comm Lab (and I haven’t had a class that *made* me use it since then).