How do I create a custom Leaflet map component

Hello team,

I am trying to create a custom component for the marketplace that simply displays points on a leaflet map. I try to create a new component by converting a container into a new component. I then add a custom javascript in the logic that defines the leaflet map when the page is mounted. I set the style to a fixed height and width of 500 px. But when I test, nothing shows.

Has anyone tried this?

Below is the code:

const leafletCDN = ‘[email protected]/dist/leaflet.js‘;
const leafletCSS = ‘[email protected]/dist/leaflet.css‘;

// Load Leaflet CSS
const link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = leafletCSS;

// Inject custom CSS
const style = document.createElement(‘style’);
style.innerHTML = `
.leaflet-container {
width: 100%;
height: 500px;

// Load Leaflet JS
const script = document.createElement(‘script’);

script.onload = () => {
// Locate the map container within the custom component
const mapContainer = document.querySelector(‘[data-component-name=”LeafletMap”] > div’);

if (mapContainer) {
mapContainer.className = ‘leaflet-container’;
const latitude = 51.505; // Fixed latitude for testing
const longitude = -0.09; // Fixed longitude for testing
const zoom = 13; // Fixed zoom level for testing

const map =[latitude, longitude], zoom);

L.tileLayer(‘https://{s}{z}/{x}/{y}.png’, {
attribution: ‘© OpenStreetMap contributors’

Scroll to Top