A food web map: filtering dining hotspots

"Find the food you want with a few simple clicks."

What it is about

This is a map aiming to assist people who are struggling with where to find the dishes they want. The motivation arises from our personal experiences. When traveling to a new place, arranging a meeting in a restaurant, or just having a craving for a specific type of food, we usually prefer getting to know the whole picture of the options we can have. However, the interactive maps accessible on the internet so far are not designed to decide on an area to go to, but more on a specific place. This is why the topic is interesting for us and worth diving into.

How we built it

The project was divided into two major sub-workflows: The first was data collection; the coordinates of restaurants are from OSM and other information is from Google Maps and restaurant websites. The second workflow was symbology and web app design. Initially created in ArcGIS, the dataset, accompanied by its symbology, was imported into ArcGIS Online to be used as a web service. Then, we proceeded to build an HTML file and used ESRI’s JavaScript API to create an actual web application. We continued with symbology refining on ArcGIS Online, using pre-made SVGs we found online. We also wrote some code in Arcade, ESRI’s programming language, to design the pop-up elements.

Challenges we ran into

Data collection was quite challenging; assigning every place to its own exact cuisine required being very flexible with the scope of cuisines. Furthermore, application-building tools available on ESRI's online platforms were missing features we wanted, but neither of us had the knowledge in JavaScript – to the extent that we couldn't even figure out WHERE to write the code.

What we're proud of

We like how our final product looks because almost all of our initial-planned features have been fulfilled; as the web app displays a heatmap and restaurants, the users can filter in a relatively convenient way. We are especially proud to have built our first Web Application!

What we learned

Obviously, we learned JavaScript to some degree because we also learned that perhaps most web applications are somehow based on it. We also got to know more about ArcGIS in detail, especially ArcGIS Online and its limitations – but also its capabilities.

What's next

Extending the dataset will be the priority. This is not only for the amount but also for the options that can be included, such as price range, atmosphere, taking out or not, or even lunch meal availability. Completing the symbology is also a task forward, as well as finer and more precise division of places to their cuisines.
Itay Swid
Bo-Yuan Chen

13th intake
Juliane Cron, M.Sc.
Food, web map, heat map, filter, Munich, restaurant, Javascript, interactivity
Try it