stavros-melidoniotis/functions.php

## functions.php
<?php

function enqueue_styles_and_scripts()
{
    wp_enqueue_script('leafletjs', get_template_directory_uri() . '/path/to/leaflet-example.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_and_scripts');

## header.php
<head>

// content before

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

// or if you've downloaded the leafletjs files

<link rel="stylesheet" href="<?= get_template_directory_uri() . '/path/to/leaflet.css' ?>" />
<script src="<?= get_template_directory_uri() . '/path/to/leaflet.js' ?>"></script>

// content after

</head>

## leaflet-example.js
// create the map element inside the div with id=map
const map = L.map('map', {
    center: [<map_lat>, <map_lng>],
    zoom: <map_zoom>,
})

// add the openstreetmap tileLayer
L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map)

// OPTIONAL: create a custom marker icon
const markerIcon = L.icon({
    iconUrl: 'path/to/custom_icon',
    iconSize: [40, 40],
})

// OPTIONAL: add the marker with custom icon to the map
L.marker([<marker_lat>, <marker_lng>], { icon: markerIcon }).addTo(map);
	<?php

	function enqueue_styles_and_scripts()
	{
	wp_enqueue_script('leafletjs', get_template_directory_uri() . '/path/to/leaflet-example.js', array(), '1.0.0', true);
	}
	add_action('wp_enqueue_scripts', 'enqueue_styles_and_scripts');
	// create the map element inside the div with id=map
	const map = L.map('map', {
	center: [<map_lat>, <map_lng>],
	zoom: <map_zoom>,
	})

	// add the openstreetmap tileLayer
	L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
	attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	}).addTo(map)

	// OPTIONAL: create a custom marker icon
	const markerIcon = L.icon({
	iconUrl: 'path/to/custom_icon',
	iconSize: [40, 40],
	})

	// OPTIONAL: add the marker with custom icon to the map
	L.marker([<marker_lat>, <marker_lng>], { icon: markerIcon }).addTo(map);