CODEWITHSUNDEEP
javascriptnode.jsexpresspugmapbox-gl
xitij
xitij

Reputation: 35

Uncaught ReferenceError: mapboxgl is not defined

I am getting below(link) error message in console., I had spend hours try to fix this but won't be able to track this issue. Can someone help me to fix this? error image

I not able to display map on web page code is correct, but don't know what went wrong. It would be great if anyone can explain in details with code. So that i can keep in mind and use for future reference

Here is the code Main Code followed by Connected codes

//Pug Code
doctype html
html
  head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title Natours | #{title}

  body
    //HEADER
    include _header

    //CONTENT
    block content 
      h1 This is a placeholder heading

    //FOOTER
    include _footer

    script(src='/js/mapbox.js')

======================================================================================

Js code

/* eslint-disable */
const locations = JSON.parse(document.getElementById("map").dataset.locations);

mapboxgl.accessToken = 'xxxxxx';
var map = new mapboxgl.Map({
    container: 'map',
    style:'mapbox://styles/mapbox/streets-v11',,
});

=================================================================================

//To display the map on  website below code is related to above code(this '==========' is only to show separate code from different file) //

  section.section-map
    #map(data-locations=`${JSON.stringify(tour.locations)}`)

Upvotes: 0

Views: 1024

Answers (2)

beshoux
beshoux

Reputation: 1

For anyone coming in the future, the solution is to simply disable the content security policy in helmet

app.use(helmet({
  contentSecurityPolicy: false
}))

then make sure that the default style used is the same as the one in the documentation at first and not some things that you've copied online. So your mapbox.js should look like something like this:

mapboxgl.accessToken = 'YOUR_TOKEN'
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11'
});

Finally I removed the the script and css tags for the mapbox from the tour.pug, and added them in the base.pug with another meta tag

html
    head
        block head
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0')
            /* Add this */
            meta(http-equiv="Content-Security-Policy" content="script-src 'self' api.mapbox.com;worker-src blob: ;connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com")
            /* */
            link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
            link(rel='stylesheet' href='/css/style.css')
            link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
            /* Add these 2 here */       
            script(src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js')
            link(href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet') 
            /* */
            title Natours | #{title}

    body(data-alert=`${alert ? alert : ''}`)
  
        // HEADER
        include _header

        // CONTENT
        block content
          h1 This is a placeholder heading

        // FOOTER
        include _footer
        script(src='/js/mapbox.js')

Upvotes: 0

ChethiyaKD
ChethiyaKD

Reputation: 928

You've forgot to add their library.

 head 
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0' value="script-src 'self' api.mapbox.com")
      link(rel='stylesheet' href ='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
    
      //- add this line
      script(src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js')
    
      title Natours | #{title}

Upvotes: 1

Related Questions