Mapbox clicking on Polygon doesn't produce pop-up box

Question

I've created a map in Mapbox studio to show English Counties. I would now like to add a pop-up box to display further information about the county when clicked. I've exported the html code, the mapbox map loads ok, but when I add the code to have the interactive pop up boxes, the map doesn't load. Maybe:

• the geojson file of the counties is too large to load?
• the geojson file of the counties is in the wrong co-orinate system?
• the path specified in the original index.html document to load the geojson file is wrong? I'm currently storing the Geojson file in my google drive folder, but could it be stored in the same folder as the index.html document?
• I'm using the wrong code to create a pop-up box?

map.on('load',function(){
    map.addlayer({
    'id':'District_borough_unitary_1',
    'type'='fill',
    'source':{
    'type':'geojson',
    'data':'https://drive.google.com/drive/folders/'

and also:

map.on('click','District_borough_unitary_1',function(e){
    new mapboxgl.popup()
    .setlnglat(e.lnglat)
    .sethtml(e.features[0].properties.label)
    .addto(map);

Any other elements of code I should be showing?

Answer 1

You will need to serve your data from a URL which can be accessed externally, such as GitHub Pages . Your request should look something like this, from the documentation .

var url = 'https://your-URL-which-serves-a-GeoJSON.com/';
map.on('load', function() {
    map.addSource('District_borough_unitary_1', { type: 'geojson', data: url});
    map.addLayer({
        'id': 'District_borough_unitary_1',
        'type': 'symbol',
        'source': 'District_borough_unitary_1',
        'layout': {
           'icon-image': 'rocket-15'
        }
    });
});