Satellite base map not showing up in Enketo webform

Support
,
1

1. What is the issue? Please be detailed.
I have setup a fully functional ODK Central server and have completed several mapping tasks using the ODK Collect app. This time i am making a webform accessible to everyone through the ODK Central server. The 'appearance' parameter 'placement-map' is only showing the Open Street Map.How do i get the satellite layer in?

2. What steps can we take to reproduce this issue?
I have changed the 'appearance' parameter from 'placement-map' to 'maps satellite', but the problem persists.

3. What have you tried to fix the issue?
I have deleted the form and uploaded the revised form several times, but failed to get the satellite layer in.

4. Upload any forms or screenshots you can share publicly below.

Screenshot 2023-12-27 at 5.37.30 PM
Screenshot 2023-12-27 at 5.37.30 PM1920×709 101 KB

Thats the screenshot of the form.

2

I think you will need to configure your Enketo instance to have a Google API key. Make sure to enable the Google Maps JavaScript API v3 service, and optionally the the GeoCoding API service (for the search box in the geo widgets). Then you can adjust the maps configuration. For GMaps layers you have the four options as tiles values: "GOOGLE_SATELLITE", "GOOGLE_ROADMAP", "GOOGLE_HYBRID", "GOOGLE_TERRAIN"
See: https://docs.getodk.org/central-install-digital-ocean/#customizing-enketo
Which links to: https://enketo.github.io/enketo-express/tutorial-10-configure.html

1 Like
3

Thanks, I am trying it out right now.

4

Hi Dan,
I tried modifying the config file but it returned a bad gateway error when i accessed the Enketo webform. So for now I have reverted back to the old config....

5

Hi Dan,

Thanks for your help, will this help me get a satellite map in the Enketo webform:

[ {
"name": "street",
"tiles": [ "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" ],
"attribution": "Map data © <a href="http://openstreetmap.org">OpenStreetMap contributors"
}, {
"name": "satellite",
"tiles": "GOOGLE_SATELLITE"
} ]

6

My guess is that your change to the JSON file was not compliant. You were likely missing a comma somewhere. It should look like this:

{
    "app name": "Enketo",
    "base path": "-",
    "encryption key": "${SECRET}",
    "id length": 31,
    "less secure encryption key": "${LESS_SECRET}",
    "linked form and data server": {
        "api key": "${API_KEY}",
        "authentication": {
            "type": "cookie",
            "url": "${BASE_URL}/#/login?next={RETURNURL}"
        },
        "name": "ODK Central",
        "server url": "${DOMAIN}"
    },
    "logo": {
        "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
        "href": ""
    },
    "offline enabled": true,
    "payload limit": "1mb",
    "port": "8005",
    "query parameter to pass to submission": "st",
    "redis": {
        "main": {
            "host": "enketo_redis_main",
            "port": "6379"
        },
        "cache": {
            "host": "enketo_redis_cache",
            "port": "6380"
        }
    },
    "support": {
        "email": "support@getodk.org"
    },
    "text field character limit": 1000000,
    "exclude non-relevant": true,
    "maps": [
        {
            "name": "roadmap",
            "tiles": "GOOGLE_SATELLITE"
        }
    ],
    "google": {
        "api key": "my-google-maps-api-key"
    }
}

You can confirm your syntax is correct at jsonlint.com. You can get the Google Maps API key here.

1 Like
7

Thank you, I am sure this would have worked only if i was successful in getting a Google API. My cards were not accepted and I could not get a Google API. I was wondering if there was a work-around this, like getting in a 'arcgis satellite imagery'?

Abhijit

8

Any Mapbox TileJSON provider should work. I don't know if ArcGIS has a Mapbox TileJSON option, but I doubt it.

1 Like
9

[central-nginx intermediate 4/4] RUN files/prebuild/build-frontend.sh:
#0 35.46 npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
#0 53.87 npm WARN tar TAR_ENTRY_ERROR ENOSPC: no space left on device, write
#0 53.89 npm WARN tar TAR_ENTRY_ERROR ENOSPC: no space left on device, write
#0 53.92 npm ERR! code ENOSPC
#0 53.93 npm ERR! syscall write
#0 53.93 npm ERR! errno -28
#0 53.93 npm ERR! nospc ENOSPC: no space left on device, write
#0 53.94 npm ERR! nospc There appears to be insufficient space on your system to finish.
#0 53.94 npm ERR! nospc Clear up some disk space and try again.
#0 53.96
#0 53.97 npm ERR! A complete log of this run can be found in:
#0 53.97 npm ERR! /root/.npm/_logs/2024-01-18T10_08_59_786Z-debug-0.log

failed to solve: executor failed running [/bin/sh -c files/prebuild/build-frontend.sh]: exit code: 228

Hi
I was getting the above message when trying to revert back to the old Enketo configuration. Unable to get the default Enketo back again. Showing 'bad gateway' message as the docker is unable to stop and restart I think.
Regards,
Abhijit

10

Hi,
Problem resolved!
I just took a 15 min nap, woke up, increased the disk space and validated my json as suggested by you and I am at least having the default Enketo webform working.
Thanks
Abhijit

1 Like