Comments (12)
@bchowTWC I like that idea too! In the meantime, if you need a quick hack to hide the legend, you can override the legend block at the top of your choropleth HTML template (this is what is done for heatmaps currently):
{% block legend %}
document.getElementById('legend').style.visibility = 'hidden';
{% endblock legend %}
from mapboxgl-jupyter.
@ryanbaumann I'm thinking of moving creation of the legend div into the legend creation function.
function calcCircleColorLegend(myColorStops, title) {
// create legend
var legend = document.createElement('div');
legend.className = 'legend';
legend.id = 'legend';
document.body.appendChild(legend);
...
and removing <div id='legend' class='legend'></div>
from main.html. This way we don't have to explicitly select the div and hide it for cases where no legend is desired. Any thoughts on drawbacks to doing this?
from mapboxgl-jupyter.
I think this could go well with generalizing the function for creating the legend, too! Right now I have a hack in the ChoroplethViz class that styles the legend symbols as rounded squares instead of circles. Are you thinking of inline CSS with Jupyter or defining more style components in viz.py? I'm happy to work on this a bit.
from mapboxgl-jupyter.
Yes, that would be excellent @akacarlyann. There's lots of inspiration to take for great design - are you confident in the design direction you'd like to take, or would you prefer to start with some suggestions on this thread?
As far as how to compile the CSS - if we're going to make the stylesheet bigger, I'd think of breaking it out into its own style
Jinja template block. Then can insert the needed css into the block for the viz.
Alternatively, if there isn't much more css, we can just inline all the css into main.html
and use different CSS classes to control the legend style to use.
from mapboxgl-jupyter.
If you've got an idea in mind, I'm happy to take a look. Otherwise my thought was to start with centering the legend title and possibly adding a color-background to the header. Otherwise, feel free to point me in a different direction.
from mapboxgl-jupyter.
I like those. Other ideas from the Mapbox CSS library, especially for continuous scales:
https://www.mapbox.com/assembly/examples/legends/
from mapboxgl-jupyter.
Apologies for hijacking, didn't want to create another issue on a related topic...
Background: one of my use cases involves dropping a polygon on the map from a single geojson feature and filling in the enclosed area. I currently (mis)use a ChoroplethViz
to accomplish that, using a single colour stop and a property that's common across all my features. That almost gets the job done for me; the only "issue" is that the legend doesn't show anything useful, since I'm misusing the ChoroplethViz
type.
Question: would there be any interest in having a way to hide the legend?
I've a few ideas, the simplest being a boolean should_show_legend=True
argument in either the constructor or ChoroplethViz.show()
, but I wanted to check with y'all first in case the solution to my problem is more coffee already hiding in plain sight somewhere in the documentation. Which I swear I've read several times over.
Thanks!
from mapboxgl-jupyter.
I'm in favor of a legend=True
option @bchowTWC, where the default parameter value is True
. This could be added as a base parameter to all visualizations, along with style
and access_token
.
from mapboxgl-jupyter.
Work in progress at #100 :)
from mapboxgl-jupyter.
Agree with that approach @akacarlyann - generate the div in the javascript function instead of using more CSS magic to conditionally show/hide the legend
from mapboxgl-jupyter.
For next steps on this, I think the best things would be:
- smart text wrapping/scaling in legend item text
- a variable radius legend for graduated circle viz
- variable width legend for linestring viz
- some other support for multi-variable legends
- legend placement controls (currently always lower right of map)
from mapboxgl-jupyter.
Closed in #100 - let's open a new issue to track improvements @akacarlyann
from mapboxgl-jupyter.
Related Issues (20)
- Mapbox Jupyter doesn't render ChoroplethViz HOT 7
- New feature to edit colour legends title
- TemplateNotFound in conda environment HOT 7
- Coverage/Coveralls hangs indefinitely HOT 1
- Examples don't work as shown, due to Jupyter "Blocking request with no referer" HOT 5
- Support MapboxGL 'step' expression for color and height function types HOT 5
- Is there a way to hide the "token = os.getenv('MAPBOX_ACCESS_TOKEN')" HOT 5
- Will Mapbox add support for JupyterLab? HOT 6
- Please add interactive callback events to this widget.
- Adding search for map HOT 1
- Heat Map in time HOT 3
- Subplot support HOT 4
- How to hide the legends for GraduatedCircleViz? HOT 1
- Example displays base map but not points HOT 2
- any chance multiple viz can be combined in a single view? HOT 1
- viz.create_html() rounds lat/lng to 4 decimal places which drops accuracy to 11m
- How to hide null/Nan values on a CircleViz ? HOT 3
- Uncaught Error: An API access token is required to use Mapbox GL.
- Mapboxgl cannot be imported on Windows 10 after conda install
- mapbox doesn't render points on jupyter notebook running on Databricks. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mapboxgl-jupyter.