Markers are really small on iPhone

Dash Python
1

Hi, I created my first dash app: it plots some points (and pictures) along a river and ported to Heroku. This builds on dash leaflet so huge thanks to the team that built that.

http://tws-water-safari-2021.herokuapp.com/

I thought I was doing ok, but then I looked at the page on iPhone. The markers are tiny - almost invisible to the eye. Here is potentially the culprit - to make the page fill the screen I am using 100vw and 100vh.

def render_example1(): 
    return [
        html.H1("Texas Water Safari 2021"), 
        dl.Map(id=MAP_ID, style={'width': '100vw', 'height': '100vh'}, 
               center=  river_positions[-1] , zoom=9, children=[
            dl.TileLayer(url=mapbox,    tileSize = 512,    zoomOffset =  -1),
                ....
                ])]

For the markers, I am using leaflet-color-markers (thanks!) which are hand drawn water droplets with fixed size [41,41], but I dont think they are the problem.

The TileSize and ZoomOffset values solved a problem I had where street names didn’t scale properly with zoom. Now they do. But only on the PC. On the phone the street names remain tiny, and so do the markers.

Any pointers appreciated, thanks, Tunneller

Regards, John

2

Progress. I was using

app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        <title> "Blah" </title> 
        <meta name="description" content="Blah Blah">

to insert meta data ahead of the main dash app. But had a typo or something. Anyway, now if I add to that text

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Then it looks good, at least on my phone. Increasing the size of the initial-scale value increases the size of the markers, which is satisfying.
p.s. Also I fixed the preview by adding a bunch of og:property commands to the meta string.

3

Nice app! Happy to see dash-leaflet being used in the wild :smiley: