[FEAT] Added Map to "View Location" on Trekking Page

[IkkiOcean]

Overview

This PR introduces a Map component to the trekking page of the Uttarakhand website. The modal allows users to view the location of trekking destinations on a Mapbox map, enhancing user experience by providing an interactive geographical context.

Changes Made

• Added MapModal Component: Created a new MapModal.js component that displays a Mapbox map centered on the specified location of the trekking site.
• Map Modal CSS: Implemented CSS styles in MapModal.module.css to ensure the map occupies the full modal space and maintains responsiveness.
• Updated TrekCard Component: Integrated the MapModal in the TrekCard component, enabling users to open the modal and view the location associated with each trek.
• Map Configuration: Configured Mapbox with appropriate access token and map settings, including zoom level and location markers.

Implementation Details

• The modal opens when the "VIEW LOCATION" button is clicked within trekking page
• The map is centered on the location of start of trek , ensuring accurate representation.
• The modal includes a close button to exit the map view easily.

Screenshots

map.mp4

Related Issues

• Closes Implement "View Location" Modal with Map on Trekking Page #169

Additional Notes

• Make sure to set the environment variable NEXT_PUBLIC_MAPBOX_TOKEN with your Mapbox access token for the map to function correctly.
• This enhancement aims to improve user interaction and accessibility to trekking locations in Uttarakhand.

[vercel]

@IkkiOcean is attempting to deploy a commit to the ajaynegi45's projects Team on Vercel.

A member of the Team first needs to authorize it.

[IkkiOcean]

@ajaynegi45

• My Issue was about adding map to the view location button on trekking page. I have added coordinates of starting of trek to the map so that it helps the viewers.

• If there are any other things which you want me to add to the website, do tell me as I can raise new issues for them.

happy to contribute :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
uttarakhand-culture	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2024 4:03am

[ajaynegi45]

Hi @IkkiOcean,

Thank you for your prompt work on this issue. I appreciate your dedication to the project.

I have reviewed your work, and I need some changes.

• How to generate NEXT_PUBLIC_MAPBOX_TOKEN
• Add googlemap and applemap button above close button. So that when user click on it, It will open and show fastest route from there location.

Once again, thank you for your contribution! ❤️

[IkkiOcean]

Hi @IkkiOcean,

Thank you for your prompt work on this issue. I appreciate your dedication to the project.

I have reviewed your work, and I need some changes.

• How to generate NEXT_PUBLIC_MAPBOX_TOKEN
• Add googlemap and applemap button above close button. So that when user click on it, It will open and show fastest route from there location.

Once again, thank you for your contribution! ❤️

okay. I will make the changes right away in this same pr

[IkkiOcean]

@ajaynegi45

maops.mp4

How to make Mapbox token:

To generate a Mapbox token, follow these steps:

1. Sign Up / Log In:

   • Go to Mapbox and sign up for an account or log in if you already have one.

2. Navigate to Tokens:

   • Once logged in, go to your Account Tokens page.

3. Create a New Token:

   • Click on Create a token.
   • You can customize the token permissions, such as restricting access to specific Mapbox APIs or setting a domain restriction to limit where the token can be used.

4. Name the Token:

   • Give your token a meaningful name, especially if you plan to use multiple tokens for different applications or environments.

5. Generate the Token:

   • After configuring, click Create token. Your token will appear on the page.

6. Copy and Use the Token:

   • Copy the token and add it to your environment variables in your project, such as in a .env file:

     NEXT_PUBLIC_MAPBOX_TOKEN=your_generated_token_here

7. Restart the Development Server:

   • If you added the token to .env, restart your server to load the new environment variable.

Your Mapbox token should now be active and ready to use in your application.

[ajaynegi45]

@ajaynegi45

maops.mp4
How to make Mapbox token:

To generate a Mapbox token, follow these steps:

1. Sign Up / Log In:

   • Go to Mapbox and sign up for an account or log in if you already have one.

