From GSAPP to Central Park

by Haoran Zhang, Qi Lin, Xiyu Chen, Yao Yao

Showing the points of interest (POIs) of Manhattan (from GSAPP to the Central Park) from an aerial view on a 3D map.

Our Vision

At first, we want to simulate accessible business services in Manhattan. When the agent goes through the street (e.g. Broadway), there will be a buffer surround him showing how many and what kind of business services (like food, shop, barbershop, gym, and bars, etc.) he will get within a walking distance (500 meters in theory). This simulation will help us understand the difference in convenience and prosperity along the street (or blocks) by providing dynamic visualization in a 3D city map.

However, because POI (points of interest) Mapbox give is hard to calculate, the number of POI cannot present in a dynamic simulation. So we tend to choose the following way to present our idea.

Mapbox SDK

Based on Mapbox SDK for Unity, which is a collection of tools for building Unity applications from real map data. We can interact with Mapbox web services APIs (including the Maps, Geocoding and Directions APIs) and create game objects via a C#.

POI View

The POI placement enables us to find, add, and style points of interest (POIs) on a map. The visualization would be some tags floating over the buildings and showing where certain spaces are in the city. We placed food and shops as our custom prefabs over specific POIs.

Then we want to make a Game Object (Like a pedestrian) that moving through the city, and we can count the number of each type of POIs within a radius (such as 500 meters). By knowing the change of counts we could know the convenience to get a certain type of service at one location.

PoiLabelTextSetter

 namespace Mapbox.Examples
{
	using Mapbox.Unity.MeshGeneration.Interfaces;
	using System.Collections.Generic;
	using UnityEngine;
	using UnityEngine.UI;

	public class PoiLabelTextSetter : MonoBehaviour, IFeaturePropertySettable
	{
		[SerializeField]
		Text _text;
		[SerializeField]
		Image _background;

		public void Set(Dictionary<string, object> props)
		{
			_text.text = "";

			if (props.ContainsKey("name"))
			{
				_text.text = props["name"].ToString();
			}
			else if (props.ContainsKey("house_num"))
			{
				_text.text = props["house_num"].ToString();
			}
			else if (props.ContainsKey("type"))
			{
				_text.text = props["type"].ToString();
			}
			RefreshBackground();
		}

		public void RefreshBackground()
		{
			RectTransform backgroundRect = _background.GetComponent<RectTransform>();
			LayoutRebuilder.ForceRebuildLayoutImmediate(backgroundRect);
		}
	}
}

Fly and View

We make a butterfly as the Game Object, which also carries our camera. We choose GSAPP as the start point and make the butterfly moving towards Central Park.

When we Hit the Play, the Mapbox SDK API will load the 3D map into Unity Scene. If we set a proper movement script and camera angle, we can get a significant impressive visualization of the POI in Manhattan.

using System.Collections.Generic;
using UnityEngine;

public class FlyOver : MonoBehaviour
{
    public int speed = 10;
    
    // Update is called once per frame
    void Update()
    {
        transform.Translate(Vector3.forward * Time.deltaTime * speed);
    }
}

Work distribution:

Haoran Zhang: Project Research;

Qi Lin: Visualization and Project Research;

Xiyu Chen: Unity Work and Visualization;

Yao Yao: Research and Unity Work.