Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge branch 'master' into byline
  • Loading branch information
ryanbaumann committed Mar 17, 2018
2 parents 0842dfe + dc0af95 commit f76768d
Show file tree
Hide file tree
Showing 22 changed files with 4,224 additions and 2,383 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -59,3 +59,4 @@ target/
.*.swp
.hypothesis
*.ipynb_checkpoints*
out.geojson
109 changes: 97 additions & 12 deletions docs-markdown/viz.md
@@ -1,8 +1,8 @@
## Quick start
1. Signup for a [Mapbox Account](https://www.mapbox.com/signup/).
1. Signup for a [Mapbox Account](https://www.mapbox.com/signup/).
* If you already have an account, grab your access token from the [account dashboard](https://www.mapbox.com/account/).

<img width="1175" alt="e3b76b4e9effe60170379326885d7144 _image 2018-02-22 at 3 11 09 pm" src="https://user-images.githubusercontent.com/11286381/36569461-be9b0454-17e2-11e8-89c9-43e5a50bb7d0.png">
![tokens](https://user-images.githubusercontent.com/11286381/36569461-be9b0454-17e2-11e8-89c9-43e5a50bb7d0.png)


2. Install dependencies:
Expand All @@ -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.
Expand All @@ -50,7 +50,7 @@ Build the HTML text representation of the visual. The output of this is a valid
The `CircleViz` class handles the creation of a circle map and is built on top of the `MapViz` class.

### Params
**CircleViz**(_data, label_property=None, color_property=None, color_stops=None, color_default='grey', color_function_type='interpolate', *args, **kwargs_)
**CircleViz**(_data, label_property=None, color_property=None, color_stops=None, color_default='grey', color_function_type='interpolate', \*args, \*\*kwargs_)

Parameter | Description
--|--
Expand Down Expand Up @@ -99,15 +99,15 @@ viz = CircleViz('points.geojson',
viz.show()
```

![screen shot 2018-02-21 at 3 02 44 pm](https://user-images.githubusercontent.com/11286381/36511701-8ea5e64a-171c-11e8-8f27-6bc2f50319c9.png)
![CircleViz](https://user-images.githubusercontent.com/11286381/36511701-8ea5e64a-171c-11e8-8f27-6bc2f50319c9.png)


## class ClusteredCircleViz

The `ClusteredCircleViz` object handles the creation of a clustered circle map and is built on top of the `MapViz` class. Cluster radius and color are keyed on point density.

### Params
**ClusteredCircleViz**(_data, color_stops=None, radius_stops=None, cluster_radius=30, cluster_maxzoom=14, *args, **kwargs_)
**ClusteredCircleViz**(_data, color_stops=None, radius_stops=None, cluster_radius=30, cluster_maxzoom=14, \*args, \*\*kwargs_)

Parameter | Description
--|--
Expand Down Expand Up @@ -154,15 +154,15 @@ viz = ClusteredCircleViz('points.geojson',

viz.show()
```
![screen shot 2018-02-21 at 3 33 46 pm](https://user-images.githubusercontent.com/11286381/36511731-a4ca9af6-171c-11e8-9cde-60ef59e7e3b9.png)
![ClusteredCircleViz](https://user-images.githubusercontent.com/11286381/36511731-a4ca9af6-171c-11e8-9cde-60ef59e7e3b9.png)


## class GraduatedCircleViz

The `GraduatedCircleViz` object handles the creation of a graduated map and is built on top of the `MapViz` class.

### Params
**GraduatedCircleViz**(_data, label_property=None, color_property=None, color_stops=None, color_default='grey', color_function_type='interpolate', radius_property=None, radius_stops=None, radius_default=None, radius_function_type='interpolate', *args, **kwargs_)
**GraduatedCircleViz**(_data, label_property=None, color_property=None, color_stops=None, color_default='grey', color_function_type='interpolate', radius_property=None, radius_stops=None, radius_default=None, radius_function_type='interpolate', \*args, \*\*kwargs_)

Parameter | Description
--|--
Expand Down Expand Up @@ -216,15 +216,15 @@ viz = GraduatedCircleViz('points.geojson',

viz.show()
```
![screen shot 2018-02-21 at 3 34 18 pm](https://user-images.githubusercontent.com/11286381/36511755-b58e6cc8-171c-11e8-9385-e90c3795be14.png)
![GraduatedCircleViz](https://user-images.githubusercontent.com/11286381/36511755-b58e6cc8-171c-11e8-9385-e90c3795be14.png)


## class HeatmapViz

The `HeatmapViz` object handles the creation of a heat map and is built on top of the `MapViz` class.

### Params
**HeatmapViz**(_data, weight_property=None, weight_stops=None, color_stops=None, radius_stops=None, *args, **kwargs_)
**HeatmapViz**(_data, weight_property=None, weight_stops=None, color_stops=None, radius_stops=None, \*args, \*\*kwargs_)

Parameter | Description | Example
--|--|--
Expand Down Expand Up @@ -279,4 +279,89 @@ viz = HeatmapViz('points.geojson',

viz.show()
```
![screen shot 2018-02-21 at 3 34 55 pm](https://user-images.githubusercontent.com/11286381/36511775-cfc4d794-171c-11e8-86b9-5f1a6060a387.png)
![HeatmapViz](https://user-images.githubusercontent.com/11286381/36511775-cfc4d794-171c-11e8-86b9-5f1a6060a387.png)


## class ImageViz

The `ImageViz` object handles the creation of a simple image visualization on map and is built on top of the `MapViz` class.

### Params
**ImageViz**(image, coordinates, \*args, \*\*kwargs_)

Parameter | Description | Example
--|--|--
image | image url, path or numpy ndarray | "./my_image.png"
coordinates | property to image coordinates (UL, UR, LR, LL) | [[-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936]]

[MapViz options](https://github.com/mapbox/mapboxgl-jupyter/blob/master/docs-markdown/viz.md#params)

### Usage
```python
from mapboxgl.viz import ImageViz

img_url = 'https://raw.githubusercontent.com/mapbox/mapboxgl-jupyter/master/examples/mosaic.jpg'

# Coordinates must be an array in the form of [UL, UR, LR, LL]
coordinates = [
[-123.40515640309, 38.534294809274336],
[-115.92938988349292, 38.534294809274336],
[-115.92938988349292, 32.08296982365502],
[-123.40515640309, 32.08296982365502]]

# Create the viz
viz = ImageViz(img_url, coordinates, access_token=token,
height='600px',
center = (-119, 35),
zoom = 5,
below_layer = 'waterway-label')
viz.show()
```
![ImageViz](https://user-images.githubusercontent.com/10407788/37532428-5c8ff7a8-2915-11e8-8d03-2b258a0a53a8.jpg)

[Complete example](https://github.com/mapbox/mapboxgl-jupyter/blob/master/examples/image-viz-types-example.ipynb)


## class RasterTilesViz

The `RasterTilesViz` object handles the creation of a simple raster tiles visualization on map and is built on top of the `MapViz` class.

### Params
**RasterTilesViz**(tiles\_url, \*args, \*\*kwargs_)

Parameter | Description | Example
--|--|--
tiles_url | tiles endpoint | "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
tiles_size | mapbox-gl tiles size | 256
tiles_bounds | tiles endpoint bounds | [124.97480681619507, 10.876763902260592, 124.99391704636035, 10.888369402219947]
tiles_minzoom | tiles endpoint min zoom | 0
tiles_maxzoom | tiles endpoint max zoom | 22



[MapViz options](https://github.com/mapbox/mapboxgl-jupyter/blob/master/docs-markdown/viz.md#params)

### Usage
```python
from mapboxgl.viz import RasterTilesViz

tiles_url = 'https://cogeo.remotepixel.ca/tiles/{z}/{x}/{y}.jpg?tile=256&nodata=0&url=http://oin-hotosm.s3.amazonaws.com/594ab0ba1b114600111194a3/0/d66720c4-148c-4e11-9d54-4ae2a6ba6351.tif'

# Define the tile endpoint bounds
tiles_bounds = [124.97480681619507, 10.876763902260592, 124.99391704636035, 10.888369402219947]
tiles_center = [124.9843619312777, 10.88256665224027]

viz = RasterTilesViz(tiles_url,
tiles_size=256,
tiles_bounds=tiles_bounds,
height='500px',
center=tiles_center,
tiles_minzoom=13,
tiles_maxzoom=18,
zoom=16)
viz.show()
```
![RasterTilesViz](https://user-images.githubusercontent.com/10407788/37537676-b055a108-2924-11e8-94cb-ad3203b736af.jpg)


[Complete example](https://github.com/mapbox/mapboxgl-jupyter/blob/master/examples/rastertile-viz-types-example.ipynb)

0 comments on commit f76768d

Please sign in to comment.