Zeyao – LM – LM Game

For the last project, I decided to make a game that is not included the competitive function. For me, I don’t like how people have to win something in a game. Sometimes, a game can just be entertained and for fun. So, this game is a drawing game which people draw the shape of the city based on the metro line. Usually, when we talk about the metro system, we will think of it based on the city itself. Also, the metro map is seen as an extra attributes to a map. However, I realized that why can’t we put the metro line at first, then based on the metro shape, we draw the shape of the city?

I used the google map javascript api for this project. First, I initialize the map then I added a transit layer on the map, which make it more complete. I also added a overlay Tile system to help the player to draw the city. Originally I wanted to use p5 to make the drawing system. Yet I found that there was a drawing manager function on the google map api. So I used that. I made 3 buttons to change the location center by using jquery, however, it showed the error “google is not defined” and I was working on this for hours. So for now this was not working.

For the future development (hopefully I can fix it recently – in the next few days), I want to fix the button first because there is only a line of error and I knew it could work functionally. Then I have another problem that I do not really know how to fix it. The map itself (the city) is the base of the whole API, so to be honest it is basically impossible for me to separate the base from the other add-on layer, for example, the transit. I tried to search it online, and I did not see any results. My idea was to create a button, and once you clicked it, the map will show up. The default page is just the transit layer. I tried to make the map null — which is how people hide the layer or the map itself, but it wouldnt work. Because the transit is based on the initMap by settings. On the Gaode Maps (a Chinese map) API, the subway can be separated by the map itself, but the metro map is more like an image with a white background. It makes everything underneath and you can barely create anything based on the metro map. Also I did not see that they include the drawing system in the API. So hopefully I can find a way to figure it out.

Here is the code:

Zeyao – LM – GeoJsonProject

For this project, I used part of Ashley’s data of the tram in Berlin. However, I realized that it is hard to remake the visualization of those data. I noticed that one of the properties is what are near the stations, so I thought I might find the coffee shops which are close to the tram station, and find the data of their active time. I collected 7 coffee shops’ name, coordinates, and their active time. It took me a while to do this, and it was really hard to find some because some tram stops were too close to each other.

Here are part of the data:

Then my idea was that I used a slide bar to control the active hour, and show whether the coffee shop was busy or not. The first thing I did was to use the googleMaps API and create a map. Then I tried to load the GeoJson in to the map. However, I tried so many different ways and it would not work. First, I tried to just convert the geoJson file to simple javascript, and use the function addGeoJson(data), but it wouldn’t work. Then I uploaded the geoJson file to my website server, and tried to put url into the loadGeoJson function, it showed the issue of “Access-Control-Allow-Origin”. Basically, this is the issue when you used different host for different files and tried to combine it together. So I decided to make a local server. Here is the terminal screenshot that I have for the local server, then it works.

Then I used the GUI under the p5.js and made a slide bar to control the active hours. I learned the GUI from the nature of code, however I got confused by how to get the number of the index from the geoJson file, and control it. I called Ada, and she helped me with that. Basically, geoJson file is a combination of different arrays and all I need to do is to console.log the data and go deeper and find out. geoJson.features[15].properties.active_time[params.hours] this is what Ada helped me got. it hid here! Then I could use slide bar to control the index and get the data that I want.

Zeyao – LM – BeaconProject

For this Beacon project, the main struggle that I have is to come up with an idea that fits the function of beacon. At the beginning, I found that Beacon can connect WeChat Shake function, so my original idea is I want users to shake their phone to sensor my beacon, if I am around, they can get a free hug. However, then I realized that you can’t develop anything related the WeChat Shake function if you do not have a official company account. So the idea was abandoned. Then I realized I can place each beacon in the kitchen and the bedroom. Once you stepped into the kitchen, you will get drinking reminder from your phone, and every night you stepped in your bedroom, you will get a quote or inspiration to cheer you up. However, for IOS system, you cannot develop the notification function if you do not want to develop an app. So that idea did not work. Yet the idea is similar to the smart home. So, with Matt’s help, I got the idea of smart kitchen. This is how it works: I place two beacons close the fridge and the microwave. Once I get close to the Microwave, I can check my phone and get the Microwave instruction. When I get close to the fridge, I can get the information of what do I have in the fridge. This makes your life more convenient.

