Giter Club home page Giter Club logo

trame-leaflet's Introduction

trame-leaflet

trame-leaflet extends trame widgets with components from vue-leaflet.

This package is under the same MIT License as Vue-Leaflet which that library embeds.

Leaflet integration in trame allows you to create map views with useful widgets.

How to use it?

Using the Python library

from trame.widgets import leaflet

trame-leaflet's People

Contributors

actions-user avatar cardinalgeo avatar jourdain avatar psavery avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

trame-leaflet's Issues

Removing doubled-up tiles

Hello!

As you can see in the example video below, at least three images are stacked on top of each other (note image to the right and image peeking out at the bottom) when I expect only one image to be present. Do you have any suggestions on how to remove the two back images? I can't seem to identify a parameter in either leaflet.LMap or leaflet.LTileLayer that will resolve this.

Screen.Recording.2023-02-09.at.8.31.53.PM.mov

Increase zoom level so that tile layer doesn't disappear upon zooming in

Hello again Trame Team!

I'm attempting to increase the level to which I can zoom, such that I can continue zooming into a tile rather than everything "going grey" (i.e., the tile layer disappearing). This issue is illustrated by the following screen video:

Screen.Recording.2023-02-09.at.7.59.21.PM.mov

In the most extreme sense, I'd like to be able to zoom until just one pixel fills the screen.
I've tried changing the maxZoom parameter as follows, but without luck:

with leaflet.LMap(zoom=("zoom", 1), maxZoom=15):
    # tiles
    image_viewer = leaflet.LTileLayer(url=("tile_url", "/tile/{z}/{x}/{y}.png"), noWrap=True)

and

with leaflet.LMap(zoom=("zoom", 1)):
    # tiles
    image_viewer = leaflet.LTileLayer(url=("tile_url", "/tile/{z}/{x}/{y}.png"), noWrap=True, maxZoom=15)

Do you have any suggestions?

Interaction events

Hey folks!

I'd like to be able to set up interaction events where a mouse click outputs the coordinates of the click position. The leaflet documentation here indicates this is possible on their side, as is the case for vue-leaflet (e.g., tip in the docs here and example here). However, I've been unable to get this working in trame-leaflet. What is required to set this up (e.g., how do I pass the function corresponding to the event click, for say, LMap)?

Update the URL of LTileLayer

After createing a LTileLayer you cannot update the URL of the tile source. This is pretty critical. The following does not seem to work

layer = = LTileLayer(url='/{z}/{x}/{y}.png?filename=foo')

...

layer.url = '/{z}/{x}/{y}.png?filename=bar'

LTileLayer is missing parameters

See https://leafletjs.com/reference.html#tilelayer for the full API to leafelt's tile layer

It appears to me that minZoom and maxZoom are missing from this wrapping:

class LTileLayer(HtmlElement):
def __init__(self, **kwargs):
super().__init__("l-tile-layer", **kwargs)
self._attr_names += [
"pane",
"attribution",
"name",
"layerType",
"visible",
"opacity",
"zIndex",
"tileSize",
"noWrap",
"tms",
"subdomains",
"detectRetina",
"options",
"url",
"tileLayerClass",
]

How can style parameters be changed dynamically?

Hi all,

With django-large-image, styling can be changed dynamically using the request url (e.g., http://localhost:8000/api/image-file/${imageId}/data/thumbnail.png?band=3&palette=viridis&min=50&max=250, given in the example here). Is there a similar way to update styling with trame-leaflet (e.g., with a dropdown)? I've tried adding parameters to the url (e.g., "/tile/{z}/{x}/{y}.png?palette=twilight_shifted") but without success.

Also, am I comparing apples to oranges? Should this question instead be posted in large-image?

Thanks!

Dropdown menu overlapped by tile layer

Hi Trame Team!

How do I ensure that the dropdown options are in front of the tile layer rather than behind, as they currently are in the screenshot below?

Screen Shot 2023-02-09 at 6 53 43 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.