Fix MapViz to allow the use of a non-mapbox style without raising a T…

…okenError and add error propagation from JS (#59)

* Added check for mapbox style before raising TokenError

* style_url is now style and can be an url or json style

* Updated docs to take into account style_url change

* Updated examples to use new style parameter

* Added error when using secret tokens and corresponding tests

docs-markdown/viz.md

@@ -21,14 +21,14 @@
 The `MapViz` class is the parent class of the various `mapboxgl-jupyter` visualizations. You can use this class to set default values for all visualizations rather than calling them directly from the other visualization objects.
 
 ### Params
-**MapViz**(_data, access_token=None, center=(0, 0), below_layer='', opacity=1, div_id='map', height='500px', style_url='mapbox://styles/mapbox/light-v9?optimize=true', width='100%', zoom=0, min_zoom=0, max_zoom=24_)
+**MapViz**(_data, access_token=None, center=(0, 0), below_layer='', opacity=1, div_id='map', height='500px', style='mapbox://styles/mapbox/light-v9?optimize=true', width='100%', zoom=0, min_zoom=0, max_zoom=24_)
 
 Parameter | Description
 --|--
 data | GeoJSON Feature Collection
 access_token | Mapbox GL JS access token.
 center | map center point
-style_url | url to mapbox style
+style | url to mapbox style or stylesheet as a Python dictionary in JSON format
 div_id | The HTML div id of the map container in the viz
 width | The CSS width of the HTML div id in % or pixels.
 height | The CSS height of the HTML map div in % or pixels.

examples/point-viz-types-example.ipynb

@@ -1321,7 +1321,7 @@
     }
    ],
    "source": [
-    "viz.style_url='mapbox://styles/mapbox/dark-v9?optimize=true'\n",
+    "viz.style='mapbox://styles/mapbox/dark-v9?optimize=true'\n",
     "viz.show()"
    ]
   },

mapboxgl/templates/base.html

@@ -8,7 +8,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
-    style: '{{ styleUrl }}', 
+    style: {{ style }},
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {

mapboxgl/templates/circle.html

@@ -5,7 +5,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
-    style: '{{ styleUrl }}', 
+    style: {{ style }},
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {

mapboxgl/templates/clustered_circle.html

@@ -5,7 +5,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
-    style: '{{ styleUrl }}', 
+    style: {{ style }},
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {

mapboxgl/templates/graduated_circle.html

@@ -5,7 +5,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
-    style: '{{ styleUrl }}', 
+    style: {{ style }},
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {

mapboxgl/templates/heatmap.html

@@ -5,7 +5,7 @@
 
 var map = new mapboxgl.Map({
     container: 'map',
-    style: '{{ styleUrl }}', 
+    style: {{ style }},
     center: {{ center }},
     zoom: {{ zoom }},
     transformRequest: (url, resourceType)=> {

mapboxgl/viz.py

@@ -19,7 +19,7 @@ def __init__(self,
                  opacity=1,
                  div_id='map',
                  height='500px',
-                 style_url='mapbox://styles/mapbox/light-v9?optimize=true',
+                 style='mapbox://styles/mapbox/light-v9?optimize=true',
                  width='100%',
                  zoom=0,
                  min_zoom=0,
@@ -29,7 +29,7 @@ def __init__(self,
         :param data: GeoJSON Feature Collection
         :param access_token: Mapbox GL JS access token.
         :param center: map center point
-        :param style_url: url to mapbox style
+        :param style: url to mapbox style or stylesheet as a Python dictionary in JSON format
         :param div_id: The HTML div id of the map container in the viz
         :param width: The CSS width of the HTML div id in % or pixels.
         :param height: The CSS height of the HTML map div in % or pixels.
@@ -39,18 +39,17 @@ def __init__(self,
         """
         if access_token is None:
             access_token = os.environ.get('MAPBOX_ACCESS_TOKEN', '')
-        if not access_token.startswith('pk'):
-            raise TokenError('Mapbox access token must be public (pk). ' \
+        if access_token.startswith('sk'):
+            raise TokenError('Mapbox access token must be public (pk), not secret (sk). ' \
                              'Please sign up at https://www.mapbox.com/signup/ to get a public token. ' \
                              'If you already have an account, you can retreive your token at https://www.mapbox.com/account/.')
         self.access_token = access_token
-
         self.template = 'base'
         self.data = data
         self.div_id = div_id
         self.width = width
         self.height = height
-        self.style_url = style_url
+        self.style = style
         self.center = center
         self.zoom = zoom
         self.below_layer = below_layer
@@ -83,11 +82,15 @@ def add_unique_template_variables(self, options):
 
     def create_html(self):
         """Create a circle visual from a geojson data source"""
+        if isinstance(self.style, str):
+            style = "'{}'".format(self.style)
+        else:
+            style = self.style
         options = dict(
             gl_js_version=GL_JS_VERSION,
             accessToken=self.access_token,
             div_id=self.div_id,
-            styleUrl=self.style_url,
+            style=style,
             center=list(self.center),
             zoom=self.zoom,
             geojson_data=json.dumps(self.data, ensure_ascii=False),