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 tif 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)
  • tif file (.tif)
  • postgresql
  • geoserver wms

I've tried to display the .asc and .tif file directly using L.TileLayer:

    {% load static %}
    {% load leaflet_tags %}
    <meta charset='UTF-8'>
    {% leaflet_js %}
    {% leaflet_css %}
<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
    {% leaflet_map "gis" callback="window.ascii_layers" %}

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

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 ('', 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__
  File "C:\Python27\lib\SocketServer.py", line 713, in finish
  File "C:\Python27\lib\socket.py", line 283, in close
  File "C:\Python27\lib\socket.py", line 307, in flush
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 it does not show the image I want to show

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:





STATIC_URL = '/static/'

STATICFILES_DIRS = (os.path.join('static'),)

    '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.

  • A WMS won't give an ASCII grid as output (doesn't matter if it's provided by GeoServer or not). You might try to use WCS, but not sure if Leaflet can handle WCS calls. – nmtoken Mar 28 '18 at 11:33
  • 1
    It ended up being a typo problem when calling the Leaflet API. Instead of T.TileLayer.WMS it should be L.tileLayer.wms. I could not use geoserver with ascii grid, but by converting the files to tiff it works just fine. – David Baião Apr 12 '18 at 15:28

There is a plugin in Leaflet leaflet-canvaslayer-field that adds layers to visualize fields from ASCIIGrid or GeoTIFF (Raster) files. You can also create vector animation in addition to scalar field visualization using that.

Examples: scalar, vector field visualization, custom styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.