Sidescan Mapping the Swan River near Guildford

This Leaflet map above shows 6 different sidescan runs in the river around Guildford. Layers can be toggled in the top right, and transparency altered by the slider. Top right is zoom and fullscreen toggle. Clicking places a temporary marker, with the coordinates shown on the lower left.

This is part of the Maritime Archaeological Association of Western Australia’s Swan River project. A big thank you to the WA Museum for their support.


Recording

On the 21st of August we recorded a 6km stretch of the Swan River around the Guildford townsite in Western Australia. Kevin Edward, Mack McCarthy and I travelled the 12km round trip in a small rib boat from the Guildford Boat ramp to Caversham House, taking just over 3 hours. We used a Lowrance HDS9 recreational side scan sonar, and were able to successfully image retaining walls, jetties, bridges and trees. There appears to be no shipwrecks in this stretch of river.

The sonar was mounted to a wood plank on the side of the boat, approx 1m under the water where it showed little noise. The GPS was fixed directly above the unit. Features were noted on the screen during the run, most of which were obviously trees.

Water visibilityNil
Current1.5 knots
WindLight breeze, 5 knots west

Creating the web map

The map above was created using Sonarwiz, QGIS and the QTiles plugin and Leaflet. Leaflet is a javascript library for displaying webmaps. It is capable of displaying many sorts of data, including the tiled output from Qtiles. 

1. The imagery was converted into 6 GeoTiff files in Sonarwiz by Jeremy Green at the Western Australian Museum. These images are too large to serve on the web coming to several hundred megabytes in total.

2. These Geotiff files were opened in QGIS 2.18, where transparency was applied by colour channel to areas without data. 

3. The Geotiffs were tiled individually using the QGIS Geotiler plugin. This didn’t work on two computers, but did on the third. The plugin is old and there appears to be no rhyme or reason to when it words. I used the slippy maps standard, a 0-21 zoom level and generated a Leaflet map off the first one using the tool. Each sidescan run was processed by making it the only visible layer in the QGIS project, selecting it as the layer extent and giving it a unique name. I originally used a zoom level of 20, but 21 made features much easier to identify. This increased the total project size from 100MB to 280, beyond this returns are diminshing. 

4. These files are all stored on my server. The folders have the structure of [name of the run]/[zoom level]/[x coordinates]/y coordinates].

5. The autogenerated Leaflet map was modified to include all 6 maps as different layers, which are all hosted in a folder on this site. It is a simple combination of HTML, CSS and Javascript. This took a long time to get working – because it worked locally but not online. I had to host the scripts on my server, and make sure it linked to the HTTPS, not HTTP url. I modified the scaling to be in CSS em units, %, and vh for the height. The Coordinates control plugin was added to allow people to record locations on click, as well as triggering the creation of a temporary marker. I also added an L.control.scale().addTo(map); command to show scale, and the used the Leaflet.fullscreen plugin for the ability to use it in fullscreen. Lastly, ESRI World satellite imagery was added to better contextualise the dataset. The full source script is below, and an HTML link is here.


<!DOCTYPE html>
<html>
<head>
  <title>Guildford Sidescan Map</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--import standard leaflet the CSS stylesheets from my server -->
  <link rel="stylesheet" href="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/leaflet.css" />
  <link href="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" href="https://babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/Control.FullScreen.css" />
<!--import leaflet control coordinators plugin css from my server-->
  <link rel="stylesheet" href="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/Control.Coordinates.css" />
<!--em works best for changing sizes, and height wont work as a % so it's a vh-->
  <style type="text/css">
    #basemapslidercontainer {
      position: absolute;
      top: 5em;
      right: 1em;
      z-index: 1000;
    }

    #basemapslider{
      font-size:62.5%;
      margin: 1em;
      height: 14em;
      width:7px;
    }

    #map{
       width: 100%;
       height: 98vh;
    }
  </style>
<!--import all the required scripts and plugins-->
<script src="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/jquery.min.js"></script>
  <script src="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/jquery-ui.min.js"></script>
  <script src="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/leaflet.js"></script>
  <script src="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/Control.Coordinates.js"></script>
   <script src="https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/scripts/Control.FullScreen.js"></script>
  <script>
    $(document).ready(function () {
      $("#basemapslider").slider({
            animate: true,
            value: 1,
            orientation: "vertical",
            min: 0,
            max: 1,
            step: 0.1,

//script below modified to include all the layers in the opacity slider
            slide: function (event, ui) {
                guildfordlower1.setOpacity(ui.value);
                guildfordlower2.setOpacity(ui.value);
                guildfordmiddle1.setOpacity(ui.value);
                guildfordmiddle2.setOpacity(ui.value);
                guildfordupper1.setOpacity(ui.value);
                guildfordupper2.setOpacity(ui.value);
            }
       });

        $('#basemapslider').mousedown(function(){
          map.dragging.disable();
        })

        $('#basemapslider').mouseup(function(){
          map.dragging.enable();
        })

//set up map, center view, and enable fullscreen plugin
      var map = new L.map('map', {fullscreenControl: true,}
    ).setView([-31.8945109362, 115.965065869], 15);
//import openstreetmap tiles
      var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//this dataset only goes to 18, set max maxNativeZoom and maxZoom to make map autoscale to 21
        maxNativeZoom: 18,
        maxZoom: 21,
        attribution: 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
//import Esri World Imagery
      var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
//this dataset only goes to 18, set max maxNativeZoom and maxZoom to make map autoscale to 21
        maxNativeZoom: 18,
        maxZoom: 21,
      	attribution: 'Tiles © Esri'
      }).addTo(map);


//import all the guildford sidescan tiles from my server
      var guildfordlower1 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Lower-1/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

	    var guildfordlower2 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Lower-2/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

      var guildfordmiddle1 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Middle-1/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

      var guildfordmiddle2 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Middle-2/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

      var guildfordupper1 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Upper-1/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

      var guildfordupper2 =L.tileLayer('https://www.babydropbear.com/wp-content/maawaexperiments/Guildford%20Webmap/Guildford-Upper-2/{z}/{x}/{y}.png', {
        maxZoom: 21,
        tms: false,
        attribution: 'MAAWA 2018. Generated by QTiles.'
      }).addTo(map);

//add all the
      L.control.layers({'OpenStreetMap':OpenStreetMap,'ESRI Satellite':Esri_WorldImagery},{'Guildford Lower 1':guildfordlower1,'Guildford Lower 2':guildfordlower2,'Guildford Middle 1':guildfordmiddle1,'Guildford Middle 2':guildfordmiddle2,'Guildford Upper 1':guildfordupper1,'Guildford Upper 2':guildfordupper2}).addTo(map);

//add a scale to the map
      L.control.scale().addTo(map)

//activates control coordinates plugin to show lat/long on screen
      var c = new L.Control.Coordinates();
      c.addTo(map);

//creates a variable for the temporary marker
      var features = {};

//on click, shows coords of curson using control coordinates plugin, and adds a temporary marker
      function onMapClick(e) {
        c.setCoordinates(e);
        if (features != undefined) {
              map.removeLayer(features);
        };
        features = L.marker(e.latlng).addTo(map);
      }

      map.on('click', onMapClick);
    })
  </script>
</head>
<body>
<!--load the map into the body-->
  <div id="map">
    <div id="basemapslidercontainer">
      <div id="basemapslider">
    </div>
  </div>
  </div>

</body>
</html>

Leave a Reply

Close Menu