content/blog/ribw/developing-a-python-application-for-mongodb/index.md (view raw)
1+++
2title = "Developing a Python application for MongoDB"
3date = 2020-03-25T00:00:04+00:00
4updated = 2020-04-16T08:01:23+00:00
5+++
6
7This is the third and last post in the MongoDB series, where we will develop a Python application to process and store OpenData inside Mongo.
8
9Other posts in this series:
10
11* [MongoDB: an Introduction](/blog/ribw/mongodb-an-introduction/)
12* [MongoDB: Basic Operations and Architecture](/blog/ribw/mongodb-basic-operations-and-architecture/)
13* [Developing a Python application for MongoDB](/blog/ribw/developing-a-python-application-for-mongodb/) (this post)
14
15This post is co-authored wih a Classmate.
16
17----------
18
19## What are we making?
20
21We are going to develop a web application that renders a map, in this case, the town of Cáceres, with which users can interact. When the user clicks somewhere on the map, the selected location will be sent to the server to process. This server will perform geospatial queries to Mongo and once the results are ready, the information is presented back at the webpage.
22
23The data used for the application comes from [Cáceres’ OpenData](https://opendata.caceres.es/), and our goal is that users will be able to find information about certain areas in a quick and intuitive way, such as precise coordinates, noise level, and such.
24
25## What are we using?
26
27The web application will be using [Python](https://python.org/) for the backend, [Svelte](https://svelte.dev/) for the frontend, and [Mongo](https://www.mongodb.com/) as our storage database and processing center.
28
29* **Why Python?** It’s a comfortable language to write and to read, and has a great ecosystem with [plenty of libraries](https://pypi.org/).
30* **Why Svelte?** Svelte is the New Thing**™** in the world of component frameworks for JavaScript. It is similar to React or Vue, but compiled and with a lot less boilerplate. Check out their [Svelte post](https://svelte.dev/blog/svelte-3-rethinking-reactivity) to learn more.
31* **Why Mongo?** We believe NoSQL is the right approach for doing the kind of processing and storage that we expect, and it’s [very easy to use](https://docs.mongodb.com/). In addition, we will be making Geospatial Queries which [Mongo supports](https://docs.mongodb.com/manual/geospatial-queries/).
32
33Why didn’t we choose to make a smaller project, you may ask? You will be shocked to hear that we do not have an answer for that!
34
35Note that we will not be embedding **all** the code of the project in this post, or it would be too long! We will include only the relevant snippets needed to understand the core ideas of the project, and not the unnecessary parts of it (for example, parsing configuration files to easily change the port where the server runs is not included).
36
37## Python dependencies
38
39Because we will program it in Python, you need Python installed. You can install it using a package manager of your choice or heading over to the [Python downloads section](https://www.python.org/downloads/), but if you’re on Linux, chances are you have it installed already.
40
41Once Python 3.7 or above is installed, install [`motor` (Asynchronous Python driver for MongoDB)](https://motor.readthedocs.io/en/stable/) and the [`aiohttp` server](https://docs.aiohttp.org/en/stable/web.html) through `pip`:
42
43```
44pip install aiohttp motor
45```
46
47Make sure that Mongo is running in the background (this has been described in previous posts), and we should be able to get to work.
48
49## Web dependencies
50
51To work with Svelte and its dependencies, we will need `[npm](https://www.npmjs.com/)` which comes with [NodeJS](https://nodejs.org/en/), so go and [install Node from their site](https://nodejs.org/en/download/). The download will be different depending on your operating system.
52
53Following [the easiest way to get started with Svelte](https://svelte.dev/blog/the-easiest-way-to-get-started), we will put our project in a `client/` folder (because this is what the clients see, the frontend). Feel free to tinker a bit with the configuration files to change the name and such, although this isn’t relevant for the rest of the post.
54
55## Finding the data
56
57We are going to work with the JSON files provided by [OpenData Cáceres](http://opendata.caceres.es/). In particular, we want information about the noise, census, vias and trees. To save you the time from [searching each of these](http://opendata.caceres.es/dataset), we will automate the download with code.
58
59If you want to save the data offline or just know what data we’ll be using for other purposes though, you can right click on the following links and select «Save Link As…» with the name of the link:
60
61* `[noise.json](http://opendata.caceres.es/GetData/GetData?dataset=om:MedicionRuido&format=json)`
62* `[census.json](http://opendata.caceres.es/GetData/GetData?dataset=om:InformacionPadron&year=2017&format=json)`
63* `[vias.json](http://opendata.caceres.es/GetData/GetData?dataset=om:InformacionPadron&year=2017&format=json)`
64* `[trees.json](http://opendata.caceres.es/GetData/GetData?dataset=om:Arbol&format=json)`
65
66## Backend
67
68It’s time to get started with some code! We will put it in a `server/` folder because it will contain the Python server, that is, the backend of our application.
69
70We are using `aiohttp` because we would like our server to be `async`. We don’t expect a lot of users at the same time, but it’s good to know our server would be well-designed for that use-case. As a bonus, it makes IO points clear in the code, which can help reason about it. The implicit synchronization between `await` is also a nice bonus.
71
72### Saving the data in Mongo
73
74Before running the server, we must ensure that the data we need is already stored and indexed in Mongo. Our `server/data.py` will take care of downloading the files, cleaning them up a little (Cáceres’ OpenData can be a bit awkward sometimes), inserting them into Mongo and indexing them.
75
76Downloading the JSON data can be done with `[ClientSession.get](https://aiohttp.readthedocs.io/en/stable/client_reference.html#aiohttp.ClientSession.get)`. We also take this opportunity to clean up the messy encoding from the JSON, which does not seem to be UTF-8 in some cases.
77
78```
79async def load_json(session, url):
80 fixes = [(old, new.encode('utf-8')) for old, new in [
81 (b'\xc3\x83\\u2018', 'Ñ'),
82 (b'\xc3\x83\\u0081', 'Á'),
83 (b'\xc3\x83\\u2030', 'É'),
84 (b'\xc3\x83\\u008D', 'Í'),
85 (b'\xc3\x83\\u201C', 'Ó'),
86 (b'\xc3\x83\xc5\xa1', 'Ú'),
87 (b'\xc3\x83\xc2\xa1', 'á'),
88 ]]
89
90 async with session.get(url) as resp:
91 data = await resp.read()
92
93 # Yes, this feels inefficient, but it's not really worth improving.
94 for old, new in fixes:
95 data = data.replace(old, new)
96
97 data = data.decode('utf-8')
98 return json.loads(data)
99```
100
101Later on, it can be reused for the various different URLs:
102
103```
104import aiohttp
105
106NOISE_URL = 'http://opendata.caceres.es/GetData/GetData?dataset=om:MedicionRuido&format=json'
107# (...other needed URLs here)
108
109async def insert_to_db(db):
110 async with aiohttp.ClientSession() as session:
111 data = await load_json(session, NOISE_URL)
112 # now we have the JSON data cleaned up, ready to be parsed
113```
114
115### Data model
116
117With the JSON data in our hands, it’s time to parse it. Always remember to [parse, don’t validate](https://lexi-lambda.github.io/blog/2019/11/05/parse-don-t-validate/). With [Python 3.7 `dataclasses`](https://docs.python.org/3/library/dataclasses.html) it’s trivial to define classes that will store only the fields we care about, typed, and with proper names:
118
119```
120from dataclasses import dataclass
121
122Longitude = float
123Latitude = float
124
125@dataclass
126class GSON:
127 type: str
128 coordinates: (Longitude, Latitude)
129
130@dataclass
131class Noise:
132 id: int
133 geo: GSON
134 level: float
135```
136
137This makes it really easy to see that, if we have a `Noise`, we can access its `geo` data which is a `GSON` with a `type` and `coordinates`, having `Longitude` and `Latitude` respectively. `dataclasses` and `[typing](https://docs.python.org/3/library/typing.html)` make dealing with this very easy and clear.
138
139Every dataclass will be on its own collection inside Mongo, and these are:
140
141* Noise
142* Integer `id`
143* GeoJSON `geo`
144* String `type`
145* Longitude-latitude pair `coordinates`
146
147* Floating-point number `level`
148
149* Tree
150* String `name`
151* String `gender`
152* Integer `units`
153* Floating-point number `height`
154* Floating-point number `cup_diameter`
155* Floating-point number `trunk_diameter`
156* Optional string `variety`
157* Optional string `distribution`
158* GeoJSON `geo`
159* Optional string `irrigation`
160
161* Census
162* Integer `year`
163* Via `via`
164* String `name`
165* String `kind`
166* Integer `code`
167* Optional string `history`
168* Optional string `old_name`
169* Optional floating-point number `length`
170* Optional GeoJSON `start`
171* GeoJSON `middle`
172* Optional GeoJSON `end`
173* Optional list with geometry pairs `geometry`
174
175* Integer `count`
176* Mapping year-to-count `count_per_year`
177* Mapping gender-to-count `count_per_gender`
178* Mapping nationality-to-count `count_per_nationality`
179* Integer `time_year`
180
181Now, let’s define a method to actually parse the JSON and yield instances from these new data classes:
182
183```
184@classmethod
185def iter_from_json(cls, data):
186 for row in data['results']['bindings']:
187 noise_id = int(row['uri']['value'].split('/')[-1])
188 long = float(row['geo_long']['value'])
189 lat = float(row['geo_lat']['value'])
190 level = float(row['om_nivelRuido']['value'])
191
192 yield cls(
193 id=noise_id,
194 geo=GSON(type='Point', coordinates=[long, lat]),
195 level=level
196 )
197```
198
199Here we iterate over the input JSON `data` bindings and `yield cls` instances with more consistent naming than the original one. We also extract the data from the many unnecessary nested levels of the JSON and have something a lot flatter to work with.
200
201For those of you who don’t know what `yield` does (after all, not everyone is used to seeing generators), here’s two functions that work nearly the same:
202
203```
204def squares_return(n):
205 result = []
206 for i in range(n):
207 result.append(n ** 2)
208 return result
209
210def squares_yield(n):
211 for i in range(n):
212 yield n ** 2
213```
214
215The difference is that the one with `yield` is «lazy» and doesn’t need to do all the work up-front. It will generate (yield) more values as they are needed when you use a `for` loop. Generally, it’s a better idea to create generator functions than do all the work early which may be unnecessary. See [What does the «yield» keyword do?](https://stackoverflow.com/questions/231767/what-does-the-yield-keyword-do) if you still have questions.
216
217With everything parsed, it’s time to insert the data into Mongo. If the data was not present yet (0 documents), then we will download the file, parse it, insert it as documents into the given Mongo `db`, and index it:
218
219```
220from dataclasses import asdict
221
222async def insert_to_db(db):
223 async with aiohttp.ClientSession() as session:
224 if await db.noise.estimated_document_count() == 0:
225 data = await load_json(session, NOISE_URL)
226
227 await db.noise.insert_many(asdict(noise) for noise in Noise.iter_from_json(data))
228 await db.noise.create_index([('geo', '2dsphere')])
229```
230
231We repeat this process for all the other data, and just like that, Mongo is ready to be used in our server.
232
233### Indices
234
235In order to execute our geospatial queries we have to create an index on the attribute that represents the location, because the operators that we will use requires it. This attribute can be a [GeoJSON object](https://docs.mongodb.com/manual/reference/geojson/) or a legacy coordinate pair.
236
237We have decided to use a GeoJSON object because we want to avoid legacy features that may be deprecated in the future.
238
239The attribute is called `geo` for the `Tree` and `Noise` objects and `start`, `middle` or `end` for the `Via` class. In the `Via` we are going to index the attribute `middle` because it is the most representative field for us. Because the `Via` is inside the `Census` and it doesn’t have its own collection, we create the index on the `Census` collection.
240
241The used index type is `2dsphere` because it supports queries that work on geometries on an earth-like sphere. Another option is the `2d` index but it’s not a good fit for our because it is for queries that calculate geometries on a two-dimensional plane.
242
243### Running the server
244
245If we ignore the configuration part of the server creation, our `server.py` file is pretty simple. Its job is to create a [server application](https://aiohttp.readthedocs.io/en/stable/web.html), setup Mongo and return it to the caller so that they can run it:
246
247```
248import asyncio
249import subprocess
250import motor.motor_asyncio
251
252from aiohttp import web
253
254from . import rest, data
255
256def create_app():
257 ret = subprocess.run('npm run build', cwd='../client', shell=True).returncode
258 if ret != 0:
259 exit(ret)
260
261 db = motor.motor_asyncio.AsyncIOMotorClient().opendata
262 loop = asyncio.get_event_loop()
263 loop.run_until_complete(data.insert_to_db(db))
264
265 app = web.Application()
266 app['db'] = db
267
268 app.router.add_routes([
269 web.get('/', lambda r: web.HTTPSeeOther('/index.html')),
270 *rest.ROUTES,
271 web.static('/', os.path.join(config['www']['root'], 'public')),
272 ])
273
274 return app
275```
276
277There’s a bit going on here, but it’s nothing too complex:
278
279* We automatically run `npm run build` on the frontend because it’s very comfortable to have the frontend built automatically before the server runs.
280* We create a Motor client and access the `opendata` database. Into it, we load the data, effectively saving it in Mongo for the server to use.
281* We create the server application and save a reference to the Mongo database in it, so that it can be used later on any endpoint without needing to recreate it.
282* We define the routes of our app: root, REST and static (where the frontend files live). We’ll get to the `rest` part soon.
283Running the server is now simple:
284
285```
286def main():
287 from aiohttp import web
288 from . import server
289
290 app = server.create_app()
291 web.run_app(app)
292
293if __name__ == '__main__':
294 main()
295```
296
297### REST endpoints
298
299The frontend will communicate with the backend via [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) calls, so that it can ask for things like «give me the information associated with this area», and the web server can query the Mongo server to reply with a HTTP response. This little diagram should help:
300
301
302
303What we need to do, then, is define those REST endpoints we mentioned earlier when creating the server. We will process the HTTP request, ask Mongo for the data, and return the HTTP response:
304
305```
306import asyncio
307import pymongo
308
309from aiohttp import web
310
311async def get_area_info(request):
312 try:
313 long = float(request.query['long'])
314 lat = float(request.query['lat'])
315 distance = float(request.query['distance'])
316 except KeyError as e:
317 raise web.HTTPBadRequest(reason=f'a required parameter was missing: {e.args[0]}')
318 except ValueError:
319 raise web.HTTPBadRequest(reason='one of the parameters was not a valid float')
320
321 geo_avg_noise_pipeline = [{
322 '$geoNear': {
323 'near' : {'type': 'Point', 'coordinates': [long, lat]},
324 'maxDistance': distance,
325 'minDistance': 0,
326 'spherical' : 'true',
327 'distanceField' : 'distance'
328 }
329 }]
330
331 db = request.app['db']
332
333 try:
334 noise_count, sum_noise, avg_noise = 0, 0, 0
335 async for item in db.noise.aggregate(geo_avg_noise_pipeline):
336 noise_count += 1
337 sum_noise += item['level']
338
339 if noise_count != 0:
340 avg_noise = sum_noise / noise_count
341 else:
342 avg_noise = None
343
344 except pymongo.errors.ConnectionFailure:
345 raise web.HTTPServiceUnavailable(reason='no connection to database')
346
347 return web.json_response({
348 'tree_count': tree_count,
349 'trees_per_type': [[k, v] for k, v in trees_per_type.items()],
350 'census_count': census_count,
351 'avg_noise': avg_noise,
352 })
353
354ROUTES = [
355 web.get('/rest/get-area-info', get_area_info)
356]
357```
358
359In this code, we’re only showing how to return the average noise because that’s the simplest we can do. The real code also fetches tree count, tree count per type, and census count.
360
361Again, there’s quite a bit to go through, so let’s go step by step:
362
363* We parse the frontend’s `request.query` into `float` that we can use. In particular, the frontend is asking us for information at a certain latitude, longitude, and distance. If the query is malformed, we return a proper error.
364* We create our query for Mongo outside, just so it’s clearer to read.
365* We access the database reference we stored earlier when creating the server with `request.app['db']`. Handy!
366* We try to query Mongo. It may fail if the Mongo server is not running, so we should handle that and tell the client what’s happening. If it succeeds though, we will gather information about the average noise.
367* We return a `json_response` with Mongo results for the frontend to present to the user.
368You may have noticed we defined a `ROUTES` list at the bottom. This will make it easier to expand in the future, and the server creation won’t need to change anything in its code, because it’s already unpacking all the routes we define here.
369
370### Geospatial queries
371
372In order to retrieve the information from Mongo database we have defined two geospatial queries:
373
374```
375geo_query = {
376 '$nearSphere' : {
377 '$geometry': {
378 'type': 'Point',
379 'coordinates': [long, lat]
380 },
381 '$maxDistance': distance,
382 '$minDistance': 0
383 }
384}
385```
386
387This query uses [the operator `$nearSphere`](https://docs.mongodb.com/manual/reference/operator/query/nearSphere/#op._S_nearSphere) which return geospatial objects in proximity to a point on a sphere.
388
389The sphere point is represented by the `$geometry` operator where it is specified the type of geometry and the coordinates (given by the HTTP request).
390
391The maximum and minimum distance are represented by `$maxDistance` and `$minDistance` respectively. We specify that the maximum distance is the radio selected by the user.
392
393```
394geo_avg_noise_pipeline = [{
395 '$geoNear': {
396 'near' : {'type': 'Point', 'coordinates': [long, lat]},
397 'maxDistance': distance,
398 'minDistance': 0,
399 'spherical' : 'true',
400 'distanceField' : 'distance'
401 }
402}]
403```
404
405This query uses the [aggregation pipeline](https://docs.mongodb.com/manual/core/aggregation-pipeline/) stage [`$geoNear`](https://docs.mongodb.com/manual/reference/operator/aggregation/geoNear/#pipe._S_geoNear) which returns an ordered stream of documents based on the proximity to a geospatial point. The output documents include an additional distance field.
406
407The `near` field is mandatory and is the point for which to find the closest documents. In this field it is specified the type of geometry and the coordinates (given by the HTTP request).
408
409The `distanceField` field is also mandatory and is the output field that will contain the calculated distance. In this case we’ve just called it `distance`.
410
411Some other fields are `maxDistance` that indicates the maximum allowed distance from the center of the point, `minDistance` for the minimum distance, and `spherical` which tells MongoDB how to calculate the distance between two points.
412
413We specify the maximum distance as the radio selected by the user in the frontend.
414
415## Frontend
416
417As said earlier, our frontend will use Svelte. We already downloaded the template, so we can start developing. For some, this is the most fun part, because they can finally see and interact with some of the results. But for this interaction to work, we needed a functional backend which we now have!
418
419### REST queries
420
421The frontend has to query the server to get any meaningful data to show on the page. The [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) does not throw an exception if the server doesn’t respond with HTTP OK, but we would like one if things go wrong, so that we can handle them gracefully. The first we’ll do is define our own exception [which is not pretty](https://stackoverflow.com/a/27724419):
422
423```
424function NetworkError(message, status) {
425 var instance = new Error(message);
426 instance.name = 'NetworkError';
427 instance.status = status;
428 Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
429 if (Error.captureStackTrace) {
430 Error.captureStackTrace(instance, NetworkError);
431 }
432 return instance;
433}
434
435NetworkError.prototype = Object.create(Error.prototype, {
436 constructor: {
437 value: Error,
438 enumerable: false,
439 writable: true,
440 configurable: true
441 }
442});
443Object.setPrototypeOf(NetworkError, Error);
444```
445
446But hey, now we have a proper and reusable `NetworkError`! Next, let’s make a proper and reusabe `query` function that deals with `fetch` for us:
447
448```
449async function query(endpoint) {
450 const res = await fetch(endpoint, {
451 // if we ever use cookies, this is important
452 credentials: 'include'
453 });
454 if (res.ok) {
455 return await res.json();
456 } else {
457 throw new NetworkError(await res.text(), res.status);
458 }
459}
460```
461
462At last, we can query our web server. The export here tells Svelte that this function should be visible to outer modules (public) as opposed to being private:
463
464```
465export function get_area_info(long, lat, distance) {
466 return query(`/rest/get-area-info?long=${long}&lat=${lat}&distance=${distance}`);
467}
468```
469
470The attentive reader will have noticed that `query` is `async`, but `get_area_info` is not. This is intentional, because we don’t need to `await` for anything inside of it. We can just return the `[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)` that `query` created and let the caller `await` it as they see fit. The `await` here would have been redundant.
471
472For those of you who don’t know what a JavaScript promise is, think of it as an object that represents «an eventual result». The result may not be there yet, but we promised it will be present in the future, and we can `await` for it. You can also find the same concept in other languages like Python under a different name, such as [`Future`](https://docs.python.org/3/library/asyncio-future.html#asyncio.Future).
473
474### Map component
475
476In Svelte, we can define self-contained components that are issolated from the rest. This makes it really easy to create a modular application. Think of a Svelte component as your own HTML tag, which you can customize however you want, building upon the already-existing components HTML has to offer.
477
478The main thing that our map needs to do is render the map as an image and overlay the selection area as the user hovers the map with their mouse. We could render the image in the canvas itself, but instead we’ll use the HTML `<img>` tag for that and put a transparent `<canvas>` on top with some CSS. This should make it cheaper and easier to render things on the canvas.
479
480The `Map` component will thus render as the user moves the mouse over it, and produce an event when they click so that whatever component is using a `Map` knows that it was clicked. Here’s the final CSS and HTML:
481
482```
483<style>
484div {
485 position: relative;
486}
487canvas {
488 position: absolute;
489 left: 0;
490 top: 0;
491 cursor: crosshair;
492}
493</style>
494
495<div>
496 <img bind:this={img} on:load={handleLoad} {height} src="caceres-municipality.svg" alt="Cáceres (municipality)"/>
497 <canvas
498 bind:this={canvas}
499 on:mousemove={handleMove}
500 on:wheel={handleWheel}
501 on:mouseup={handleClick}/>
502</div>
503```
504
505We hardcode a map source here, but ideally this would be provided by the server. The project is already complex enough, so we tried to avoid more complexity than necessary.
506
507We bind the tags to some variables declared in the JavaScript code of the component, along with some functions and parameters to let the users of `Map` customize it just a little.
508
509Here’s the gist of the JavaScript code:
510
511```
512<script>
513 import { createEventDispatcher, onMount } from 'svelte';
514
515 export let height = 200;
516
517 const dispatch = createEventDispatcher();
518
519 let img;
520 let canvas;
521
522 const LONG_WEST = -6.426881;
523 const LONG_EAST = -6.354143;
524 const LAT_NORTH = 39.500064;
525 const LAT_SOUTH = 39.443201;
526
527 let x = 0;
528 let y = 0;
529 let clickInfo = null; // [x, y, radius]
530 let radiusDelta = 0.005 * height;
531 let maxRadius = 0.2 * height;
532 let minRadius = 0.01 * height;
533 let radius = 0.05 * height;
534
535 function handleLoad() {
536 canvas.width = img.width;
537 canvas.height = img.height;
538 }
539
540 function handleMove(event) {
541 const { left, top } = this.getBoundingClientRect();
542 x = Math.round(event.clientX - left);
543 y = Math.round(event.clientY - top);
544 }
545
546 function handleWheel(event) {
547 if (event.deltaY < 0) {
548 if (radius < maxRadius) {
549 radius += radiusDelta;
550 }
551 } else {
552 if (radius > minRadius) {
553 radius -= radiusDelta;
554 }
555 }
556 event.preventDefault();
557 }
558
559 function handleClick(event) {
560 dispatch('click', {
561 // the real code here maps the x/y/radius values to the right range, here omitted
562 x: ...,
563 y: ...,
564 radius: ...,
565 });
566 }
567
568 onMount(() => {
569 const ctx = canvas.getContext('2d');
570 let frame;
571
572 (function loop() {
573 frame = requestAnimationFrame(loop);
574
575 // the real code renders mouse area/selection, here omitted for brevity
576 ...
577 }());
578
579 return () => {
580 cancelAnimationFrame(frame);
581 };
582 });
583</script>
584```
585
586Let’s go through bit-by-bit:
587
588* We define a few variables and constants for later use in the final code.
589* We define the handlers to react to mouse movement and clicks. On click, we dispatch an event to outer components.
590* We setup the render loop with animation frames, and cancel the current frame appropriatedly if the component disappears.
591
592### App component
593
594Time to put everything together! We wil include our function to make REST queries along with our `Map` component to render things on screen.
595
596```
597<script>
598 import Map from './Map.svelte';
599 import { get_area_info } from './rest.js'
600 let selection = null;
601 let area_info_promise = null;
602 function handleMapSelection(event) {
603 selection = event.detail;
604 area_info_promise = get_area_info(selection.x, selection.y, selection.radius);
605 }
606 function format_avg_noise(avg_noise) {
607 if (avg_noise === null) {
608 return '(no data)';
609 } else {
610 return `${avg_noise.toFixed(2)} dB`;
611 }
612 }
613</script>
614
615<div class="container-fluid">
616 <div class="row">
617 <div class="col-3" style="max-width: 300em;">
618 <div class="text-center">
619 <h1>Caceres Data Consultory</h1>
620 </div>
621 <Map height={400} on:click={handleMapSelection}/>
622 <div class="text-center mt-4">
623 {#if selection === null}
624 <p class="m-1 p-3 border border-bottom-0 bg-info text-white">Click on the map to select the area you wish to see details for.</p>
625 {:else}
626 <h2 class="bg-dark text-white">Selected area</h2>
627 <p><b>Coordinates:</b> ({selection.x}, {selection.y})</p>
628 <p><b>Radius:</b> {selection.radius} meters</p>
629 {/if}
630 </div>
631 </div>
632 <div class="col-sm-4">
633 <div class="row">
634 {#if area_info_promise !== null}
635 {#await area_info_promise}
636 <p>Fetching area information…</p>
637 {:then area_info}
638 <div class="col">
639 <div class="text-center">
640 <h2 class="m-1 bg-dark text-white">Area information</h2>
641 <ul class="list-unstyled">
642 <li>There are <b>{area_info.tree_count} trees </b> within the area</li>
643 <li>The <b>average noise</b> is <b>{format_avg_noise(area_info.avg_noise)}</b></li>
644 <li>There are <b>{area_info.census_count} persons </b> within the area</li>
645 </ul>
646 </div>
647 {#if area_info.trees_per_type.length > 0}
648 <div class="text-center">
649 <h2 class="m-1 bg-dark text-white">Tree count per type</h2>
650 </div>
651 <ul class="list-group">
652 {#each area_info.trees_per_type as [type, count]}
653 <li class="list-group-item">{type} <span class="badge badge-dark float-right">{count}</span></li>
654 {/each}
655 </ul>
656 {/if}
657 </div>
658 {:catch error}
659 <p>Failed to fetch area information: {error.message}</p>
660 {/await}
661 {/if}
662 </div>
663 </div>
664 </div>
665</div>
666```
667
668* We import the `Map` component and REST function so we can use them.
669* We define a listener for the events that the `Map` produces. Such event will trigger a REST call to the server and save the result in a promise used later.
670* We’re using Bootstrap for the layout because it’s a lot easier. In the body we add our `Map` and another column to show the selection information.
671* We make use of Svelte’s `{#await}` to nicely notify the user when the call is being made, when it was successful, and when it failed. If it’s successful, we display the info.
672
673## Results
674
675Lo and behold, watch our application run!
676
677<video controls="controls" src="sr-2020-04-14_09-28-25.mp4"></video>
678
679In this video you can see our application running, but let’s describe what is happening in more detail.
680
681When the application starts running (by opening it in your web browser of choice), you can see a map with the town of Cáceres. Then you, the user, can click to retrieve the information within the selected area.
682
683It is important to note that one can make the selection area larger or smaller by trying to scroll up or down, respectively.
684
685Once an area is selected, it is colored green in order to let the user know which area they have selected. Under the map, the selected coordinates and the radius (in meters) is also shown for the curious. At the right side the information concerning the selected area is shown, such as the number of trees, the average noise and the number of persons. If there are trees in the area, the application also displays the trees per type, sorted by the number of trees.
686
687## Download
688
689We hope you enjoyed reading this post as much as we enjoyed writing it! Feel free to download the final project and play around with it. Maybe you can adapt it for even more interesting purposes!
690
691*download removed*
692
693To run the above code:
694
6951. Unzip the downloaded file.
6962. Make a copy of `example-server-config.ini` and rename it to `server-config.ini`, then edit the file to suit your needs.
6973. Run the server with `python -m server`.
6984. Open [localhost:9000](http://localhost:9000) in your web browser (or whatever port you chose) and enjoy!