admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

square representations of apartments

Browse Source
This commit is contained in:
admin
2025-07-30 08:55:50 -06:00
parent 3589c44d25
commit 2312d87b2d
3 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
map/app/public/js/external-layers.js
View File

@@ -126,14 +126,36 @@ async function loadEdmontonData(force = false) {
const geoJsonLayer = L.geoJSON(result.data, {
pointToLayer: (feature, latlng) => {
const isMultiUnit = feature.properties.isMultiUnit;
return L.circleMarker(latlng, {
radius: Math.max(3, Math.min(6, currentZoom - 10)),
fillColor: isMultiUnit ? "#ff6b35" : "#ba001e", // Orange for multi-unit buildings
color: "#ffffff",
weight: isMultiUnit ? 2 : 1,
opacity: 0.9,
fillOpacity: 0.7
});
if (isMultiUnit) {
// Use a custom HTML marker for multi-unit buildings (square)
const size = Math.max(12, Math.min(24, (currentZoom - 10) * 2));
const icon = L.divIcon({
className: 'multi-unit-marker',
html: `<div class="apartment-marker" style="
width: ${size}px;
height: ${size}px;
background-color: #ff6b35;
border: 2px solid #ffffff;
border-radius: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
"></div>`,
iconSize: [size, size],
iconAnchor: [size/2, size/2],
popupAnchor: [0, -size/2]
});
return L.marker(latlng, { icon: icon });
} else {
// Use circle marker for single units (round, red)
return L.circleMarker(latlng, {
radius: Math.max(3, Math.min(6, currentZoom - 10)),
fillColor: "#ba001e",
color: "#ffffff",
weight: 1,
opacity: 0.9,
fillOpacity: 0.7
});
}
},
onEachFeature: (feature, layer) => {
const props = feature.properties;