ADDING MAP FEATURE

 WE USE MAPBOX TO ADD THIS FEATURE THE ACCESS TOKEN(FROM DISCORD) TRIED USING LEAFLET THE FIRST STEP WAS SUCCESSFUL BUT DIDN'T KNOW HOW TO INITIALIZE THE SECOND ONE .

SCRIPT TAGS ARE ADDED (FROM DOCUMENTATION OF MAPBOX)

IN BOILERPLATE.EJS

INSIDE HEAD TAG

 <link

      href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css"

      rel="stylesheet"

    />

    <script src="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.js"></script>

  </head>

AS WE WANT THE MAP TO BE DISPLAYED ON SHOW PAGE WE ADD SOME TAGS

SHOW.EJS

<script>

  const maptoken="<%=process.env.MAP_TOKEN%>"

</script>

TO IMPORT THIS maptoken TO MAP.JS(PUBLIC/JS/MAP.JS)

    <div id="map"></div>

THIS TAG IS MUST TO ADD MAP.

<script src="/js/map.js"></script>

MAP.JS

mapboxgl.accessToken = maptoken;

const map = new mapboxgl.Map({

  container: "map",

  style: "mapbox://styles/mapbox/streets-v12",

  zoom: 9,

  center: [80.151443, 17.247253],

});

TO THE MAP TO GET DISPLAYED STYLING NEEDS TO BE ADDED.

/* MAP */

#map { height: 180px;

width: 100vh; }