Message Boards Message Boards

Exact GeoPosition from FormFunction

The form for the user: intuitive and easy to use


When trying to set up a system to collect birdwatching data from the public, I was recently faced with the problem of collecting accurate locations from people filling in the form. The obvious choice is to use Here, but the accuracy, especially on laptops was just not enough.

I reached out to Christopher Wolfram and Carlo Barbieri for support and together (large parts of the code contained here is their doing) we were able to create an intuitive and functional solution that let us combine the FormFunction with embedded HTML code and JavaScript accessing the Google Maps API. Many things about the code can be adjusted, like whether you drag the map or the marker and many more, but it has already been extremely useful for my purpose, so I thought I should share with the community.

The code

First, we need to set up the function we are going to call on that consists of HTML and Javascript embedding the map.

    mapControl[apiKey_, name_, defaultPosition_, defaultZoom_:15]:= Function[EmbeddedHTML@StringTemplate["
    <input type=\"hidden\" id=\"mapField\" name=\"`Name`\">
    <div id=\"selectionMap\" style=\"width:100%;height:400px;\"></div>
    field = document.getElementById(\"mapField\")
    function initMap() {
        defaultPosition = {lat: `Latitude`, lng: `Longitude`}
        var map = new google.maps.Map(
           {zoom: `DefaultZoom`, center: defaultPosition})
        var marker = new google.maps.Marker({
           position: defaultPosition,
           map: map
        field.value = marker.position
           function() {
             field.value = marker.position

    function showPosition(position) {
       coords = {
         lat: position.coords.latitude,
         lng: position.coords.longitude
       field.value = marker.position
    if(navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(showPosition, console.log, {enableHighAccuracy: true});
<script async defer src=\"`apiKey`&callback=initMap\">
"][<|"Name"->name,"Latitude"->defaultPosition[[1,1]],"Longitude"->defaultPosition[[1,2]],"DefaultZoom"->defaultZoom,"apiKey"-> apiKey|>]]

Then we deploy a form and use the function as the control for one of the inputs.

    "Label"->"Drag the map so the marker points at your location",
    Permissions->"Public"]**strong text**

The finished product

The resulting section of the form is intuitive and easy to use. It will point at the position given by GPS if the user gives permissions and the default position I set otherwise.

The form for the user: intuitive and easy to use

what the form returns is my exact location

You can see for yourself and find out your exact geolocation here:

6 Replies

Hi Katja,

Nice work! I am not able to view the cloud file. Please change the access permission to "public".

POSTED BY: Adiba Shaikh

Slow to find this, but… why is this not possible in WL itself? As a simple example, a control that is a ClickPane with a map as the background? In truth I'm having trouble understanding how arbitrary control functions return a value to the form.

POSTED BY: Gareth Russell

And here is the extension to do the same thing using OpenStreetMap and Leaflet.js:

mapControl[name_, defaultPosition_, defaultZoom_:15]:=Function[EmbeddedHTML@StringTemplate["
<input type=\"hidden\" id=\"mapField\" name=\"`Name`\">

<div id=\"selectionMap\" style=\"width:400px;height:400px;\"></div>


field = document.getElementById(\"mapField\")
defaultPosition = [`Latitude`,`Longitude`]
var map =\"selectionMap\").setView(defaultPosition, `DefaultZoom`);
mapLink ='<a href=\"\">OpenStreetMap</a>';
    'http://{s}{z}/{x}/{y}.png', {
    attribution: 'Map data &copy;'  + mapLink,
    maxZoom: 18
var marker = L.marker(defaultPosition,
{draggable: false})

if(navigator.geolocation) {
    console.log, {enableHighAccuracy: true});


"][<|"Name"-> name, "Latitude"->defaultPosition[[1,1]],"Longitude"->defaultPosition[[1,2]],"DefaultZoom"->defaultZoom|>]]

Deploying it:

    "Label"->"Drag the map so the marker points at your location",

The new form: the form using open street map The new result: the new return image The link to the OSM form:

enter image description here - Congratulations! This post is now a Staff Pick as distinguished by a badge on your profile! Thank you, keep it coming, and consider contributing your work to the The Notebook Archive! We added your image also to the top for leading above the fold graphics. You might want to consider using Permissions -> "Public" in CloudDeploy as currently the content at URL you has given at the end cannot be viewed by general public.

POSTED BY: Moderation Team

Thank you for making this a staff pick and pointing out the permissions problem. I fixed it and improved the landing site for the FormFunction.

@Christopher Wolfram @Carlo Barbieri Thank you guys again for making this possible. It has been serving me and the Korean birds well :)

Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Reply Preview
or Discard

Group Abstract Group Abstract