I used PhyWeb to remake the server name of each beacon to Microwave and Fridge, then I went to the EddyStone Scan thing and opened its app.js file. In the file, I wrote the function under the displayBeaconList. For the future development, I really think that AI can make the fridge better. They can recognize if anything get expired, and remind you to throw it away. Then they can ask you if you want to order a new one. It will be really cool and it will help people a lot.



<script src=”https://gist.github.com/zeyaoli/f299ed7ef3765bbe4dd97e0b043ebd34.js”></script>

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

Zeyao – LM – Exiftool

The first one is taken in Florence! Amazing!

The second one was taken in Madrid, the Retiro park! I went there when I was in Madrid, and actually my instagram profile photo was taken there too!

The third one was taken in London. Actually before I checked the data, I assumed that this one would be taken London and I am right!

Zeyao – LM – MarineTraffic

This is a really fun and interesting map. I have never seen a map that tells you the Marine traffic, probably because that was not related to my business? Now I am in Prague, and when moved the map to Europe and zoomed a little bit in, it was funny to see that there was almost no sign in Czech Republic. Then when I zoomed into Prague, maps came out like this. THERE WAS NO SHIP IN PRAGUE! Only the Prague port sign showed up. Sad…

Then I compared Prague to Berlin, which was 4 hours bus away from Prague, and also where Ashley is studying in. Berlin is definitely one of my favorite cities in the world, and I just came back yesterday. On the map I saw so many ships that were actually moving on the river, and it shows the destination and position received time.

Before I moved the map to Shanghai, I knew that it was gonna be crazy!! Shanghai is one of the important port city in China and when I was studying there, I noticed there were a lot of ships on the HuangPu River. So yeah I was not surprised by the map. By the way I really missed the seafood because all the seafood are so expensive in Prague 🙁


Zeyao – LM – GeoJSON file

In this GeoJSON file, the data that I collected is from the vintage shop in Prague. As you might know, I am a huge fan of vintage shopping. I personally do not like fast-fashion (like H&M or Zara). Fast fashion brands for me are really overpriced and the brands theirselves are overrated. When I live in somewhere, I will look up the local vintage shop and go to see if there are some clothes that fit me. The properties that I chose for these vintage shops are “name”, “target”, “open time” and their reference images. It is really important to know what kind of clothes the shop is selling. Who do they target? and what is their open time? Only when you acknowledge these properties, can you go to the right one and pick your outfit. For the coordinates, I used google maps to help me with that. If you right click the place that you wanna get the coordinates, it will pop up a small window and you can click “what’s here”, then you will get the coordinates.

There’re few problems when I try to import it to geojson.io. First one is I missed a comma, so it does not work. Second, Matt told me the geojson does not need the function “json_callback”, and that is for something like google maps, so I deleted that. Then I successfully imported that into geojson. However it gave me some weird locations. 

I am in Middle East WOO HOO! The way I fixed is that I tried to find my location on this map and made a point. I clicked that point and see what is the difference between the coordinate on the map and my data. Then I realized the latitude and longitude is opposite on the geojson than the google maps data that I got! So now I have the right geojson map!

Here is my code for my GeoJSON file,


Zeyao – LM – How to lie with maps

First of all, these three chapters of “How to lie with maps” gives me a deeper understanding of maps. The first thing that I learned actually was what we talked about in class: the component of map, which are scale, projection, and symbolization. I think I learned the scale part in high school geography class before (especially how the mapmaker defined the scale, however, what I don’t know is that actually people say “represent” instead of saying “equal”. That’s a new thing to me.

In terms of the map projection, that attracts me the most. Since we get used to see the flat, two-dimensional map, we have a misunderstanding of the size of different countries. I remembered I read a fun fact that actually Russia is not as big as you see, and Africa is much bigger than you see on the map! Seeing different equal-area projection makes me realized there are so many ways to project the world. Also, something new that I learned is that maps does not have to be only represent the world but also other things such as populations of the countries. It is interesting to see how mapmakers try to show different things on the map.

One map cannot contains everything in the world, a good map must be straightforward and targeted. To archive this, we need to use what we learn in Chapter 2, which are the three component. In this chapter, I know how to make the map better by using better symbol on the map. I think it might help me with my future project!