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:
-
HTML Block: I defined the map container as follows:
<div id="map" style="height: 400px; width: 500px;"></div>
-
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 !