-1

I am doing everything as in the lesson explained, and typing exactly the same code. The lesson I am stuck on, is to use Mapbox package, to show the location of particular campground. So there is a file show.ejs, inside there are lines of codes:

 <script>
        const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
        const campground = '<%- JSON.stringify(campground) %>';
    </script>

And another file showPageMap.js, with lines of codes:

mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: campground.geometry.coordinates, // starting position [lng, lat]
    zoom: 8, // starting zoom
});

 new mapboxgl.Marker()
     .setLngLat(campground.geometry.coordinates)
     .addTo(map)

All this I have typed as per video by Colt, by him works everything, but I got this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'coordinates') at showPageMap.js:5:33

Please help somebody!

Tried to google, how can I fix it, but without any results!

edit:

here's how it looks on frontend:

<script>
const mapToken = 'TOKEN';
const campground = '{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]},"_id":"648c26c9e3f99b64ff16c197","title":"Oberglatt Camp","price":100,"description":"Gut gut gut","location":"Oberglatt, Switzerland","reviews":[],"images":[],"author":{"_id":"64835051f0aef1d3a60306ef","email":"tim@gmail.com","username":"tim","__v":0},"__v":0}';
</script>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Kirill
  • 21
  • 4

1 Answers1

0

The problem is with passing object to the template.

Try removing quotes from variable when passing it to the template:

const campground = <%- JSON.stringify(campground) %>;
traynor
  • 5,490
  • 3
  • 13
  • 23
  • I have already done this, but it’s not working! – Kirill Jun 19 '23 at 13:44
  • can you include server side code, where you send `campground` object to the view, does it have `geometry.coordinates` property – traynor Jun 19 '23 at 14:59
  • [Object: null prototype] { campground: [Object: null prototype] { title: 'Bloomfield', location: 'Bloomfield, New Jersey', price: '32', description: 'aaaaaaaaaaaaaaaaaaa' } } { title: 'Bloomfield', geometry: { type: 'Point', coordinates: [ -74.185423, 40.806767 ] }, price: 32, description: 'aaaaaaaaaaaaaaaaaaa', location: 'Bloomfield, New Jersey', reviews: [], _id: new ObjectId("64908488e503186b571e8af3"), images: [], author: new ObjectId("64835051f0aef1d3a60306ef"), __v: 0 } created a new camp, shows coordinates, but still same error – Kirill Jun 19 '23 at 17:04
  • <%- JSON.parse(JSON.stringify(campground)) %> didnt work! res.render('show', {campground: ""}); could u please tell, where should I type this, somewhere in the show.ejs or showPageMap.js or elsewhere? – Kirill Jun 19 '23 at 17:05
  • on the server/route, part of the code where you render `show.ejs`, you need to pass it that object.. not sure what you're showing, it looks like two objects, and first doesn't have `coordinates`.. you need to add more details, no point in guessing.. see: [Passing an object to client in node/express + ejs?](https://stackoverflow.com/questions/11151632/passing-an-object-to-client-in-node-express-ejs) – traynor Jun 19 '23 at 17:25
  • module.exports.showCampground = async (req, res,) => { const campground = await Campground.findById(req.params.id).populate({ path: 'reviews', populate: { path: 'author' } }).populate('author'); if (!campground) { req.flash('error', 'Cannot find that campground!'); return res.redirect('/campgrounds'); } res.render('campgrounds/show', { campground }); } That one? – Kirill Jun 19 '23 at 17:44
  • yes. looks good, try logging `campground.geometry`, make sure that property is present, and also you can try hardcoding the object: `res.render('campgrounds/show', {campground: {geometry: {type: 'Point', coordinates: [-74.185423, 40.806767] } } });` and see if it renders in the view, and if it does, then you got corrupted data.. that's all I can think off – traynor Jun 19 '23 at 18:19
  • res.render('campgrounds/show', { campground: { geometry: { type: 'Point', coordinates } } }); I hardcoded like this, and got this error: coordinates is not defined ReferenceError: coordinates is not defined at module.exports.showCampground – Kirill Jun 19 '23 at 19:28
  • well, you didn't include coordinates property, try _exactly_ like above: `res.render('campgrounds/show', {campground: {geometry: {type: 'Point', coordinates: [-74.185423, 40.806767] } } });`. also, it's more important to log `campground` when you get it from the database and make sure it has all the required properties, because above you showed two objects, one didn't have all the properties... – traynor Jun 19 '23 at 19:41
  • TypeError: C:\Users\jacks\Desktop\TestCamp\views\campgrounds\show.ejs:9 7| – Kirill Jun 19 '23 at 19:59
  • because you didn't hardcode `images` property.. remove that part of the code for now, the point is to make sure that the code you showed in you question works, so that you can debug further – traynor Jun 19 '23 at 20:04
  • So I have changed code a little bit: mapboxgl.accessToken = mapToken; const map = new mapboxgl.Map({ container: 'map', // container ID style: 'mapbox://styles/mapbox/streets-v12', // style URL center: campgroundGeo.coordinates, // starting position [lng, lat] <---- zoom: 3, // starting zoom }); new mapboxgl.Marker() .setLngLat(campgroundGeo.coordinates) <---- .addTo(map) – Kirill Jun 20 '23 at 12:20
  • This what I get, if console.log { geometry: { type: 'Point', coordinates: [ 8.520355, 47.476804 ] }, _id: new ObjectId("648c26c9e3f99b64ff16c197"), title: 'Oberglatt Camp', price: 100, description: 'Gut gut gut', location: 'Oberglatt, Switzerland', reviews: [], images: [], author: { _id: new ObjectId("64835051f0aef1d3a60306ef"), email: 'tim@gmail.com', username: 'tim', __v: 0 }, __v: 0 } – Kirill Jun 20 '23 at 12:21
  • And error Uncaught Error: `LngLatLike` argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ] at ru.convert (lng_lat.js:163:15) at on.setLngLat (marker.js:292:31) at showPageMap.js:10:6 – Kirill Jun 20 '23 at 12:21
  • it's `const campgroundGeo = <%- JSON.stringify(campground.geometry) %>` as already pointed out.. don't leave every debug attempt in the comments before you tried all the suggestions, and all the relevant information should be in your question – traynor Jun 20 '23 at 12:32
  • Ok, I am completely new here, i will do my best! could you help me with that error? – Kirill Jun 20 '23 at 13:23
  • const campgroundGeo = <%=JSON.stringify(campground.geometry.coordinates) %> that works for me, than just pass campgroundGeo to lnglat, thanks for support and your time! – Kirill Jun 21 '23 at 14:47
  • great. if the answer solves your problem, you can [accept it](https://stackoverflow.com/help/someone-answers) – traynor Jun 21 '23 at 15:09