1

I am using QGIS and a plugin called QGIS2web to make HTML webpage type maps. The plugin seems to write all the necessary files and folders into a single directory and if I move it around my Desktop PC I can open it and the webmap functions fine. So I got the idea to try it on an Android Tablet, figured this could be a quick and easy way to take a map on the go, so I copied the folder to my tablet and opened it with Chrome and it didn't work. I get a blank webpage and no errors, I tried both the leaflet export and the openlayers export options both with the same results. Does anyone know why it isn't working and what I might be able to do to get it to work? HTML Code:

    <!doctype html>
    <html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/leaflet.css">
    <link rel="stylesheet" href="css/qgis2web.css">
    <style>
    html, body, #map {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    </style>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <div id="map">
    </div>
    <script src="js/qgis2web_expressions.js"></script>
    <script src="js/leaflet.js"></script>
    <script src="js/leaflet.rotatedMarker.js"></script>
    <script src="js/leaflet.pattern.js"></script>
    <script src="js/leaflet-hash.js"></script>
    <script src="js/Autolinker.min.js"></script>
    <script src="js/rbush.min.js"></script>
    <script src="js/labelgun.min.js"></script>
    <script src="js/labels.js"></script>
    <script src="js/proj4.js"></script>
    <script src="js/proj4leaflet.js"></script>
    <script src="data/DEDraft_0.js"></script>
    <script>
    var crs = new L.Proj.CRS('EPSG:2954', '+proj=sterea +lat_0=47.25 +lon_0=-63 +k=0.999912 +x_0=400000 +y_0=800000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', {
        resolutions: [2800, 1400, 700, 350, 175, 84, 42, 21, 11.2, 5.6, 2.8, 1.4, 0.7, 0.35, 0.14, 0.07],
    });
    var map = L.map('map', {
        crs: crs,
        continuousWorld: false,
        worldCopyJump: false, 
        zoomControl:true, maxZoom:28, minZoom:1
    })
    var hash = new L.Hash(map);
    map.attributionControl.addAttribution('<a href="https://github.com/tomchadwin/qgis2web" target="_blank">qgis2web</a>');
    var bounds_group = new L.featureGroup([]);
    function setBounds() {
        if (bounds_group.getLayers().length) {
            map.fitBounds(bounds_group.getBounds());
        }
    }
    function pop_DEDraft_0(feature, layer) {
        var popupContent = '<table>\
                <tr>\
                    <td colspan="2">' + (feature.properties['OBJECTID'] !== null ? Autolinker.link(String(feature.properties['OBJECTID'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['YEAR'] !== null ? Autolinker.link(String(feature.properties['YEAR'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['Source'] !== null ? Autolinker.link(String(feature.properties['Source'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['File'] !== null ? Autolinker.link(String(feature.properties['File'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['PID'] !== null ? Autolinker.link(String(feature.properties['PID'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['UNITS'] !== null ? Autolinker.link(String(feature.properties['UNITS'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['PID_1'] !== null ? Autolinker.link(String(feature.properties['PID_1'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['TOT_RES'] !== null ? Autolinker.link(String(feature.properties['TOT_RES'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['TOT_FAMLY'] !== null ? Autolinker.link(String(feature.properties['TOT_FAMLY'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['NUMBER'] !== null ? Autolinker.link(String(feature.properties['NUMBER'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['DESCRIPTON'] !== null ? Autolinker.link(String(feature.properties['DESCRIPTON'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['STREETNAME'] !== null ? Autolinker.link(String(feature.properties['STREETNAME'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['AREA_1'] !== null ? Autolinker.link(String(feature.properties['AREA_1'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['Shape_Leng'] !== null ? Autolinker.link(String(feature.properties['Shape_Leng'])) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2">' + (feature.properties['Shape_Area'] !== null ? Autolinker.link(String(feature.properties['Shape_Area'])) : '') + '</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 400});
    }

    function style_DEDraft_0_0() {
        return {
            pane: 'pane_DEDraft_0',
            opacity: 1,
            color: 'rgba(0,0,0,1.0)',
            dashArray: '',
            lineCap: 'butt',
            lineJoin: 'miter',
            weight: 1.0, 
            fillOpacity: 1,
            fillColor: 'rgba(177,237,66,1.0)',
        }
    }
    map.createPane('pane_DEDraft_0');
    map.getPane('pane_DEDraft_0').style.zIndex = 400;
    map.getPane('pane_DEDraft_0').style['mix-blend-mode'] = 'normal';
    var layer_DEDraft_0 = new L.geoJson(json_DEDraft_0, {
        attribution: '<a href=""></a>',
        pane: 'pane_DEDraft_0',
        onEachFeature: pop_DEDraft_0,
        style: style_DEDraft_0_0,
    });
    bounds_group.addLayer(layer_DEDraft_0);
    map.addLayer(layer_DEDraft_0);
    setBounds();
    </script>
</body>

  • 3
    Run a remote debugger against the browser inside your android device. What do the errors there look like? – IvanSanchez Nov 24 '17 at 14:32
  • It's also important how you call (reference) file in your browser. It should be something like file:///sdcard/maps/LeafletExamples/ExampleN.html – TomazicM Nov 24 '17 at 15:08
  • I added the HTML Code for the webpage I wonder if I need to add something to src="... entries so that the browser can find the data it is looking for. In QField, and QGIS, that is ../ I believe. Maybe I should add sdcard/ to those lines? – Tyler Veinot Nov 24 '17 at 15:30
  • qgis2web author here. Should I change relative URLs from "path/to/file.js" to "./path/to/file.js"? Could that be why it is failing? – Tom Chadwin Nov 24 '17 at 16:06
  • Paths to resources should be relative, this is OK. Next possible source of problems are App permissions. Did you add Storage to Chrome permissions? – TomazicM Nov 24 '17 at 16:44
1

I'm guessing that on your Android device you're facing something like CORS (cross origin requests) errors. Normally on machine browser you can bypass Chrome's security policy with switches like --disable-web-security or --allow-file-access-from-files. But you cannot run browser with these switches on Android as far as I know.

Easiest solution for you would be just to upload your data on some remote server.

But if you have to have your files locally on Android device - in this case I would suggest you to:

  1. On your Android device install basic http server from Google Play Store, for example Simple HTTP Server
  2. In Simple HTTP Server's settings change Document Root to your maps folder (or move your folder to the Document Root)
  3. Now open Chrome or other browser and navigate to your device's IP (shown in settings, something like for example http://192.168.1.5:1234)
  4. If you still see blank page, please get back to Simple HTTP Server and check if it has caught some errors, like missing files 404, etc.

Please update us if you do some further tests on this matter.

  • Sorry this took me a while to get back too, I did try it today and got the same result. I can navigate the folders on the device. I checked the Simple HTML readout but there was nothing there saying "error" although there is a whole lot of text I don't understand goes something like; 192.168.1.31--[22/Dec/2017:10:31:07] "GET/HTTP/1.1" 200 2644 "-" "Mozilla/5.0 (Linus; Android 7.1.1; SM-T560NUBuild/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Safari/537.366" and it goes on like that for quite a while. – Tyler Veinot Dec 22 '17 at 14:42
  • ..GET/HTTP/1.1" 200.. is good, 200 code means that specified in this line file was found and accessed properly. Do you find some lines with 404 code? Or 403? Errors are not named "errors" directly, they will have 400 or 500 code:) – d324223 Dec 22 '17 at 14:48
  • Ok, yeah I see error 404 on some lines; but now it is only going as far as letting me into the folder, It doesn't show the html file like the first time I tried it. EDIT: Ok, so when I clicked on the filefolder containing the html file it showed a black screen; so I added to the end of the address \index.html and now I can see the webmap. Thanks for the help. – Tyler Veinot Dec 28 '17 at 19:36
  • Glad it is working for you, so if my answer was helpful please mark as accepted or upvote ;) thanks – d324223 Dec 28 '17 at 22:00
  • Sorry, forgot... – Tyler Veinot Dec 29 '17 at 15:53

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.