Comments (5)
I first explored the possibility of a split panel slider with geemap but it turned out it's only compatible with a pre-hardcoded list of basemaps and doesn't hook new raster layers. There may be a way but so far it's too time consuming trying to figure it out the geemap way.
Opted for folium's DualMap plugin, I managed to setup a dual map as the main map, since the whole gist of this project is to be able to compare bewteen the NDVI of the same geographic area on two different periods. So far I was able to figure out how to add which layer to which side of the map, it was a bit tricky but it worked for the prototyping phase, here's a preview:
I still have to properly configure the map and attach the appropriate layers and basemaps to the right side of the map.
from ndvi-viewer.
Layers order bug
It seems that DualMap has a weird bug where the order of layers is not the same on both maps when adding WmsTileLayer
layers to both maps using layerVariable.add_to(m)
.
I tried experementing with the layers order, adding the layers twice (created separate variables using the same list of wms tiles); once to the right map, once to the left map using add_to(m.m1)
& add_to(m.m2)
but still, the result is always messedup order, in different ways.
m = folium.plugins.DualMap(location=[36.40, 2.80], tiles='Open Street Map', zoom_start=10, control_scale=True)
### BASEMAPS START
## Primary basemaps
# CartoDB Dark Matter basemap
b1 = folium.TileLayer('cartodbdark_matter', name='Dark Matter Basemap')
b1.add_to(m)
## WMS tiles basemaps
# OSM CyclOSM basemap
b2 = WmsTileLayer(
url=('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'),
layers=None,
name='Topography Basemap', # layer name to display on layer panel
attr='Topography Map',
show=False
)
b2.add_to(m)
# ##### ESRI sattelite imagery service
b3 = WmsTileLayer(
url=('http://services.arcgisonline.com/arcgis/rest/services/World_Imagery' + '/MapServer/tile/{z}/{y}/{x}'),
layers=None,
name='ESRI Sattelite Imagery',
attr='ESRI World Imagery',
show=False
)
b3.add_to(m)
# ##### Google sattelite imagery service
b4 = WmsTileLayer(
url=('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}'),
layers=None,
name='Google Sattelite Imagery',
attr='Google',
show=False
)
b4.add_to(m)
from ndvi-viewer.
cyclosm wms tile used as topography map doesn't render tiles beyond zoom level 9 in dual map mode.
from ndvi-viewer.
DualMap lacks responsivity (unresizable width according to screen) even with injected css (unresizable height)
from ndvi-viewer.
This is a nightmare.
- DualMap won't work through
folium.plugins.DualMap.add_ee_layer = add_ee_layer
alone due toAttributeError: 'Map' object has no attribute 'add_ee_layer'
error unlessfolium.Map.add_ee_layer = add_ee_layer
is added. - Using st_folium() cayse the DualMap to not render, same for the LayerControl (bug)
- DualMap only renders with folium_static()
- Map not responsive: Can't resize map with folium_static(): height is preset and makes it a ngithmare for screen responsivity
- Unable to target specific generated div element with injected custom CSS through st.markdown() and through JavaScript
Gonna switch back to single map for now untill I figure out a fix with folium-streamlit.
See: Error with st_folium and not with folium_static #139
from ndvi-viewer.
Related Issues (20)
- UI: Legend HOT 1
- Processing imagery: Generating NDVI result HOT 1
- Deployement HOT 1
- Secondary basemaps πΊοΈ HOT 1
- Processing imagery: NDVI supervised classification HOT 1
- Update README.md
- User input: date time - 2: time range HOT 1
- General info section HOT 1
- User input: cloud coverge percentage HOT 1
- UI: layout enhancement and css loading optimization
- UI/UX - Accessibility: colorblind-friendly map color palettes
- Input: uplaoded geojson with multiple geometries HOT 7
- Dynamic map focus
- Data Profiling and Stats
- Saving Analysis Result - Map Screenshot Save/Export HOT 3
- Error HOT 4
- App optimization - Resource Consumption - Streamlit Cloud free tier Crash
- App crashes due to absent B8 when trying to calculate Nomalized Difference with absent data from current day
- GEE: image collection 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 ndvi-viewer.