Issue Embedding Mapbox in ERPNext Custom HTML Block

ERPNext
,
1

Issue Embedding Mapbox in ERPNext Custom HTML Block

System Details:

  • Hosting: Frappe Cloud
  • Frappe Framework Version: v15.44.1
  • ERPNext Version: v15.38.1
  • Navigator: Google Chrome Version 129.0.6668.90 (on Windows 11)

Problem Summary:

I’m trying to embed a Mapbox map inside a Custom HTML block in ERPNext, but the library doesn’t seem to load, and the map is not displayed.

Steps I Followed:

  1. HTML Block: I defined the map container as follows:

    <div id="map" style="height: 400px; width: 500px;"></div>

  2. JavaScript Block: I’ve tried to load the Mapbox library and initialize the map in the JavaScript block:

    frappe.require("https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js", function() {
    mapboxgl.accessToken = '**my_token**';
    
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-74.5, 40],
        zoom: 9
    });
});

Issue:

Despite following this approach, the Mapbox script doesn’t load, and the map doesn’t display inside the #map container.

Expected Result:

To successfully load the Mapbox library and display the map at the specified coordinates.

Request:

Can you please guide me on the proper way to embed Mapbox in ERPNext or suggest adjustments to ensure the Mapbox JS library loads correctly?

Thank you !