Leaflet doesn't show on every screen sizes


(kerguelen) #1

Hello to all and Merry Xmas !
I’m working on using Leaflet.js framework to use maps ans GIS in Hype. Everything works well so far apart from one thing that doesn’t work btw. In the provided file, map is correctly displaying in the Portrait iPad Layout screen size but it doesn’t show at all in the Untitled Layout screen size.
I first created the Untitled Layout where the map was correctly showing. But it ceased to be working in this layout after I created the Portrait iPad layout.
Any clue about this ?
Leaflet & Layouts Test.hype.zip (58.5 KB)
Thanks for your help.


#2

@kerguelen
And Merry Christmas right back to You!

You are using the same ID for the map (leaflet) container in both layouts… they need to be different.


(kerguelen) #3

Thanks for your answer. Yes, that’s what I’ve been told. But, if I give 2 ID’s for the map, how can I change the ID according what screen size is displayed ?


#4

Hype Demo: Leaflet & Layouts Test JHSv1.hype.zip (58.0 KB)

Let’s change the ID in the innerHTML of the “Text” element in each layout (both currently have the ID of “map”) to a sequential numbering: e.g. “map1” & “map2”.


Give each layout a sequential numerical ending to match the corresponding “Text” element ID - i.e. your first layout ends with “1”. (I would also use a dash for easier reading.)

Using the current names of your layouts the nomenclature would be:
“Untitled Layout-1” & “Portrait iPad-2”


Now in your function “mapSetup” I’ve added two lines in the beginning. The first line extracts the number of the scene and the second line adds it to the text string “map” which will create a variable to be used as the ID that matches the corresponding “Text” element:

whatMapNum = hypeDocument.currentLayoutName().slice(-1);	
whatMap = "map"+whatMapNum;
	
var map = L.map(whatMap).setView([-27.30, 152.76], 10);
	
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 18
}).addTo(map);

(kerguelen) #5

@JimScott, After Jonathan’s answer on the same question asked to him through email, that’s the workaround I thought about but wasn’t able to set it up. Thanks a lot ! I’ll give it a try and this will allow me to keep on working with this template.


(Hans-Gerd Claßen) #6

why not use a persistant symbol, so the map only has to be loaded once…¿


(Greg) #7

I Like It, it works the best. Thanks Hans.[quote=“h_classen, post:6, topic:11944”]
why not use a persistant symbol
[/quote]


(kerguelen) #8

I tried the persistant symbol solution but I can’t resize it from one scene to another


(Jonathan Deutsch) #9

It may not be what you want, but you should be able to use the scale method to resize the persistent symbol on each scene. (Use the command key to be in transform mode when resizing).


#10

@kerguelen

All the following is based on using a “Persistent Symbol”…
and so the Persistent Symbol chickens come home to roost. :rolling_eyes:

When I tried @jonathan’s suggestion I came up with an unsatisfactory outcome (in my experiments). The scale of the map is no longer as it is set in the “mapSetup” function, and the map appears twice in the larger layout when the window is resized back and forth, shown in Fig.1 below.


Fig.1: “Portrait iPad” layout after window resizing (back and forth)



**_We could take an alternative approach - one that is tailor-made for each layout._**

Note: The following reads longer than it takes to do; actual implementation is pretty quick.

Hype Project Demo: Leaflet & Layouts Test JHSv2.hype.zip (58.3 KB)


The main reason why we are doing the steps outlined below is so we can set the default “point of interest” for each layout; otherwise, if the maps are significantly different in size (as is the case here), only one of the layout’s map will properly display this view.


1) In each layout adjust the “bounding box” handles for the Symbol as needed - no scaling required.

The “Text” element needs to be the size of the largest layout - in this case the “Portrait iPad” layout. When You size the “Text” element in the “Portrait iPad” layout the “Text” element in the “Untitled Layout” will also be resized - way larger than needed; so set the “Content Overflow” for the Symbol in “Untitled Layout” to Hidden (in the “Metrics Inspector”).


2) Remove the ID from one of the interior “Text” elements - the “Text” element in the other layout will be automatically removed also.


