MAJOR PROJECT

 POPUP IS ADDED TO THE MAP. const marker = new mapboxgl . Marker ({ color : "red" })   . setLngLat ( listing . geometry . coordinates )   . setPopup (     new mapboxgl . Popup ({ offset : 25 }). setHTML (       `<h5>Welcome to ${ listing . title } </h5> `     )   )   . addTo ( map );

 WE ADD A MARKER ON THE MAP BY THE FORMAT COPIED FROM THE DOC OF MAPBOX MAP.JS mapboxgl . accessToken = maptoken ; const map = new mapboxgl . Map ({   container : "map" ,   style : "mapbox://styles/mapbox/streets-v12" ,   zoom : 9 ,   center : listing . geometry . coordinates , }); const marker = new mapboxgl . Marker ({ color : "red" }). setLngLat ( listing . geometry . coordinates ). addTo ( map ); IN SHOW.EJS < script >   const maptoken = " <%= process . env . MAP_TOKEN %> " ;   const listing = <%- JSON . stringify ( listing )%>;   </ script >

 GeoJSON A STANDARD FORMAT FOR STORING GEOGRAPHIC POINTS. HERE,DATA IS STORED IN THE FORM OF A POINT , IN WHICH LONGITUDES COMES FIRST. THE FORMAT: { "type" : "Point" , "coordinates" : [ -122.5 , 37.7 ] } IN OUR MODELS( LISTING.JS ) WE UPDATE THE SCHEMA OF LISTINGS. WE ADD A NEW FIELD GEOMETRY ,SIMILAR TO THAT OF THE LOCATION FIELD IN THE DOCUMENT. const citySchema = new mongoose. Schema ({ name : String , location : { type : { type : String , // Don't do `{ location: { type: String } }` enum : [ 'Point' ], // 'location.type' must be 'Point' required : true }, coordinates : { type : [ Number ], required : true } } });   geometry : {     type : {       type : String , // Don't do `{ location: { type: String } }`       enum : [ "Point" ], // 'location.type' must be 'Point'       required : true ,     },     coordina...

 GEOCODING IS THE PROCESS OF CONVERTING ADDRESSES(LIKE A STREET ADDRESS) INTO GEOGRAPHIC CO-ORDINATES(LATITUDES & LONGITUDES) WHICH CAN BE USED TO PLACE MARKERS ON A MAP OR POSITION THE MAP. HERE,WE USE GEOCODING API OF MAPBOX. FORWARD GEOCODING : CONVERTS FROM ADDRESSES TO CO-ORDINATES BACKWARD GEOCODING : CONVERTS FROM CO-ORDINATES TO ADDRESSES. IN LISTING.JS FEW PARAMETERS ARE REQUIRED FROM GITHUB. const mbxGeocoding = require ( "@mapbox/mapbox-sdk/services/geocoding" ); const maptoken = process . env . MAP_TOKEN ; const geocodingClient = mbxGeocoding ({ accessToken : maptoken }); module . exports . postNewListing = async ( req , res , next ) => {   let response = await geocodingClient     . forwardGeocode ({       query : req . body . listing . location ,       limit : 2 ,     })     . send ();   console . log ( response . body . features [ 0 ]. geometry );

 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...

 BEFORE UPLOADING NEW IMAGE A PREVIEW OF OLD IMAGE IS DISPLAYED. IT HAS TO BE DISPLAYED IN A LOWER RESOLUTION. WE USE CLOUDINARY FEATURES.WE REPLACE THE ORIGINAL URL WITH A  UPDATED URL. SOME PARAMETERS ARE ADDED TO THE ORIGINAL URL IN CONTROLLER LISTING.JS IS UPDATED. module . exports . editListing = async ( req , res ) => {   let { id } = req . params ;   const listing = await Listing . findById ( id );   if ( ! listing ) {     req . flash ( "error" , "Listing requested doesn't exist!" );     res . redirect ( "/listings" );   }   let originalUrl = listing . image . url ;   originalUrl = originalUrl . replace ( "/upload" , "/upload/h_200,w_200" );   res . render ( "listings/edit.ejs" , { listing , originalUrl }); }; EDIT.EJS < div >         Original Image < br />         < img src = " <%= originalUrl %> " />       </ di...

 WE RE-EDIT THE EDIT FORM SO THAT WE CAN UPLOAD IMAGE FILES . IN EDIT .EJS THE IMAGE TYPE IS CHANGED TO FILE AND FORM IS UPDATED SO THAT IMAGE FILES CAN SEND THEM TO BACKEND. EDIT.EJS     < form       method = "POST"       action = "/listings/ <%= listing . _id %> ?_method=put"       novalidate       class = "needs-validation"       enctype = "multipart/form-data"     >           < div class = "mb-3" >         < label for = "image" class = "form-label" > Upload new Image </ label >         < input           name = "listing[image]"           type = "file"           class = "form-control"         />       </ div > IN THE UPDATE ROUTE,    . put (     isLog...