2. Navigate to Tokens:

   • Once logged in, go to your Account Tokens page.

3. Create a New Token:

   • Click on Create a token.
   • You can customize the token permissions, such as restricting access to specific Mapbox APIs or setting a domain restriction to limit where the token can be used.

4. Name the Token:

   • Give your token a meaningful name, especially if you plan to use multiple tokens for different applications or environments.

5. Generate the Token:

   • After configuring, click Create token. Your token will appear on the page.

6. Copy and Use the Token:

   • Copy the token and add it to your environment variables in your project, such as in a .env file:

     NEXT_PUBLIC_MAPBOX_TOKEN=your_generated_token_here

7. Restart the Development Server:

   • If you added the token to .env, restart your server to load the new environment variable.

Your Mapbox token should now be active and ready to use in your application.

In mapbox it is asking for credit card

[ajaynegi45]

@ajaynegi45

maops.mp4
How to make Mapbox token:

To generate a Mapbox token, follow these steps:

1. Sign Up / Log In:

   • Go to Mapbox and sign up for an account or log in if you already have one.

2. Navigate to Tokens:

   • Once logged in, go to your Account Tokens page.

3. Create a New Token:

   • Click on Create a token.
   • You can customize the token permissions, such as restricting access to specific Mapbox APIs or setting a domain restriction to limit where the token can be used.

4. Name the Token:

   • Give your token a meaningful name, especially if you plan to use multiple tokens for different applications or environments.

5. Generate the Token:

   • After configuring, click Create token. Your token will appear on the page.

6. Copy and Use the Token:

   • Copy the token and add it to your environment variables in your project, such as in a .env file:

     NEXT_PUBLIC_MAPBOX_TOKEN=your_generated_token_here

7. Restart the Development Server:

   • If you added the token to .env, restart your server to load the new environment variable.

Your Mapbox token should now be active and ready to use in your application.

Create button like close.

[IkkiOcean]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public.
ans wht do you mean by close button. its already there

[ajaynegi45]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Share it on LinkedIn

[ajaynegi45]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Means UI part like close button

[IkkiOcean]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Share it on LinkedIn

sure. accept my request there.

[ajaynegi45]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Something Like this with logo of each map

[IkkiOcean]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Something Like this with logo of each map

oh okay

[ajaynegi45]

@ajaynegi45 yeah most of map services require that for verification. I can send you mine but please keep it hidden as it might exceed the free quota if launched public. ans wht do you mean by close button. its already there

Something Like this with logo of each map

oh okay

Logo like this

[IkkiOcean]

@ajaynegi45 done

accept my LinkedIn request, as I cant message you rn.

[ajaynegi45]

@ajaynegi45 done
accept my LinkedIn request, as I cant message you rn.

Accepted

[ajaynegi45]

Hi @IkkiOcean,

Thank you for your prompt work on this issue. I appreciate your dedication to the project.

I have reviewed your work, and I need some changes.

• Not Responsive for mobile devices. Make it responsvie for 320px mobile also.

  

• When you implement this mentioned Featured Added Filtering Functionality and new locations to Trekking page #225 (review)

Once again, thank you for your contribution! ❤️

[IkkiOcean]

@ajaynegi45 made it mobile responsive please check and merge. I am going to raise a new issue for adding more content so please mention the list of new content you want.

WhatsApp.Video.2024-10-31.at.05.43.43.mp4

[ajaynegi45]

@ajaynegi45 made it mobile responsive please check and merge. I am going to raise a new issue for adding more content so please mention the list of new content you want.

WhatsApp.Video.2024-10-31.at.05.43.43.mp4

I think the located location are not correct in map

[IkkiOcean]

@ajaynegi45 made it mobile responsive please check and merge. I am going to raise a new issue for adding more content so please mention the list of new content you want.
WhatsApp.Video.2024-10-31.at.05.43.43.mp4

I think the located location are not correct in map

they are starting location of the trek gathered from google