Skip to content

Commit

Permalink
Merge pull request #98 from wmo-raf/climatology
Browse files Browse the repository at this point in the history 
City Climatology Fixes
  • Loading branch information
@erick-otenyo
erick-otenyo authored Apr 29, 2024
2 parents dab6197 + e6ad893 commit baa364b
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 70 deletions.
5 changes: 2 additions & 3 deletions pages/cityclimate/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,15 @@ class CityClimateDataPage(Page):

def get_context(self, request, *args, **kwargs):
context = super(CityClimateDataPage, self).get_context(request, *args, **kwargs)
cities = City.objects.all()
cities = City.objects.all().filter(datavalue__isnull=False).distinct()

abm_settings = AdminBoundarySettings.for_request(request)
abm_extents = abm_settings.combined_countries_bounds
boundary_tiles_url = get_full_url(request, abm_settings.boundary_tiles_url)

context.update({
"cities": cities,
"cities_with_data_ids": [str(city.pk) for city in cities],
"city_data_url": get_full_url(request, reverse("climate_data", args=(self.pk,))),
"parameters": self.parameters,
"months": MONTHS,
Expand All @@ -93,8 +94,6 @@ def parameters(self):
"chart_config": chart_config,
}

print(chart_config)

if param.units:
param_data.update({"units": param.units})

Expand Down
156 changes: 90 additions & 66 deletions pages/cityclimate/templates/cityclimate/city_climate_data_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
}

#climate-map {
height: 400px;
height: 300px;
width: 100%;
margin: auto
margin-top: 20px
}

</style>
Expand Down Expand Up @@ -97,17 +97,14 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>
</div>
</div>
</div>
<div id="climate-map" class="is-hidden-mobile"></div>
</div>
</div>

<div class="column is-8">
<div id="chart-container" class="elevation-1"
style="width:100%; height:400px;margin-top: 20px"></div>

<div id="climate-map"></div>

</div>

</div>

</section>
Expand Down Expand Up @@ -136,6 +133,8 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>
let countryBounds = {{ bounds|default_if_none:"[]"|safe }};
const boundaryTilesUrl = "{{ boundary_tiles_url|default_if_none:'' }}";

const citiesWithDataIds = {{ cities_with_data_ids|default_if_none:"[]"|safe }};

if (countryBounds.length === 0) {
countryBounds = null;
}
Expand Down Expand Up @@ -168,16 +167,77 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>
updateChart()
})

let mapReady = false

// default MapLibre style
const defaultStyle = {
'version': 8,
'sources': {
'carto-dark': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png"
]
},
'carto-light': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
]
},
'wikimedia': {
'type': 'raster',
'tiles': [
"https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
]
}
},
'layers': [{
'id': 'carto-light-layer',
'source': 'carto-light',


'type': 'raster',
'minzoom': 0,
'maxzoom': 22
}]
}

const climate_map = new maplibregl.Map({
container: "climate-map", // container ID
style: defaultStyle,
center: [0, 0], // starting position [lng, lat]
zoom: 2, // starting zoom
scrollZoom: false,
dragRotate: false,
});

// add zoom control
climate_map.addControl(new maplibregl.NavigationControl({showCompass: false}));

const fetchCityData = () => {
const selectedCity = $citySelect.val()
return fetch(options.city_data_url + `?city_id=${selectedCity}`).then((res) => res.json())
}


const updateChart = () => {
const selectedCity = $citySelect.val()

if (mapReady) {
try {
climate_map.setFilter("cities_outline", ["==", "id", selectedCity])
} catch (e) {
console.error(e)
}
}


if (cityData[selectedCity]) {
setChart(cityData[selectedCity])
} else {
Expand Down Expand Up @@ -285,66 +345,8 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>

updateChart()

// default MapLibre style
const defaultStyle = {
'version': 8,
'sources': {
'carto-dark': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png"
]
},
'carto-light': {
'type': 'raster',
'tiles': [
"https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
"https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png"
]
},
'wikimedia': {
'type': 'raster',
'tiles': [
"https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
]
}
},
'layers': [{
'id': 'carto-light-layer',
'source': 'carto-light',


'type': 'raster',
'minzoom': 0,
'maxzoom': 22
}]
}

const climate_map = new maplibregl.Map({
container: "climate-map", // container ID
style: defaultStyle,
center: [0, 0], // starting position [lng, lat]
zoom: 2, // starting zoom
scrollZoom: false,
});

// add zoom control
climate_map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true,
})
);


climate_map.on("load", () => {

// fit to country bounds
if (countryBounds) {
const bounds = [[countryBounds[0], countryBounds[1]], [countryBounds[2], countryBounds[3]]]
Expand Down Expand Up @@ -395,19 +397,24 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>
"line-width": 1.5,
}
});


}


fetch("{% url 'cities-list' %}")
.then((res) => res.json())
.then((city_data) => {
const citiesWithData = city_data.filter(city => citiesWithDataIds.includes(city.id))

const selectedCity = $citySelect.val()

let cities_geom = {
type: "FeatureCollection",
features: []
}

city_data.map(city => {
citiesWithData.map(city => {
cities_geom.features.push({
type: "Feature",
properties: {
Expand Down Expand Up @@ -440,6 +447,23 @@ <h2 class="section-title has-text-centered">{{ page.title }}</h2>
})


climate_map.addLayer({
'id': 'cities_outline',
'type': 'circle',
'source': 'cities',
'paint': {
'circle-color': "#ADEFD1FF",
'circle-radius': 8,
"circle-stroke-width": 4,
"circle-stroke-color": "red",
},
filter: ["==", "id", selectedCity]
})


mapReady = true


}

// When a click event occurs on a feature in the places layer, open a popup at the
Expand Down
4 changes: 3 additions & 1 deletion pages/cityclimate/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ def load_climate_data(request, page_id):
)

except Exception as e:
print(e)
form.add_error(None, f"An error occurred while saving data. {str(e)}")
context.update({"form": form})
return render(request, template_name=template, context=context)

messages.success(request, "Data loaded successfully")
return redirect(reverse("cityclimate_data_checklist", args=(page.pk,)))
Expand Down

0 comments on commit baa364b

Please sign in to comment.