3) Label the Persistent Symbol with the ID “map” (in the “Identity Inspector”).


4) Label each layout, as described in my previous post, with a sequential number at the end… e.g. “Untitled Layout-1”, “Portrait iPad-2”, etc.

We will now use this number to set the map coordinates for the corresponding layout as in the below script for “mapSetup()”… assuming “Brisbane” is the default point of interest.

whatLayout = hypeDocument.currentLayoutName().slice(-1);
	
	if (whatLayout == "1") {
		var map = L.map('map').setView([-27.45, 153.00], 10);
	} else if (whatLayout == "2") {
		var map = L.map('map').setView([-27.30, 152.76], 10);
	}
	
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    maxZoom: 18
	}).addTo(map);

(Hans-Gerd Claßen) #11

LeafletLayouts_pSymbol.hype.zip (52.9 KB)
please always remember to uncheck ‘protect from external styles’ otherwise your custom css won’t load …

have a best day :slight_smile:


(kerguelen) #12

@h_classen, I really love your approach. And I’m really interested in @JimScott approach too.
The only thing with persistant symbol is that apparently, map width can only be 100%, no less, with a white border, for example.

This map is used as a base to add overlay maps on it. For the computer size of the map, I can easily change these overlays’ opacity using a slider range but this component gets too small for fingers on a telephone screen. So, I’m planning to implement 'opacity buttons" for layers, i.e. buttons that change opacity continually (from 0 to 100 and then from 100 to 0, and back) when pressed. The user stops pressing when desired opacity is reached.

One of the overlay layer displays a .wms online database (cadastre, or land survey, or property map) showing land property. I’ll need a research form requesting the number of a piece of land to search the distant database and show this piece of land on the map.

This is a long term side project I’ve been working on to help the population of a small french island that has a lot of problem dealing with the scattering of land property.

LeafletLayouts_pSymbol_test2.hype.zip (62.8 KB)

I’ll keep you posted. If ideas come straight to your mind, I’ll be glad to hear them too :slight_smile:


#13

I think I can change this - but I do not have time at this exact moment.

Your project sounds very interesting - nice effect on the overlay! :+1:


To me the “drawback” with persistent symbols (in this particular use) is it limits your options as to what can be displayed in different layouts. I put drawback in quotes because the idea of a persistent symbol is it’s persistent.

As I understand Hans’ idea for using a persistent symbol: it limits the need for reloading the map. I have a very slow internet connection and I have no problem with the reload operation (speed) - a slow cell connection might be more problematic - I don’t know as I have not experimented with it (I have no cell service where I live).


(kerguelen) #14

Actually, I think there’s a Leaflet plugin that allows local storage of selected portions of files. That would help when connection is not good enough.

But my major concern is about UI and UX. The app/webapp is to be designed for people who are not familiar with computers. They need something easily understandable and fitting their particular needs. The municipal person in charge of the cadastre is 85 yo.


#15

@kerguelen

Try this on for size to see how it works for You - there might be some adjustments needed which are better suited for your purposes.

Hype Project: LeafletLayouts_pSymbol Hans JHSv2.hype.zip (58.9 KB)

My adjustments~changes are very straightforward…


1) Selected the “Height” scaling in the “Scene Inspector”

Please see note at the end of step “3)” regarding this change.



2) Changed the Symbol Width~Height dimensions and the size of the “Text” element

From (Hans version)

To (JHS new version)


3) Changed the “Flexible Layout” to include “Height” scaling (vertical arrow).
My reason for this is the default "Untitled 1 " layout will still show the intended size - but if the window is increased vertically You will get more map - not white space… and in this scenario it translates to the “Portrait iPad” layout with less of a visual jolt. This is an optional step - see if it works in your scheme of things.

Note: If You decide not to use this change You do not need to implement step “1)”.


(kerguelen) #16

Hi @JimScott
Sorry for late answer. Happy new year to everyone, though.
Thanks for your tutorial, I gave it a try. It works for full screen and I’l try to adapt it for a part-size screen size.