<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([32.21586666666666, 34.99503333333333], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var geojson = {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [34.7818, 32.0853]}, "properties": {"city": "Tel Aviv", "population": 460000}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [35.2137, 31.7683]}, "properties": {"city": "Jerusalem", "population": 936000}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [34.9896, 32.794]}, "properties": {"city": "Haifa", "population": 285000}}]};
L.geoJSON(geojson, {
onEachFeature: function(feature, layer) {
if (feature.properties) {
var popup = Object.entries(feature.properties)
.map(([k,v]) => `<b>${k}</b>: ${v}`)
.join('<br>');
layer.bindPopup(popup);
}
}
}).addTo(map);
</script>
</body>
</html>
