f.geometry.coordinates ) ) } />;
112 | } else if ( layer.type === 'scatter' ) {
113 | return ;
114 | }
115 | });
116 | }
117 |
118 | @autobind
119 | notify_python( data ) {
120 | this.props.comm.send({ method: "notify", data } );
121 | }
122 |
123 | render() {
124 | const mapProps = { ...this.state.viewport, mapboxApiAccessToken: this.props.mapboxApiAccessToken };
125 | const { width, height } = this.state.viewport;
126 | const { mapStyle, layers } = this.state;
127 |
128 | return (
129 |
130 |
131 | { this.buildLayers( layers, mapProps ) }
132 |
133 |
134 | );
135 | }
136 | }
137 |
138 | export default GlMap;
139 |
--------------------------------------------------------------------------------
/js/src/components/index.js:
--------------------------------------------------------------------------------
1 | import GlMap from './GlMap.js';
2 |
3 | export default {
4 | GlMap
5 | };
6 |
--------------------------------------------------------------------------------
/js/src/index.js:
--------------------------------------------------------------------------------
1 | import JupyterReact from 'jupyter-react-js';
2 | import components from 'jupyter-glmap-components';
3 | import react from 'react';
4 | import reactDom from 'react-dom';
5 |
6 | // An option component update method passed to every component
7 | // when an update message is received over the comm,
8 | // components will dispatch an event to every other component
9 | const on_update = ( module, props ) => {
10 | components.dispatcher.dispatch({
11 | actionType: module.toLowerCase() + '_update',
12 | data: props
13 | });
14 | }
15 |
16 | function load_ipython_extension () {
17 | requirejs([
18 | "base/js/namespace",
19 | "base/js/events",
20 | ], function( Jupyter, events ) {
21 | JupyterReact.init( Jupyter, events, 'react.gl', { components, on_update, save: false, react, reactDom } );
22 | });
23 | }
24 |
25 | module.exports = {
26 | load_ipython_extension: load_ipython_extension
27 | };
28 |
--------------------------------------------------------------------------------
/js/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var version = require('./package.json').version;
3 | var path = require( 'path' );
4 |
5 | const babelSettings = {
6 | plugins: [
7 | 'transform-flow-strip-types',
8 | 'add-module-exports',
9 | 'transform-regenerator',
10 | 'transform-decorators-legacy'
11 | ],
12 | presets: [ 'es2015', 'react', 'stage-1' ]
13 | };
14 |
15 |
16 | module.exports = [
17 | {
18 | entry: './src/index.js',
19 | output: {
20 | filename: 'index.js',
21 | path: '../jupyter_map_gl/static',
22 | libraryTarget: 'amd'
23 | },
24 | plugins:[
25 | new webpack.DefinePlugin({
26 | 'process.env':{
27 | 'NODE_ENV': JSON.stringify('production')
28 | }
29 | })
30 | ],
31 | module : {
32 | loaders : [
33 | {
34 | test: /\.js?$/,
35 | exclude: /(node_modules|bower_components)/,
36 | loaders: [`babel?${JSON.stringify( babelSettings )}`]
37 | },
38 | {
39 | test: /\.css$/, loader: "style-loader!css-loader"
40 | },
41 | {
42 | test: /\.json$/, loader: 'json-loader'
43 | }
44 | ]
45 | }
46 | }
47 | ];
48 |
--------------------------------------------------------------------------------
/jupyter_map_gl/__init__.py:
--------------------------------------------------------------------------------
1 | from .glmap import GlMap
2 |
3 | def _jupyter_nbextension_paths():
4 | return [{
5 | 'section': 'notebook',
6 | 'src': 'static',
7 | 'dest': 'jupyter_map_gl',
8 | 'require': 'jupyter_map_gl/index'
9 | }]
10 |
--------------------------------------------------------------------------------
/jupyter_map_gl/glmap.py:
--------------------------------------------------------------------------------
1 | from jupyter_react import Component
2 |
3 | class GlMap(Component):
4 | module = 'GlMap'
5 | features = []
6 |
7 | def __init__(self, **kwargs):
8 | super(GlMap, self).__init__(target_name='react.gl', props=kwargs.get('props', {}))
9 | self.layers = self.props.get('layers', [])
10 | self.on_msg(self._handle_msg)
11 |
12 | def add_layer(self, layer):
13 | self.layers[layer['id']] = layer;
14 | self.send({ "method": "update", "props": {"layers": self.layers}} )
15 |
16 | def add_features(self, layer_id, features):
17 | self.send({ "method": "update", "props": {"layerId": layer_id, "features": features}})
18 |
19 | def _handle_msg(self, msg):
20 | data = msg['content']['data']
21 | if data.get('method', '') == 'notify':
22 | self.features = data.get('data', {}).get('features', [])
23 |
--------------------------------------------------------------------------------
/resources/React_Mapbox_GL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelm/jupyter-map-gl/f536d56bebf84ce13f5dddcb0723b4134a6fb67d/resources/React_Mapbox_GL.png
--------------------------------------------------------------------------------
/resources/map.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chelm/jupyter-map-gl/f536d56bebf84ce13f5dddcb0723b4134a6fb67d/resources/map.gif
--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
1 | from setuptools import setup
2 | from setuptools.command.develop import develop as _develop
3 | from setuptools.command.install import install as _install
4 | from notebook.nbextensions import install_nbextension
5 | from notebook.services.config import ConfigManager
6 | import os
7 |
8 | extension_dir = os.path.join(os.path.dirname(__file__), "jupyter_map_gl", "static")
9 |
10 | class develop(_develop):
11 | def run(self):
12 | _develop.run(self)
13 | install_nbextension(extension_dir, symlink=True,
14 | overwrite=True, user=False, destination="jupyter_map_gl")
15 | cm = ConfigManager()
16 | cm.update('notebook', {"load_extensions": {"jupyter_map_gl/index": True } })
17 |
18 | class install(_install):
19 | def run(self):
20 | _install.run(self)
21 | cm = ConfigManager()
22 | cm.update('notebook', {"load_extensions": {"jupyter_map_gl/index": True } })
23 |
24 | setup(name='jupyter-map-gl',
25 | cmdclass={'develop': develop, 'install': install},
26 | version='0.2.2',
27 | description='A wrapper around react-map-gl components for use in jupyter notebooks',
28 | url='https://bitbucket.com/timbr-io/jupyter-map-gl',
29 | author='Chris Helm',
30 | author_email='chelm@timbr.io',
31 | license='MIT',
32 | packages=['jupyter_map_gl'],
33 | zip_safe=False,
34 | data_files=[
35 | ('share/jupyter/nbextensions/jupyter_map_gl', [
36 | 'jupyter_map_gl/static/index.js'
37 | ]),
38 | ],
39 | install_requires=[
40 | "ipython",
41 | "jupyter-react"
42 | ]
43 | )
44 |
--------------------------------------------------------------------------------