L.geoJSON. Enable Leaflet. Keep #map { height: 320px } in CSS.

Goal

Run every block and confirm the chart is visible.

<div id="map"></div>

#map { height: 320px; width: 100%; }

const map = L.map("map").setView([-1.29, 36.82], 6);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OSM" }).addTo(map);
L.geoJSON({ type: "Feature", geometry: { type: "Point", coordinates: [36.82, -1.29] }, properties: { name: "Nairobi" } }).bindPopup("Nairobi").addTo(map);
console.log("geojson");

<div id="map"></div>

const map = L.map("map").setView([-1.29, 36.82], 6);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OSM" }).addTo(map);
L.marker([-1.29, 36.82]).addTo(map);
console.log("marker");