I'm using Django to create a webserver that can gather user inputs, produce simulations and output the results with Leaflet.
So far I can produce simulations in Farsite using prepared inputs, however farsite results are in ASCII grid format (.asc), which I cannot display so easily. I've done some conversions to try to find a solution for any of the possible formats.
I've imported the resulting file to PostgreSQL using PostGIS (raster2pgsql) which saves the data of each layer in a single row with columns rid and rast, the latter having all geographic information. I also converted from asc to TIFF and even created a layer in GeoServer with such data. So, by now I have the data I want to show in the following formats:
- ASCII grid file (.asc)
- TIFF file (.tif)
- PostgreSQL
- GeoServer WMS
I've tried to display the .asc and .tif file directly using L.TileLayer:
<html>
{% load static %}
{% load leaflet_tags %}
<head>
<meta charset='UTF-8'>
{% leaflet_js %}
{% leaflet_css %}
<title>HomePage</title>
<script type="text/javascript" src='{% static "leaflet-ajax-gh-pages/dist/leaflet.ajax.js" %}'></script>
<script type="text/javascript">
function ascii_layers(map,options){
L.tileLayer(fullpath + 'data.asc', {
tms: true
}).addTo(map);
}
</script>
</head>
<body>
{% leaflet_map "gis" callback="window.ascii_layers" %}
</body>
</html>
Also using WMS L.TileLayer.WMS:
var simulation = new T.TileLayer.WMS('http://localhost:8080/geoserver/cite/wms',{
layers: 'cite:geotiff_coverage',
format: 'image/png',
transparent: true
})
simulation.addTo(map)
and L.imageOverlay:
var imageUrl = full_path + 'data.tif'
var imageBounds = [[40.450138888889, -8.300138888889],[40.640138889, -7.95013888861]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
but the layer doesn't load and no errors are displayed, except for a strange error in command line:
Exception happened during processing of request from ('127.0.0.1', 38019)
Traceback (most recent call last):
File "C:\Python27\lib\SocketServer.py", line 596, in process_request_thread
self.finish_request(request, client_address)
File "C:\Python27\lib\SocketServer.py", line 331, in finish_request
self.RequestHandlerClass(request, client_address, self)
File "C:\Python27\lib\SocketServer.py", line 654, in __init__
self.finish()
File "C:\Python27\lib\SocketServer.py", line 713, in finish
self.wfile.close()
File "C:\Python27\lib\socket.py", line 283, in close
self.flush()
File "C:\Python27\lib\socket.py", line 307, in flush
self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 10053] An established connection was aborted by the software in your host machine
If I use an example WMS server I can display it in the map, however with the data I want to use it is not working. The file in question: ASCII GRID file used
It is really strange, considering I can use some examples I find in the web and even add random markers in the map producing results like this:
It shows the default OSM layer and the marker but not the image I want on top
The desired result displayed in QGIS using the OSM layer and the ASCII GRID file mentioned before:
settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.gis',
'raster',
'leaflet',
'civildefense',
'djgeojson',
]
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join('static'),)
LEAFLET_CONFIG = {
'DEFAULT_CENTER' : [40.516335, -8.080438],
'DEFAULT_ZOOM' : 12,
'MINIMAP': True,
}
I also tried to load using the database, but the process is way more complex and I could not find a way to do it properly and it would be optimal to directly import the data from the file due to the short time I have to complete this project.