|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> |
|
|
<title>Bản đồ Ranh giới Hành chính Việt Nam – Long Ngo, 2025</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script> |
|
|
<style> |
|
|
:root{ |
|
|
--brand-bg: #eef6fa; |
|
|
--brand-blue: #1790e0; |
|
|
--brand-blue-dark: #0c3a69; |
|
|
--brand-blue-light: #b3e5fc; |
|
|
--brand-yellow: #ffeb3b; |
|
|
--brand-white: #fff; |
|
|
--brand-table-border: #90caf9; |
|
|
} |
|
|
body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background:var(--brand-bg);color:#174067;min-height:100vh;} |
|
|
.header{ |
|
|
background: linear-gradient(90deg, #e3f2fd 0%, #b3e5fc 100%); |
|
|
padding: 1.1rem 2rem 1rem 2rem; |
|
|
border-bottom: 4px solid var(--brand-blue); |
|
|
box-shadow: 0 2px 16px rgba(23,144,224,.13); |
|
|
display: flex; align-items: center; gap: 16px; |
|
|
} |
|
|
.header h1{font-size:2.1rem;font-weight:bold;color:var(--brand-blue-dark);margin:0;letter-spacing:0.5px;flex:1;} |
|
|
.map-controls{ |
|
|
position:absolute;top:18px;left:18px;z-index:1000;display:flex;flex-direction:column;gap:13px |
|
|
} |
|
|
.map-controls .box{ |
|
|
background:var(--brand-white);padding:7px 14px 7px 13px;border-left:5px solid var(--brand-blue); |
|
|
border-radius:10px;box-shadow:0 2px 7px rgba(23,144,224,.09) |
|
|
} |
|
|
.switch{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--brand-blue-dark)} |
|
|
.switch .label{font-size:1.04rem} |
|
|
.switch input{display:none} |
|
|
.switch .slider{ |
|
|
width:47px;height:23px;border-radius:12px;background:var(--brand-blue-light);position:relative;cursor:pointer;transition:.3s} |
|
|
.switch .slider::before{ |
|
|
content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff; |
|
|
box-shadow:0 1px 5px rgba(23,144,224,.16);transition:.3s} |
|
|
.switch input:checked + .slider{background:var(--brand-blue)} |
|
|
.switch input:checked + .slider::before{transform:translateX(24px)} |
|
|
.basemap-select{margin-left:7px;font-size:1.03rem;border-radius:6px;padding:4px 8px;border:1.2px solid #b3e5fc;background:#fff;color:#1976d2;} |
|
|
.download-btn{ |
|
|
display:inline-block;padding:9px 15px;border-radius:8px;background:var(--brand-blue-dark); |
|
|
color:#fff;font-weight:600;text-decoration:none;box-shadow:0 2px 7px rgba(23,144,224,.12) |
|
|
} |
|
|
.download-btn:hover{background:var(--brand-blue)} |
|
|
.leaflet-popup-content-wrapper{ |
|
|
background:#fff;border:1.6px solid var(--brand-blue-dark);border-radius:10px; |
|
|
box-shadow:0 5px 18px rgba(23,144,224,.14) |
|
|
} |
|
|
.leaflet-popup-close-button{font-size:20px !important;padding:4px 7px;color:#1976d2} |
|
|
.leaflet-popup-content{padding:10px 15px !important;font-size:15px;line-height:1.47} |
|
|
.popup-title{margin:0 0 6px;font-weight:700;color:var(--brand-blue-dark)} |
|
|
.popup-row{display:flex;gap:8px;margin-bottom:5px} |
|
|
.popup-row .icon{width:22px;text-align:center} |
|
|
.province-label { |
|
|
font-size: 13px; |
|
|
font-weight: 700; |
|
|
color: var(--brand-blue-dark); |
|
|
background:rgba(255,255,255,0.88); |
|
|
padding:1px 6px 1px 6px; |
|
|
border-radius:8px; |
|
|
border:1.1px solid #1976d2; |
|
|
box-shadow: 0 0 3px #b3e5fc, 0 0 5px #fff; |
|
|
pointer-events: none; |
|
|
white-space: nowrap; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
.leaflet-tooltip.province-label { |
|
|
background: transparent; |
|
|
border: none; |
|
|
box-shadow: none; |
|
|
} |
|
|
.leaflet-tooltip.province-label::after { display: none; } |
|
|
.compare-bottom{ |
|
|
position:absolute;left:0;right:0;bottom:0;max-height:42%;overflow:auto; |
|
|
background:#fff;border-top:4px solid var(--brand-blue-dark); |
|
|
box-shadow:0 -7px 20px rgba(23,144,224,.13);padding:14px 15px 8px 15px; |
|
|
border-radius:13px 13px 0 0;z-index:900 |
|
|
} |
|
|
#comparePanel table,#comparePanel th,#comparePanel td{border:1.5px solid var(--brand-table-border)} |
|
|
#comparePanel th,#comparePanel td{padding:5px 9px;text-align:center} |
|
|
#comparePanel th{background:var(--brand-blue-light);font-size:1.01rem;} |
|
|
.compare-remove{cursor:pointer;color:#c00;font-weight:bold} |
|
|
.compare-remove:hover{text-decoration:underline} |
|
|
.leaflet-control-zoom{display:none !important} |
|
|
.footer { |
|
|
position: fixed; left:0; right:0; bottom:0; z-index: 99999; background:rgba(240,248,255,0.94); |
|
|
color:#0d47a1;font-size:14px;padding:3px 16px;text-align:right;box-shadow:0 -1.5px 10px #b3e5fc; |
|
|
letter-spacing:0.5px |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>Bản đồ Ranh giới Hành chính Việt Nam</h1> |
|
|
<select id="basemapSelect" class="basemap-select" title="Chọn nền bản đồ"> |
|
|
<option value="satellite">Vệ tinh</option> |
|
|
<option value="roadmap">Bản đồ đường</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="container"> |
|
|
<div id="map" style="height: 85vh;"></div> |
|
|
<div class="map-controls"> |
|
|
<div class="box"> |
|
|
<label class="switch"> |
|
|
<span class="label">Cũ</span> |
|
|
<input type="checkbox" id="switchBoundary"> |
|
|
<span class="slider"></span> |
|
|
<span class="label">Mới</span> |
|
|
</label> |
|
|
</div> |
|
|
<button id="toggleCompare" class="download-btn" style="margin-top:7px;"> |
|
|
Hiện So sánh |
|
|
</button> |
|
|
</div> |
|
|
<div id="comparePanel" class="compare-bottom" style="display:none"> |
|
|
<h3><i class="fas fa-balance-scale"></i> So sánh (0/5)</h3> |
|
|
<div id="compareTable" style="font-size:13px"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer">Nguồn: Long Ngo, 2025.</div> |
|
|
<script> |
|
|
const CONFIG = { |
|
|
old:"https://raw.githubusercontent.com/lqtue/LacaProvinceMap/main/old.geojson", |
|
|
new:"https://raw.githubusercontent.com/lqtue/LacaProvinceMap/main/new.geojson" |
|
|
}; |
|
|
let map, oldLayer, newLayer; |
|
|
let baseLayerSatellite, baseLayerRoad; |
|
|
const dataStore = {old:null,new:null}; |
|
|
let compareList=[]; |
|
|
|
|
|
const iconMap = { |
|
|
"Tỉnh thành mới": "📍", "Tỉnh thành cũ": "📍", "TT hành chính": "📍", |
|
|
"GRDP 2024 (tỷ VND)": "💰", "Thu ngân sách 2024 (tỷ VND)": "💰", |
|
|
"Diện tích (km2)": "🗺️", "Dân số": "👥", "ĐVHC cấp xã": "🏛️" |
|
|
}; |
|
|
const labelOverrides = { |
|
|
"Khánh Hoà": [12.248126980225129, 109.183807743233], |
|
|
"TP HCM": [10.801867540653552, 106.68102175169227], |
|
|
"TP. Hồ Chí Minh": [10.801867540653552, 106.68102175169227] |
|
|
}; |
|
|
const numFmt = v=>{ |
|
|
const s = String(v).replace(/,/g, '.').replace(/ /g, ''); |
|
|
const n = parseFloat(s); |
|
|
return isNaN(n) ? v : n.toLocaleString('vi-VN'); |
|
|
}; |
|
|
const ATTRS = ["Diện tích (km2)","Dân số","GRDP 2024 (tỷ VND)","Thu ngân sách 2024 (tỷ VND)","ĐVHC cấp xã"]; |
|
|
const numAttrs = ["Diện tích (km2)","Dân số","GRDP 2024 (tỷ VND)","Thu ngân sách 2024 (tỷ VND)"]; |
|
|
const palette = [ |
|
|
'#1565c0','#1976d2','#0277bd','#00838f','#0288d1','#00b8d4', |
|
|
'#00897b','#00695c','#039be5','#00acc1','#0097a7','#01579b', |
|
|
'#1e88e5','#29b6f6','#26c6da','#26a69a','#388e3c','#2e7d32', |
|
|
'#4caf50','#0288d1','#2b32b2','#134e5e','#56ab2f','#0f2027', |
|
|
'#43cea2','#185a9d','#283e51','#4776e6','#36d1c4','#159957' |
|
|
]; |
|
|
function getProvinceColour(name){ |
|
|
let hash = 0; |
|
|
for(let i=0;i<name.length;i++) hash = name.charCodeAt(i)+(hash<<5)-hash; |
|
|
const idx = Math.abs(hash) % palette.length; |
|
|
return palette[idx]; |
|
|
} |
|
|
function init(){ |
|
|
map = L.map('map',{zoomControl:false, attributionControl:false}).setView([16,108],6); |
|
|
baseLayerSatellite = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', |
|
|
{subdomains:['mt0','mt1','mt2','mt3'], attribution:'© Google Satellite'}); |
|
|
baseLayerRoad = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', |
|
|
{subdomains:['mt0','mt1','mt2','mt3'], attribution:'© Google Maps'}); |
|
|
baseLayerSatellite.addTo(map); |
|
|
|
|
|
L.control.attribution({prefix: ''}).addTo(map); |
|
|
map.attributionControl.setPrefix('© Google | Leaflet'); |
|
|
oldLayer=L.layerGroup().addTo(map); |
|
|
newLayer=L.layerGroup().addTo(map); |
|
|
|
|
|
fetch(CONFIG.old).then(r=>r.json()).then(gOld=>{ |
|
|
dataStore.old=gOld; drawLayer(gOld,'old'); |
|
|
}); |
|
|
fetch(CONFIG.new).then(r=>r.json()).then(gNew=>{ |
|
|
dataStore.new=gNew; drawLayer(gNew,'new'); |
|
|
if (gNew && gNew.features && gNew.features.length > 0) { |
|
|
map.fitBounds(L.geoJSON(gNew).getBounds()); |
|
|
} |
|
|
}); |
|
|
|
|
|
const sw=document.getElementById('switchBoundary'); |
|
|
sw.checked=true; map.removeLayer(oldLayer); |
|
|
sw.onchange=()=> { |
|
|
if (sw.checked) { |
|
|
map.removeLayer(oldLayer); map.addLayer(newLayer); |
|
|
} else { |
|
|
map.removeLayer(newLayer); map.addLayer(oldLayer); |
|
|
} |
|
|
updateLabels(); |
|
|
}; |
|
|
document.getElementById('basemapSelect').onchange = function() { |
|
|
if (this.value==="satellite") { |
|
|
map.removeLayer(baseLayerRoad); map.addLayer(baseLayerSatellite); |
|
|
} else { |
|
|
map.removeLayer(baseLayerSatellite); map.addLayer(baseLayerRoad); |
|
|
} |
|
|
}; |
|
|
} |
|
|
function drawLayer(gjson, type) { |
|
|
const layer = type === 'old' ? oldLayer : newLayer; |
|
|
layer.clearLayers(); |
|
|
L.geoJSON(gjson, { |
|
|
style: feature => { |
|
|
const provName = feature.properties["Tỉnh thành mới"] || feature.properties["Tỉnh thành cũ"]; |
|
|
return { |
|
|
color: '#ffeb3b', |
|
|
weight: 2.7, |
|
|
opacity: 1, |
|
|
fillColor: getProvinceColour(provName), |
|
|
fillOpacity: 0.73 |
|
|
}; |
|
|
}, |
|
|
onEachFeature: (f, ly) => { |
|
|
const p = f.properties; |
|
|
const title = (p["Tỉnh thành mới"] || p["Tỉnh thành cũ"]) || 'Thông tin'; |
|
|
let html = `<h4 class="popup-title">${title}</h4>`; |
|
|
[ |
|
|
"Tỉnh thành mới", "Tỉnh thành cũ", "TT hành chính", ...ATTRS |
|
|
].forEach(k => { |
|
|
if (p[k]) { |
|
|
const val = numAttrs.includes(k) ? numFmt(p[k]) : p[k]; |
|
|
html += `<div class="popup-row"><span class="icon">${iconMap[k] || ''}</span> |
|
|
<strong>${k}:</strong> <span>${val}</span></div>`; |
|
|
} |
|
|
}); |
|
|
const key = (type === 'old' ? 'old:' : 'new:') + title; |
|
|
html += `<button class="addCompare" data-key="${key}" data-type="${type}" |
|
|
style="margin-top:8px;padding:6px 10px;border:none;border-radius:6px; |
|
|
background:var(--brand-blue);color:#fff;cursor:pointer"> |
|
|
+ Thêm so sánh</button>`; |
|
|
ly.bindPopup(html); |
|
|
const labelText = type === 'old' |
|
|
? (p["Tỉnh thành cũ"] || p["Tỉnh thành mới"]) |
|
|
: (p["Tỉnh thành mới"] || p["Tỉnh thành cũ"]); |
|
|
let labelPosition = null; |
|
|
const featureGeometry = f.geometry; |
|
|
if (labelText && labelOverrides[labelText]) { |
|
|
labelPosition = labelOverrides[labelText]; |
|
|
} |
|
|
else if (labelText && featureGeometry) { |
|
|
let labelPolygonFeature = null; |
|
|
if (featureGeometry.type === 'Polygon') { |
|
|
labelPolygonFeature = turf.polygon(featureGeometry.coordinates); |
|
|
} else if (featureGeometry.type === 'MultiPolygon') { |
|
|
let largestArea = 0; |
|
|
featureGeometry.coordinates.forEach(polygonCoords => { |
|
|
const poly = turf.polygon(polygonCoords); |
|
|
const area = turf.area(poly); |
|
|
if (area > largestArea) { |
|
|
largestArea = area; |
|
|
labelPolygonFeature = poly; |
|
|
} |
|
|
}); |
|
|
} |
|
|
if (labelPolygonFeature) { |
|
|
try { |
|
|
const pointOnSurface = turf.pointOnFeature(labelPolygonFeature); |
|
|
if (pointOnSurface && pointOnSurface.geometry && pointOnSurface.geometry.coordinates) { |
|
|
labelPosition = [pointOnSurface.geometry.coordinates[1], pointOnSurface.geometry.coordinates[0]]; |
|
|
} |
|
|
} catch (e) { |
|
|
const bounds = ly.getBounds(); |
|
|
if (bounds.isValid()) { |
|
|
labelPosition = bounds.getCenter(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
const tooltipOptions = { |
|
|
permanent: true, |
|
|
direction: 'center', |
|
|
className: 'province-label', |
|
|
pane: 'tooltipPane' |
|
|
}; |
|
|
if (labelPosition) { |
|
|
const customTooltip = L.tooltip(tooltipOptions) |
|
|
.setLatLng(labelPosition) |
|
|
.setContent(labelText); |
|
|
ly.bindTooltip(customTooltip); |
|
|
} else if (labelText) { |
|
|
ly.bindTooltip(labelText, tooltipOptions); |
|
|
} |
|
|
ly.on('mouseover', e => e.target.setStyle({ fillOpacity: 0.88, weight: 3.3 })); |
|
|
ly.on('mouseout', e => e.target.setStyle({ fillOpacity: 0.73, weight: 2.7 })); |
|
|
} |
|
|
}).addTo(layer); |
|
|
} |
|
|
function updateCompare(){ |
|
|
const panel=document.getElementById('comparePanel'); |
|
|
const tgt=document.getElementById('compareTable'); |
|
|
if(!compareList.length){panel.style.display='none';return;} |
|
|
panel.style.display='block'; |
|
|
panel.querySelector('h3').innerHTML= |
|
|
`<i class="fas fa-balance-scale"></i> So sánh (${compareList.length}/5)`; |
|
|
let html='<table style="width:100%;border-collapse:collapse"><tr><th>Thuộc tính</th>'; |
|
|
compareList.forEach(c=>{ |
|
|
const nm=c.props["Tỉnh thành mới"]||c.props["Tỉnh thành cũ"]; |
|
|
html+=`<th>${nm}<br><span style="font-size:11px;color:#666">(${c.layer==='old'?'Cũ':'Mới'})</span> |
|
|
<span class="compare-remove" data-k="${c.key}">×</span></th>`; |
|
|
}); |
|
|
html+='</tr>'; |
|
|
ATTRS.forEach(a=>{ |
|
|
html+=`<tr><td><strong>${a}</strong></td>`; |
|
|
compareList.forEach(c=>{ |
|
|
let v=c.props[a]??'--'; |
|
|
if(numAttrs.includes(a)) v=numFmt(v); |
|
|
html+=`<td>${v}</td>`; |
|
|
}); |
|
|
html+='</tr>'; |
|
|
}); |
|
|
html+='</table>'; |
|
|
tgt.innerHTML=html; |
|
|
tgt.querySelectorAll('.compare-remove').forEach(x=>{ |
|
|
x.onclick=()=>{compareList=compareList.filter(c=>c.key!==x.dataset.k);updateCompare();}; |
|
|
}); |
|
|
} |
|
|
function attachCompare(){ |
|
|
map.on('popupopen',e=>{ |
|
|
const btn=e.popup._contentNode.querySelector('.addCompare'); |
|
|
if(!btn) return; |
|
|
btn.onclick=()=>{ |
|
|
const props=e.popup._source.feature.properties; |
|
|
const key=btn.dataset.key, layerType=btn.dataset.type; |
|
|
if(compareList.find(c=>c.key===key)) return; |
|
|
if(compareList.length>=5){alert('Tối đa 5 mục so sánh.');return;} |
|
|
compareList.push({key,props,layer:layerType}); |
|
|
updateCompare(); |
|
|
}; |
|
|
}); |
|
|
} |
|
|
function updateLabels() { |
|
|
const zoom = map.getZoom(); |
|
|
map.eachLayer(layer => { |
|
|
if (layer.getTooltip && layer.getTooltip()) { |
|
|
const tooltip = layer.getTooltip(); |
|
|
if (tooltip.options.className && tooltip.options.className.includes('province-label')) { |
|
|
const el = tooltip.getElement(); |
|
|
if (el) { |
|
|
if (zoom < 7) {el.style.display = 'none';} |
|
|
else {el.style.display = 'block'; el.style.fontSize = Math.min(Math.max(zoom * 1.5, 12), 22) + 'px';} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
document.addEventListener('DOMContentLoaded',()=>{ |
|
|
init(); attachCompare(); |
|
|
map && map.whenReady(() => { updateLabels(); }); |
|
|
map && map.on('zoomend', updateLabels); |
|
|
map && map.on('layeradd layerremove', updateLabels); |
|
|
const toggleBtn = document.getElementById('toggleCompare'); |
|
|
const comparePanel = document.getElementById('comparePanel'); |
|
|
toggleBtn.addEventListener('click', () => { |
|
|
const isHidden = comparePanel.style.display === 'none' || comparePanel.style.display === ''; |
|
|
if (isHidden) { |
|
|
comparePanel.style.display = 'block'; |
|
|
toggleBtn.innerHTML = '<i class="fas fa-eye-slash"></i> Ẩn So sánh'; |
|
|
} else { |
|
|
comparePanel.style.display = 'none'; |
|
|
toggleBtn.innerHTML = '<i class="fas fa-eye"></i> Hiện So sánh'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
