array of cities. 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 cities = [{n:'Nairobi',lat:-1.29,lng:36.82,u:21},{n:'Mombasa',lat:-4.04,lng:39.67,u:15}];
const map = L.map('map').setView([-2.5, 38], 6);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OSM' }).addTo(map);
cities.forEach(c => L.circleMarker([c.lat,c.lng], { radius: c.u / 2 }).addTo(map).bindPopup(c.n));
console.log(cities.length);

<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");