Skip to content

Airbnb clone with Calendar to pick date range and displaying Map using Mapbox and data coming from Contentful CMS.

Notifications You must be signed in to change notification settings

raunak96/airbnb-clone

Repository files navigation

wakatime

Airbnb Clone with NextJS + Map (with react-map-gl - Mapbox) + Date Picker + Tailwind CSS + Contentful CMS

App Demo

Selecting Date Range in Calender

Displaying Coordinates of a number of places together in Map

  • For displaying map, we use react-map-gl pkg which is a react friendly API wrapper around MapboxGL JS.
  • Since, this Map component, can take in only 1 lat and lng but we had an array of lat and lng, to solve this problem, we use geolib pkg's getCenter function, which takes an array of lat and lng and returns a single lat and lng representing the center of the given array of lat and lng.
  • Finally we pass, this centered coordinate, which ensures our map is centered around all the coordinates.

About

Airbnb clone with Calendar to pick date range and displaying Map using Mapbox and data coming from Contentful CMS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published