question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support marker styling

See original GitHub issue

It would be great if ipyleaflet supported marker styling.

Perhaps the same GeoJSON conventions as GitHub: https://help.github.com/articles/mapping-geojson-files-on-github/ ?

This would allow Ipyleaflet users to easily change marker colors and styles, fixing problems like https://github.com/reproducible-notebooks/ERDDAP_timeseries_explorer/issues/3.

Simple example:
https://github.com/rsignell-usgs/dc-wifi-social/blob/master/bars.geojson

On GitHUB this GeoJSON produces a map that looks like this: 2017-11-14_8-45-05

While the same GeoJSON in Ipyleaflet:

import urllib.request
import json
url = 'https://raw.githubusercontent.com/rsignell-usgs/dc-wifi-social/master/bars.geojson'
req = urllib.request.Request(url)
r = urllib.request.urlopen(req).read()
data = json.loads(r.decode('utf-8'))
center = [38.9, -77.05]
zoom = 12
map = ipyl.Map(center=center, zoom=zoom, layout=ipyl.Layout(width='650px', height='350px'))
feature_layer = ipyl.GeoJSON(data=data)
map.layers = [map.layers[0], feature_layer]
map

produces a map that looks like this: 2017-11-14_8-45-40

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
Oao2021commented, Sep 3, 2021

@martinRenou thanks so much. Done. Problem solved.

0reactions
martinRenoucommented, Sep 3, 2021

This is also supported and documented https://ipyleaflet.readthedocs.io/en/latest/api_reference/icon.html. You can provide your own icon.

Read more comments on GitHub >

github_iconTop Results From Across the Web

marker - CSS: Cascading Style Sheets - MDN Web Docs
The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any...
Read more >
CSS ::marker pseudo-element | Can I use... Support tables for ...
The ::marker pseudo-element allows list item markers to be styled or have their content value customized. Usage % of. all users, all tracked,...
Read more >
marker - CSS-Tricks
The ::marker pseudo-element is for styling the stylistic marker of a list element. For example, the bullet point of a default (e.g. •)...
Read more >
Custom bullets with CSS ::marker - web.dev
Chrome DevTools is ready to help you inspect, debug and modify the styles applying to ::marker pseudo elements. DevTools open and showing styles...
Read more >
Styling list markers the right way - tempertemper
And, of course, you've still got access to the list-style-type , so you can make the bullet a square or count in Roman...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found