Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-04-14-1

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-14 03:03:35 +03:00
parent b36e197e09
commit 581eda1ea8
15 changed files with 102069 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/map-demo.html
+25 -2
View File
@@ -294,6 +294,11 @@
<input type="checkbox" id="toggle-pois" checked onchange="updateLayers()" style="accent-color: var(--primary); width: 16px; height: 16px;">
<span>عرض المعالم / Show POIs</span>
</label>
<label style="display: flex; align-items: center; gap: 10px; margin-top: 12px; cursor: pointer; font-size: 13px;">
<input type="checkbox" id="toggle-arrows" checked onchange="updateLayers()" style="accent-color: var(--primary); width: 16px; height: 16px;">
<span>اتجاهات الشوارع / Street Directions</span>
</label>
</div>
<!-- DB NAMES INDICATOR -->
@@ -672,9 +677,15 @@
function updateLayers() {
const show3D = document.getElementById('toggle-3d').checked;
const showPOIs = document.getElementById('toggle-pois').checked;
const showArrows = document.getElementById('toggle-arrows').checked;
if (map.getLayer('3d-buildings')) {
map.setLayoutProperty('3d-buildings', 'visibility', show3D ? 'visible' : 'none');
// Toggle 3D Overture buildings
if (map.getLayer('building-3d')) {
map.setLayoutProperty('building-3d', 'visibility', show3D ? 'visible' : 'none');
}
// Show flat footprints when 3D is off
if (map.getLayer('overture-building-footprint')) {
map.setLayoutProperty('overture-building-footprint', 'visibility', show3D ? 'none' : 'visible');
}
if (map.getLayer('intaleq-db-label')) {
@@ -685,6 +696,18 @@
if (map.getLayer('intaleq_pois')) {
map.setLayoutProperty('intaleq_pois', 'visibility', showPOIs ? 'visible' : 'none');
}
// Toggle places label layers + Overture name layers
['places-syria-labels', 'places-jordan-labels', 'places-egypt-labels', 'overture-building-names', 'overture-street-names'].forEach(id => {
if (map.getLayer(id)) {
map.setLayoutProperty(id, 'visibility', showPOIs ? 'visible' : 'none');
}
});
// Toggle street direction arrows
if (map.getLayer('road-direction-arrows')) {
map.setLayoutProperty('road-direction-arrows', 'visibility', showArrows ? 'visible' : 'none');
}
}
</script>
</body>
apps/web/public/style-mobile.json
+16 -66
View File
@@ -42,6 +42,16 @@
"https://tiles.intaleqapp.com/places_egypt/{z}/{x}/{y}"
],
"maxzoom": 14
},
"overture_buildings": {
"type": "vector",
"tiles": ["https://tiles.intaleqapp.com/overture_building/{z}/{x}/{y}"],
"maxzoom": 14
},
"overture_segments": {
"type": "vector",
"tiles": ["https://tiles.intaleqapp.com/overture_segment/{z}/{x}/{y}"],
"maxzoom": 14
}
},
"layers": [
@@ -909,78 +919,18 @@
{
"id": "building-3d",
"type": "fill-extrusion",
"source": "local-osm-polygons",
"source-layer": "planet_osm_polygon",
"source": "overture_buildings",
"source-layer": "overture_building",
"minzoom": 15,
"filter": [
"has",
"building"
],
"paint": {
"fill-extrusion-color": [
"match",
[
"get",
"building"
],
"commercial",
"#E0D8CC",
"retail",
"#E8DDD0",
"industrial",
"#D8DDE4",
"church",
"#E4DCF0",
"mosque",
"#D4EAD8",
"hospital",
"#F0E0E0",
"school",
"#E8ECD4",
"university",
"#E4E8D4",
"hotel",
"#E0E4EE",
"apartments",
"#E8E4DC",
"#E4DFDA"
],
"fill-extrusion-color": "#DDD8D0",
"fill-extrusion-height": [
"coalesce",
[
"to-number",
[
"get",
"height"
],
0
],
[
"*",
[
"to-number",
[
"get",
"building:levels"
],
3
],
3.5
],
["to-number", ["get", "height"], 0],
["*", ["coalesce", ["to-number", ["get", "num_floors"], null], 3], 3.5],
12
],
"fill-extrusion-base": [
"coalesce",
[
"to-number",
[
"get",
"min_height"
],
0
],
0
],
"fill-extrusion-base": 0,
"fill-extrusion-opacity": 0.85,
"fill-extrusion-vertical-gradient": true
}
apps/web/public/style.json
+86 -164
View File
@@ -919,6 +919,35 @@
]
}
},
{
"id": "road-direction-arrows",
"type": "symbol",
"source": "local-osm-lines",
"source-layer": "planet_osm_line",
"minzoom": 15,
"filter": [
"all",
["in", "highway", "motorway", "trunk", "primary", "secondary", "tertiary", "residential", "unclassified", "living_street"],
["==", "oneway", "yes"]
],
"layout": {
"symbol-placement": "line",
"symbol-spacing": 80,
"text-field": "▸",
"text-font": ["Noto Sans Regular"],
"text-size": ["interpolate", ["linear"], ["zoom"], 15, 12, 18, 18],
"text-keep-upright": false,
"text-rotation-alignment": "map",
"text-allow-overlap": true,
"text-ignore-placement": true,
"text-padding": 0
},
"paint": {
"text-color": ["interpolate", ["linear"], ["zoom"], 15, "rgba(100,116,139,0.4)", 18, "rgba(100,116,139,0.7)"],
"text-halo-color": "rgba(255,255,255,0.3)",
"text-halo-width": 0.5
}
},
{
"id": "building-fill-flat",
"type": "fill",
@@ -938,120 +967,43 @@
{
"id": "building-3d",
"type": "fill-extrusion",
"source": "local-osm-polygons",
"source-layer": "planet_osm_polygon",
"source": "overture_buildings",
"source-layer": "overture_building",
"minzoom": 14,
"layout": {
"visibility": "none"
"visibility": "visible"
},
"filter": [
"has",
"building"
],
"paint": {
"fill-extrusion-color": [
"match",
[
"get",
"building"
],
"commercial",
"#DDD5C5",
"retail",
"#E5D8C8",
"industrial",
"#D2D8E0",
"church",
"#DDD4EE",
"mosque",
"#CCE4D0",
"hospital",
"#EDD8D8",
"school",
"#E0E6CC",
"university",
"#D8E0C8",
"hotel",
"#D8DCF0",
"apartments",
"#E0DCD4",
"#DDD8D2"
],
"fill-extrusion-color": "#DDD8D0",
"fill-extrusion-height": [
"interpolate",
[
"linear"
],
[
"zoom"
],
["linear"],
["zoom"],
14,
[
"*",
[
"coalesce",
[
"to-number",
[
"get",
"building:levels"
],
null
],
3
],
["coalesce", ["to-number", ["get", "num_floors"], null], 3],
2.5
],
17,
[
"coalesce",
[
"to-number",
[
"get",
"height"
],
null
],
["to-number", ["get", "height"], null],
[
"*",
[
"to-number",
[
"get",
"building:levels"
],
3
],
["coalesce", ["to-number", ["get", "num_floors"], null], 3],
3.5
],
12
]
],
"fill-extrusion-base": [
"coalesce",
[
"to-number",
[
"get",
"min_height"
],
null
],
0
],
"fill-extrusion-base": 0,
"fill-extrusion-opacity": [
"interpolate",
[
"linear"
],
[
"zoom"
],
14,
0.6,
16,
0.88
["linear"],
["zoom"],
14, 0.55,
16, 0.85
],
"fill-extrusion-vertical-gradient": true
}
@@ -1222,33 +1174,28 @@
"unclassified",
"living_street"
],
"minzoom": 16,
"minzoom": 15,
"layout": {
"text-field": [
"coalesce",
[
"get",
"name:ar"
],
[
"get",
"name"
],
["get", "name:ar"],
["get", "name"],
""
],
"text-font": [
"Noto Sans Regular"
],
"text-size": 11,
"text-font": ["Noto Sans Regular"],
"text-size": ["interpolate", ["linear"], ["zoom"], 15, 10, 18, 13],
"symbol-placement": "line",
"text-letter-spacing": 0.04,
"text-padding": 4,
"text-allow-overlap": false
"text-letter-spacing": 0.05,
"text-padding": 15,
"symbol-spacing": 300,
"text-max-angle": 30,
"text-allow-overlap": false,
"text-ignore-placement": false
},
"paint": {
"text-color": "#4A5568",
"text-halo-color": "rgba(255,255,255,0.85)",
"text-halo-width": 1.5
"text-halo-color": "rgba(255,255,255,0.92)",
"text-halo-width": 1.8
}
},
{
@@ -1265,45 +1212,28 @@
"motorway",
"trunk"
],
"minzoom": 13,
"minzoom": 12,
"layout": {
"text-field": [
"coalesce",
[
"get",
"name:ar"
],
[
"get",
"name"
],
["get", "name:ar"],
["get", "name"],
""
],
"text-font": [
"Noto Sans Regular"
],
"text-size": [
"interpolate",
[
"linear"
],
[
"zoom"
],
13,
11,
16,
14
],
"text-font": ["Noto Sans Bold"],
"text-size": ["interpolate", ["linear"], ["zoom"], 12, 10, 14, 13, 18, 16],
"symbol-placement": "line",
"text-letter-spacing": 0.05,
"text-padding": 5,
"text-allow-overlap": false
"text-letter-spacing": 0.06,
"text-padding": 20,
"symbol-spacing": 350,
"text-max-angle": 25,
"text-allow-overlap": false,
"text-ignore-placement": false
},
"paint": {
"text-color": "#2D3748",
"text-halo-color": "rgba(255,255,255,0.9)",
"text-halo-width": 2
"text-color": "#1A2332",
"text-halo-color": "rgba(255,255,255,0.95)",
"text-halo-width": 2.5
}
},
{
@@ -1929,14 +1859,11 @@
"type": "fill",
"source": "overture_buildings",
"source-layer": "overture_building",
"minzoom": 14,
"layout": {
"visibility": "visible"
},
"maxzoom": 14,
"paint": {
"fill-color": "#dcd8d0",
"fill-opacity": 0.8,
"fill-outline-color": "#c4beb4"
"fill-color": "#DDD8D0",
"fill-opacity": 0.85,
"fill-outline-color": "#C4BEB4"
}
},
{
@@ -1978,31 +1905,26 @@
"source": "overture_segments",
"source-layer": "overture_segment",
"minzoom": 14,
"filter": ["has", "names"],
"layout": {
"text-field": [
"coalesce",
[
"get",
"names"
],
""
],
"text-font": [
"Noto Sans Regular"
],
"text-size": 11,
"text-field": ["coalesce", ["get", "names"], ""],
"text-font": ["Noto Sans Regular"],
"text-size": ["interpolate", ["linear"], ["zoom"], 14, 9, 16, 12, 18, 14],
"symbol-placement": "line",
"text-padding": 10,
"text-rotation-alignment": "map",
"text-pitch-alignment": "viewport",
"text-keep-upright": true,
"text-padding": 20,
"text-letter-spacing": 0.04,
"text-max-angle": 30,
"symbol-spacing": 250,
"symbol-spacing": 300,
"text-allow-overlap": false,
"text-ignore-placement": false
},
"paint": {
"text-color": "#666",
"text-halo-color": "rgba(255, 255, 255, 0.9)",
"text-halo-width": 2
"text-color": "#4A5568",
"text-halo-color": "rgba(255, 255, 255, 0.95)",
"text-halo-width": 2.2
}
}
]
apps/web/src/components/MapComponent.tsx
+19 -11
View File
@@ -21,13 +21,17 @@ const MapComponent: React.FC<MapComponentProps> = ({
useEffect(() => {
if (!map.current) return;
// Toggle 3D Buildings
// Toggle 3D Buildings (now on Overture source)
if (map.current.getLayer('building-3d')) {
map.current.setLayoutProperty('building-3d', 'visibility', show3D ? 'visible' : 'none');
}
// Toggle flat Overture footprint (show when 3D is off)
if (map.current.getLayer('overture-building-footprint')) {
map.current.setLayoutProperty('overture-building-footprint', 'visibility', show3D ? 'none' : 'visible');
}
// Toggle POI Layers
const poiLayers = ['poi-icons', 'place-labels'];
const poiLayers = ['poi-icons', 'place-labels', 'overture-building-names'];
poiLayers.forEach(layerId => {
if (map.current!.getLayer(layerId)) {
map.current!.setLayoutProperty(layerId, 'visibility', showPOIs ? 'visible' : 'none');
@@ -389,7 +393,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
return (
<div ref={mapContainer} style={{ width: '100%', height: '100%', position: 'relative' }}>
{/* Intaleq Branding Watermark */}
{/* Intaleq Premium Branding Watermark */}
<div
style={{
position: 'absolute',
@@ -398,25 +402,29 @@ const MapComponent: React.FC<MapComponentProps> = ({
zIndex: 10,
display: 'flex',
alignItems: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.7)',
padding: '4px 8px',
borderRadius: '4px',
background: 'rgba(255, 255, 255, 0.85)',
backdropFilter: 'blur(12px) saturate(180%)',
WebkitBackdropFilter: 'blur(12px) saturate(180%)',
padding: '6px 12px',
borderRadius: '10px',
pointerEvents: 'none',
userSelect: 'none',
gap: '6px'
gap: '8px',
boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
border: '1px solid rgba(255,255,255,0.35)'
}}
>
<img
src="/intaleq-logo.png"
alt="Intaleq"
style={{ height: '16px', filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.1))' }}
style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }}
/>
<span
style={{
fontSize: '10px',
fontWeight: 600,
color: '#3c4043',
letterSpacing: '0.02em',
fontWeight: 800,
color: '#c0a048',
letterSpacing: '0.8px',
textTransform: 'uppercase'
}}
>