Form submit to mapbox dataset via Javascript API

Question

1. I have a form on a webpage that has a map the user can click on to populate the form's latitude and longitude fields. See it live.

2. I have an empty dataset created in Mapbox Studio and have created an accessToken which has the secret datasets:write scope selected, as seen in this screenshot.

Challenge: My form will generate a GeoJSON string out of the form fields, which I want to append to my mapbox dataset via a call to mapbox's API. The dataset should capture and show all locations submitted on that form.

How do I go about it? More specifically, if I have my username, dataset id and my accessToken, what should be the syntax of my form's submit action?

References:

• this github discussion at a similar project that successfully got a GPS Logger app to post to a mapbox dataset via a server script. (server side script was needed there to be listening for the app and posting stuff to mapbox that the app couldn't; I believe we can bypass that in a form's case)
• Mapbox API documentation for datasets that I haven't been able to properly understand and apply to my case.

Answer 1

You can use the Mapbox JS SDK which can call the Datasets API insertFeature method, see https://github.com/mapbox/mapbox-sdk-js/blob/master/API.md#insertfeature also https://www.mapbox.com/api-documentation/?language=JavaScript#insert-or-update-a-feature.

Be aware of the implications of using an access token with datasets:write scope publicly, anyone could spam your account with new Datasets and write over every other feature in your Datasets. It's probably better to use your own server side layer which handles authentication and then makes the calls to Mapbox.

Answer 2

The command require('mapbox') and similar was causing problems, as that cannot run on client-side javascript/HTML.

Was pointed by someone at mapbox to this solution at this github issue where the needed libraries are imported by a direct js file include in the page's header. This removes the need for the require command.

Sharing code example: (from here)

In html head:

<script src='https://unpkg.com/[email protected]/dist/mapbox-sdk.min.js'></script>

In html body:

<script>
var ACCESSTOKEN = 'your accessToken';
var DATASET = 'your dataset id';
var client = new MapboxClient(ACCESSTOKEN);
var feature = {
  "id": "feature1",
  "type": "Feature",
  "properties": {
    "name": "Null Island"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [0, 0]
  }
};
client.insertFeature(feature, DATASET, function(err, feature) {
  console.log(JSON.stringify(feature));
});
</script>

Note: The access token in this case needs to have the secret scope datasets:write selected. Create a new accessToken in Mapbox Studio with this option. See screenshot.

On loading page, press Ctrl+Shift+J to see the console. If you see the geojson output on console then it has gone through successfully. You can see it on your mapbox studio on this link:

https://www.mapbox.com/studio/datasets/{username}/{datasetId}/edit/

Note: The code in this form will expose your secret accessToken if you put your page on the web directly. Use with caution, recommend to host it on a password-protected site or page. Check out StatiCrypt for password-protecting an HTML page.