Miami Food Map

Demo project created for my step-by-step article on custom maps with DeckGL, IconLayer, Next.js, and Geoapify.

Article: https://medium.com/@petrez.sobol/custom-icon-maps-in-next-js-deckgl-iconlayer-geoapify-places-api-step-by-step-1f736b897e52.

Live demo: https://miami-food-map.vercel.app.

Project overview

The goal of this project was to build an application that presents restaurants and food-related points of interest in Miami. For this purpose, I used data from the Geoapify Places API. The data returned by Geoapify is provided in GeoJSON format. In my tutorial, I demonstrate how to format this data, assign it to custom restaurant categories (pizza, burger, sandwich, seafood, asian, latin, and other), and visualize it on a map using Deck.gl technology.

The application includes:

• Data routing from Geoapify.
• Functions for transforming data and assigning it to categories.
• A React hook for creating superclusters, i.e. grouping data into clusters across different zoom levels.
• Data visualization using Deck.gl with IconLayer, TextLayer, and tooltips.

Setup

Clone the repository:

git clone https://github.com/Pyother/miami-food-map.git
cd miami-food-map

Install dependencies:

npm install

Create .env file with variables:

NEXT_PUBLIC_GEOAPIFY_API_KEY=your_api_key_here
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_MAP_STYLE=https:your_map_style_here

You can get your API key from: https://www.geoapify.com, and map style from https://stadiamaps.com/products/maps/map-styles (or any other map plaform).

Start the development server:

npm run dev

Then open: http://localhost:3000.