currently the only way i can display my map is by adding a full html code and remove the
<x-layout>
</x-layout>
want to use splade blade format for the code not going back to full html
my html code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.text-center {
text-align: center;
}
#map {
width: 100%;
height: 600px;
}
</style>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/leaflet.css' crossorigin='' />
<script src='https://unpkg.com/[email protected]/dist/Control.Geocoder.js'></script>
<title></title>
</head>
<body>
<a href="/">
Home
</a>
<h1 class='text-center'>Cholera Concentration Map</h1>
<div id='map'></div>
<script src='https://unpkg.com/[email protected]/dist/leaflet.js' crossorigin=''></script>
<script>
let map, markers = [];
/* ----------------------------- Initialize Map ----------------------------- */
function initMap() {
map = L.map('map', {
center: {
lat: -19.0154,
lng: 29.1549,
},
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
map.on('click', mapClicked);
initMarkers();
}
initMap();
/* --------------------------- Initialize Markers --------------------------- */
function initMarkers() {
const initialMarkers = <?php echo json_encode($initialMarkers); ?>;
for (let index = 0; index < initialMarkers.length; index++) {
const data = initialMarkers[index];
const marker = generateMarker(data, index);
marker.addTo(map).bindPopup(`<b>${data.position.lat}, ${data.position.lng}</b>`);
map.panTo(data.position);
markers.push(marker)
}
}
function generateMarker(data, index) {
return L.marker(data.position, {
draggable: data.draggable
})
.on('click', (event) => markerClicked(event, index))
.on('dragend', (event) => markerDragEnd(event, index));
}
/* ------------------------- Handle Map Click Event ------------------------- */
function mapClicked($event) {
console.log(map);
console.log($event.latlng.lat, $event.latlng.lng);
}
/* ------------------------ Handle Marker Click Event ----------------------- */
function markerClicked($event, index) {
console.log(map);
console.log($event.latlng.lat, $event.latlng.lng);
}
/* ----------------------- Handle Marker DragEnd Event ---------------------- */
function markerDragEnd($event, index) {
console.log(map);
console.log($event.target.getLatLng());
}
</script>
</body>
</html>
want to know how i can use scripts inside the x-layout blade layout in splade i tried using x-scripts from the documentation but this did not work