admin/freealberta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

square representations of apartments

Browse Source
This commit is contained in:
admin 2025-07-30 08:55:50 -06:00
parent 0d7bdf01e2
commit 7edc66565c
3 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
map/Instuctions.md
View File

@ -37,6 +37,11 @@ Welcome to the Map project! This application is a canvassing tool for political
## How to Add a Feature
**First look through the existing codebase to understand where similar logic is implemented.**
You can find a full listing of the files in the `files-explainer.md` file.
When adding a new feature, follow these steps:
1. **Plan:** Decide where your logic belongs (backend controller, frontend JS, etc).
2. **Backend:** Add/modify controllers, services, and routes as needed. Use NocoDB API via the service layer.
3. **Frontend:** Add/modify JS modules in `/public/js`. Update HTML/CSS as needed.

17
map/app/public/css/modules/apartment-marker.css
View File

@ -1,15 +1,22 @@
/* Custom styles for multi-unit (apartment) markers */
.multi-unit-marker {
border-radius: 0; /* Makes it square */
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
border: 2px solid white;
transition: transform 0.1s ease-in-out, width 0.1s ease-in-out, height 0.1s ease-in-out;
background: transparent !important;
border: none !important;
transition: transform 0.1s ease-in-out;
}
.apartment-marker {
width: 100%;
height: 100%;
border-radius: 0; /* Square shape */
border-radius: 0 !important; /* Square shape */
box-sizing: border-box;
cursor: pointer;
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
.apartment-marker:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
}
/* Style for when a marker is being moved */

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;