Inserting features in mapbox dataset through javascript sdk api from a static webpage without using server

[answerquest]

seriously. I have the GPSlogger app. Explain how it's pushing data to your mapbox account ("as you would a child!") and what are you setting up in your mapbox account to receive it. And is it a free account or a paid account?

[arky]

@geohacker I think it is a good idea to briefly document your work-flow in the README file. It will help people adopt Mapbox API in their future projects.

[geohacker]

• disclaimer - I work for Mapbox and have a staff account but what I'm doing here is absolutely possible with a free account :)
• The server code is running on a certain port on a server that's publicly accessible on the Internet. Like https://example.com:34545. GPSLogger makes a request to this URL with lat, lon, and other info.
• I parse them here https://github.com/geohacker/bangmandu/blob/gh-pages/server/server.js#L10
• Prepare a GeoJSON feature here https://github.com/geohacker/bangmandu/blob/gh-pages/server/server.js#L14
• I use the mapbox javascript sdk to push this to my dataset that I created via my Mapbox account on mapbox.com. https://github.com/geohacker/bangmandu/blob/gh-pages/server/server.js#L30
• More about the dataset API here https://www.mapbox.com/api-documentation/#datasets
• I update a feature with id latest everytime GPSLogger pushes to the server - so I can just look up one feature from the Dataset without having to download all features.
• Then also write the feature with the unix timestamp so I can use the points later.

Hope that helps!

[answerquest]

Thanks @arky , @geohacker !

I have a simpler application that needs this hookup with Mapbox API. See this basic form with map input residing on github pages, see its code here.

I've created an empty dataset in my mapbox account; its id is cj7l74mu82ab630ntbk7xi2fn . And I have my accessToken (which I'm assuming should have the secret datasets:write scope selected, see screenshot )

Upon form submission, I'll make my script prepare GeoJSON feature as you have done. But your server file as I understand is residing on a server running NodeJS. My form is on a simple html file on github pages. What do I have to do (as in : insert this code at the top of your page) to make it work?

Specifically, what do I need to include and setup to make this command work:
client.insertFeature(feature, datasetID, function(err, feature) {

The top lines on your server.js are as follows. How do I translate them to my static HTML file? (wanted: <script src="blahblah.js"></script> or something of the sort)

var express = require('express');
var MapboxClient = require('mapbox');
var moment = require('moment');
var argv = require('minimist')(process.argv.slice(2));
var client = new MapboxClient(argv.accessToken);
var datasetID = argv.dataset;

[answerquest]

Crosspost : created question on gis.stackexchange : https://gis.stackexchange.com/questions/258025/form-submit-to-mapbox-dataset-via-api

[geohacker]

@answerquest - you're right, the code I've in this repository is expected to be run on a server and not in a browser. To do that, you'll have to include mapbox-sdk through a <script> tag. Something similar to what's recommended here - mapbox/mapbox-sdk-js#170 (comment)

Hope that helps!

[answerquest]

Got it to work! Thanks!

[answerquest]

Sample code:
In html head:

<script src='https://unpkg.com/mapbox@1.0.0-beta7/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 accesstoken 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. You can host this code in a login or password-protected page or site. One solution for encrypting static HTML page with a password : StatiCrypt