Skip to content

Commit

Permalink
Merge pull request #225 from wmo-raf/basemap
Browse files Browse the repository at this point in the history 
Add basemap toggle to home page map
  • Loading branch information
@Grace-Amondi
Grace-Amondi authored Jun 4, 2024
2 parents db65755 + 7ec5905 commit 46efb20
Show file tree
Hide file tree
Showing 7 changed files with 93 additions and 27 deletions.
21 changes: 18 additions & 3 deletions pages/home/static/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,33 +392,48 @@
.map-legend {
display: flex;
padding: 4px 8px;
align-items: center;
align-items: flex-start;
background-color: #fff;
font-size: 14px;
flex-wrap: wrap;
position: absolute;
bottom: 0;
z-index: 99;
flex-direction: column;
}

.legend-items {
display: flex;
align-items: center;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: column;
}


.legend-item {
display: flex;
align-items: center;
margin-left: 10px;
}

.map-legend .legend-items .legend-item .legend-color {
margin-right: 4px;
height: 12px;
width: 12px;
border:#d4dadc solid 1px;

}

.map-ctrl-icon {
display: block;
width: 24px;
height: 24px;
margin: 5px;
background-size: cover;
border:1px solid #646464;

}



.mapviewer-explore {
display: flex;
Expand Down
Binary file added pages/home/static/img/dark-basemap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pages/home/static/img/light-basemap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pages/home/static/img/voyager-basemap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pages/home/static/img/wikimedia-basemap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 64 additions & 22 deletions pages/home/static/js/weather_watch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ $((async function () {
'tiles': [
"https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
]
}
},
},
'layers': [{
'id': 'carto-light-layer',
Expand Down Expand Up @@ -72,6 +72,46 @@ $((async function () {
scrollZoom: false,
});

const basemaps = {
'carto-light': 'carto-light-layer',
'carto-dark': 'carto-dark-layer',
'voyager': 'voyager-layer',
'wikimedia': 'wikimedia-layer'
};

Object.keys(basemaps).forEach(basemap => {

document.getElementById(basemap).addEventListener('click', () => {
setBasemap(map,basemap);
});
})

function setBasemap(map,style) {
Object.keys(basemaps).forEach(layer => {
if (map.getLayer(basemaps[layer])) {
map.removeLayer(basemaps[layer]);
map.removeSource(layer);
}
});

if(map.getSource(style)){
map.removeSource(style)
}

if(map.getLayer(basemaps[style])){
map.removeLayer(basemaps[style])
}
map.addSource(style, defaultStyle.sources[style]);

map.addLayer({
'id': basemaps[style],
'source': style,
'type': 'raster',
'minzoom': 0,
'maxzoom': 22
},map.getStyle().layers[0].id);
}


// Add zoom control to the map.
map.addControl(new maplibregl.NavigationControl({showCompass: false}));
Expand Down Expand Up @@ -152,27 +192,7 @@ $((async function () {
});
}

// add city forecast source
map.addSource("city-forecasts", {
type: "geojson",
cluster: true,
clusterMinPoints: 2,
clusterRadius: 25,
data: {type: "FeatureCollection", features: []}
})

// add city forecast layer
map.addLayer({
"id": "city-forecasts",
"type": "symbol",
"layout": {
'icon-image': ['get', 'condition'],
'icon-size': 0.3,
'icon-allow-overlap': true
},
source: "city-forecasts"
})


let zoomLocationsInit = false
const updateMapBounds = () => {
if (bounds) {
Expand Down Expand Up @@ -297,6 +317,28 @@ $((async function () {
updateMapBounds()
}

// add city forecast source
map.addSource("city-forecasts", {
type: "geojson",
cluster: true,
clusterMinPoints: 2,
clusterRadius: 25,
data: {type: "FeatureCollection", features: []}
})

// add city forecast layer
map.addLayer({
"id": "city-forecasts",
"type": "symbol",
"layout": {
'icon-image': ['get', 'condition'],
'icon-size': 0.3,
'icon-allow-overlap': true
},
source: "city-forecasts"
})



const getPopupHTML = (props) => {
const dataParams = forecastSettings?.parameters || []
Expand Down
13 changes: 11 additions & 2 deletions pages/home/templates/home/section/weather_watch_include.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ <h4>
</div>
</div>
</div>
<div id="alerts-legend" class="map-legend" style="position: absolute;bottom: 0;display: none">
<div> {% translate "Alert Severity:" %} </div>
<div id="alerts-legend" class="map-legend elevation-1 py-3 px-4" style="position: absolute;bottom: 5px;left:5px;display: none">
<div> <p class="has-text-weight-medium">{% translate "Alert Severity" %} </p></div>
<div class="legend-items">
<div class="legend-item">
<div class="legend-color" style="background-color: rgb(215, 47, 42);"></div>
Expand All @@ -58,6 +58,15 @@ <h4>
</div>
</div>
</div>

<div class="map-ctrl map-ctrl-group" style="position: absolute;top: 10em; right:0.5em; background: white; z-index:1;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);">
<button id="carto-light" class="map-ctrl-icon" title="Carto Light" style="background-image: url({% static '/img/light-basemap.png' %});"></button>
<button id="carto-dark" class="map-ctrl-icon" title="Carto Dark" style="background-image: url({% static '/img/dark-basemap.png' %});"></button>
<button id="voyager" class="map-ctrl-icon" title="Voyager" style="background-image: url({% static '/img/voyager-basemap.png' %});"></button>
<button id="wikimedia" class="map-ctrl-icon" title="Wikimedia" style="background-image: url({% static '/img/wikimedia-basemap.png' %});"></button>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 46efb20

Please sign in to comment.