Save the Mapbox public token for the preview to work properly

Map Generator.sketchplugin/Contents/Sketch/common.js

@@ -292,13 +292,14 @@ function createMapJavascriptFile(service, options, context) {
   }
 
   if (!addressInfo.token || addressInfo.token.length === 0) {
-    var message = (service === 'mapbox') ? '⚠️ Please save your Mapbox token first.' : '⚠️ Please save your Google Maps key first.';
+    var message = (service === 'mapbox') ? '⚠️ Please save your Mapbox tokens first.' : '⚠️ Please save your Google Maps key first.';
     context.document.showMessage(message);
     return;
   }
 
   if (service === 'mapbox') {
     addressInfo['username'] = '' + getOption('username', '', service);
+    addressInfo['publictoken'] = '' + getOption('publictoken', '', service);
   }
 
   var jsContent = 'window.' + service + ' = ' + JSON.stringify(addressInfo) + ';';

Map Generator.sketchplugin/Contents/Sketch/google.js

@@ -34,7 +34,7 @@ GoogleMap.prototype.create = function (context) {
       var key = getOption('token', '', this.service);
 
       if (!key || key.length() === 0) {
-        keyMessage = ' (Unregistered API key)';
+        keyMessage = ' (Unsaved API key)';
       }
 
       var window = buildWindow(this.windowSize, 'Map Generator - Google Maps' + keyMessage);

Map Generator.sketchplugin/Contents/Sketch/manifest.json

@@ -25,7 +25,7 @@
     },
     {
       "script": "main.cocoascript",
-      "name": "Enter your Mapbox token and username...",
+      "name": "Enter your Mapbox tokens and username...",
       "handler": "runMapboxToken",
       "identifier": "scriptMapboxToken",
       "shortcut": "shift cmd u"
@@ -45,7 +45,7 @@
   "icon": "icon.png",
   "identifier" : "io.eduardogomez.sketch.map-generator",
   "appcast": "https://raw.githubusercontent.com/eddiesigner/sketch-map-generator/master/appcast.xml",
-  "version" : "3.5.1",
+  "version" : "3.5.2",
   "description" : "Sketch plugin to fill a layer with a map generated from a given location using Google Maps and Mapbox",
   "authorEmail" : "[email protected]",
   "name" : "Map Generator"

Map Generator.sketchplugin/Contents/Sketch/mapbox.js

@@ -38,9 +38,10 @@ MapboxMap.prototype.create = function (context) {
 
       var tokenMessage = '';
       var token = getOption('token', '', this.service);
+      var publictoken = getOption('publictoken', '', this.service);
 
-      if (!token || token.length() === 0) {
-        tokenMessage = ' (Unregistered token)';
+      if ((!token || token.length() === 0) || (!publictoken || publictoken.length() === 0)) {
+        tokenMessage = ' (You have not yet saved some of your tokens)';
       }
 
       var window = buildWindow(this.windowSize, 'Map Generator - Mapbox' + tokenMessage);
@@ -240,9 +241,10 @@ MapboxMap.prototype.buildInterface = function (window, context) {
  */
 MapboxMap.prototype.generateMap = function (values, context, window) {
   var token = getOption('token', '', this.service);
+  var publictoken = getOption('publictoken', '', this.service);
 
-  if (!token || token.length() === 0) {
-    context.document.showMessage('⚠️ Please save your Mapbox token first.');
+  if ((!token || token.length() === 0) || (!publictoken || publictoken.length() === 0)) {
+    context.document.showMessage('⚠️ Please save your Mapbox tokens first.');
     return;
   }
 
@@ -316,19 +318,20 @@ MapboxMap.prototype.openTokenWindow = function () {
  * Builds the window where users can save their own token and username.
  */
 MapboxMap.prototype.buildTokenWindow = function () {
-  var token = getOption('token', '', this.service);
   var username = getOption('username', '', this.service);
+  var publicToken = getOption('publictoken', '', this.service);
+  var token = getOption('token', '', this.service);
   var dialogWindow = COSAlertWindow.new();
 
   dialogWindow.setMessageText('Map Generator (Mapbox)');
-  dialogWindow.setInformativeText('Enter your Mapbox token and username to generate maps and to load your own styles.');
+  dialogWindow.setInformativeText('Enter your Mapbox username and tokens to generate maps and to load your own styles.');
 
-  var link = NSButton.alloc().initWithFrame(NSMakeRect(0, 0, 180, 20)));
-  link.setTitle('How to create a valid token');
+  var link = NSButton.alloc().initWithFrame(NSMakeRect(0, 0, 270, 20)));
+  link.setTitle('How to get your public and secret tokens');
   link.setBezelStyle(NSInlineBezelStyle);
 
   link.setCOSJSTargetFunction(function () {
-    var url = NSURL.URLWithString(@"https://github.com/eddiesigner/sketch-map-generator/wiki/How-to-create-a-token-to-use-your-own-Mapbox-styles");
+    var url = NSURL.URLWithString(@"https://github.com/eddiesigner/sketch-map-generator/wiki/How-to-get-your-Mapbox-tokens");
 
     if (!NSWorkspace.sharedWorkspace().openURL(url)) {
       log(@"Failed to open url:" + url.description());
@@ -337,16 +340,20 @@ MapboxMap.prototype.buildTokenWindow = function () {
 
   dialogWindow.addAccessoryView(link);
 
-  dialogWindow.addTextLabelWithValue('Enter your token:');
-  dialogWindow.addTextFieldWithValue(token);
   dialogWindow.addTextLabelWithValue('Enter your username:');
   dialogWindow.addTextFieldWithValue(username);
+  dialogWindow.addTextLabelWithValue('Enter your public token:');
+  dialogWindow.addTextFieldWithValue(publicToken);
+  dialogWindow.addTextLabelWithValue('Enter your secret token:');
+  dialogWindow.addTextFieldWithValue(token);
 
-  var tokenTextBox = dialogWindow.viewAtIndex(2);
-  var usernameTextBox = dialogWindow.viewAtIndex(4);
+  var usernameTextBox = dialogWindow.viewAtIndex(2);
+  var publicTokenTextBox = dialogWindow.viewAtIndex(4);
+  var tokenTextBox = dialogWindow.viewAtIndex(6);
 
-  dialogWindow.alert().window().setInitialFirstResponder(tokenTextBox);
-  tokenTextBox.setNextKeyView(usernameTextBox);
+  dialogWindow.alert().window().setInitialFirstResponder(usernameTextBox);
+  usernameTextBox.setNextKeyView(publicTokenTextBox);
+  publicTokenTextBox.setNextKeyView(tokenTextBox);
 
   dialogWindow.addButtonWithTitle('Save');
   dialogWindow.addButtonWithTitle('Cancel');
@@ -362,11 +369,13 @@ MapboxMap.prototype.buildTokenWindow = function () {
  */
 MapboxMap.prototype.handleTokenAlertResponse = function (dialog, responseCode) {
   if (responseCode == "1000") {
-    var tokenValue = dialog.viewAtIndex(2).stringValue();
-    var usernameValue = dialog.viewAtIndex(4).stringValue();
+    var usernameValue = dialog.viewAtIndex(2).stringValue();
+    var publicTokenValue = dialog.viewAtIndex(4).stringValue();
+    var tokenValue = dialog.viewAtIndex(6).stringValue();
 
-    setPreferences(this.service + '.token', tokenValue);
     setPreferences(this.service + '.username', usernameValue);
+    setPreferences(this.service + '.publictoken', publicTokenValue);
+    setPreferences(this.service + '.token', tokenValue);
 
     return true;
   } else {

Map Generator.sketchplugin/Contents/Sketch/webview/mapbox.html

@@ -83,7 +83,7 @@
                 zoom: parseInt(mapData.zoom)
               };
 
-              mapboxgl.accessToken = mapData.token;
+              mapboxgl.accessToken = mapData.publictoken;
               map = new mapboxgl.Map(options);
 
               map.addControl(new mapboxgl.NavigationControl({

README.md

@@ -34,7 +34,7 @@ In order to help you here you have some guides on how to generate a Google Maps
 
 [How to generate a Google Maps key](https://github.com/eddiesigner/sketch-map-generator/wiki/How-to-generate-a-Google-Maps-key)
 
-[How to generate a Mapbox token](https://github.com/eddiesigner/sketch-map-generator/wiki/How-to-create-a-token-to-use-your-own-Mapbox-styles)
+[How to get your Mapbox tokens](https://github.com/eddiesigner/sketch-map-generator/wiki/How-to-get-your-Mapbox-tokens)
 
 **The Google Maps key API and the Mapbox token that the plugin has used so far will stop working on September 30th.**
 

appcast.xml

@@ -177,5 +177,16 @@
         </description>
         <enclosure url="https://github.com/eddiesigner/sketch-map-generator/archive/v3.5.1.zip" sparkle:version="3.5.1" />
       </item>
+      <item>
+        <title>Version 3.5.2</title>
+        <description>
+          <![CDATA[
+            <ul>
+              <li>🧐 Now you must enter your Mapbox public token for the preview to work properly.</li>
+            </ul>
+          ]]>
+        </description>
+        <enclosure url="https://github.com/eddiesigner/sketch-map-generator/archive/v3.5.2.zip" sparkle:version="3.5.2" />
+      </item>
   </channel>
 </rss>