I'm using QGIS were its easy to import my noise mapping data through a raster layer file in ESRI ASCII (ASCII grid) format.

I want to do the same online, without exporting from QGIS, because I want to work dynamically with the output of my prediction software.

What I want is to be able to have the red shape data imported directly and interpreted by the web mapping. Anybody knows any Open Source Web mapping tool able to import this kind (or similar) raster file?

noise grid in red


You can use Leaflet and some other javascript libraries to display your files on a webmap https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/example_ScalarField.html

<!DOCTYPE html>

    <title>ScalarField / ASCIIGrid</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <link rel="stylesheet" href="examples.css" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">

    <h1 class="title mapTitle">ScalarField</h1>
    <div id="map"></div>

    <!-- CDN -->
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script>

    <!-- Plugin -->
    <script src="dist/leaflet.canvaslayer.field.js"></script>

        let map = L.map('map');

        /* Basemap */
        var url = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png';
        L.tileLayer(url, {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>',
            subdomains: 'abcd'

        /* An ASCIIGrid Raster with Surface current velocity */
        d3.text('data/Bay_Speed.asc', function (asc) {
            let s = L.ScalarField.fromASCIIGrid(asc);
            let layer = L.canvasLayer.scalarField(s).addTo(map);

            layer.on('click', function (e) {
                if (e.value !== null) {
                    let v = e.value.toFixed(3);
                    let html = `<span class="popupText">Surface currents velocity ${v} m/s</span>`;
                    let popup = L.popup().setLatLng(e.latlng).setContent(html).openOn(map);

            layer.on('mousemove', function (e) {

  • The example looks good but I have some problems: -My asciiGrid File has dx and dy values instead of cellsize and the coordinate units are utm I'm converting to utm2deg but the centering is not good because I'm aproximating dx and dy with cellsize. Do you know if I can use dx/dy fields or how to solve this? – David Santos Domínguez Jun 10 '19 at 19:13
  • Sorry but I dont know much about ascii grid files. What is 'dx'? delta x? – GreyHippo Jun 11 '19 at 15:31
  • thanks for your reply! dx is a field of my grid file, you can see an example in the file that nmtoken post above. I think that when the grid file is not a square representation instead of the cellsize field you have two different fields for the x/y coordinates and they have the name dx/dy. All the best – David Santos Domínguez Jun 12 '19 at 22:18

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.