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.
1 Like
@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.
1 Like
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 ?
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);
1 Like
@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.
why not use a persistant symbol, so the map only has to be loaded once…¿
1 Like
I Like It, it works the best. Thanks Hans.
1 Like
I tried the persistant symbol solution but I can’t resize it from one scene to another
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).
1 Like
All the following is based on using a “Persistent Symbol”…
and so the Persistent Symbol chickens come home to roost. 
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);
2 Likes
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 
1 Like
@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
1 Like
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! 
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).
1 Like
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.
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)".
1 Like
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.
1 Like
Hi @JimScott,
It’s been a while !
I’m still on my leaflet map and didn’t really manage to make this map-adaptating-to-layout system work as it should, especially when symbol embedding map is making a complex composition with other objects. Have you an idea about it ?
And also, I don’t understand why, when I add to my scene an HTML widget, map is broken.
any tip would be appreciated. Thanks !
MapLayout.zip (426.8 KB)
What specifically are You expecting the map to do. What You have set-up appears to me to work fine but I am guessing at your intent.
Ditto with the HTML widget. What does "broken" mean in this circumstance? The map did not function any differently with or with out an inserted widget in my brief trials (Note: I did not see a widget in your example, if there was one I missed it). But there may be something You are expecting it to do that I'm not aware of... or You are placing it in a particular circumstance. For instance I just placed the widget in the "Untitled Layout" as a unique element - not in a Symbol. You were not specific about the circumstances so I just guessed.
It is always good to provide detail of the issue(s) in addition to a general statement. You know your project well, but people who do not have the same familiarity with it usually need more information.
You will get better, more accurate responses, in a timely fashion the less guess work Forum members have to do. 
1 Like
Hi @JimScott
You’re perfectly right. I forgot to take distance and take time to explain better what precisely all this is about.
About the map display
I made two layouts.
1- Untitled Layout which is meant for desktop and large screens works fine : Map symbol and map container (inside map symbol) are the same size and perfectly fit to the window I managed for them on the layout. Leaflet credits appear where they should at the bottom left of the window and, when clicked, red dot positions itself correctly at the center of the window.
2- iPhone layout : I can resize map symbol to fit its new space on screen but map container’s size can’t be change. So, when map is displayed, Leaflet credits don’t appear at the bottom left and a clicked red dot doesn’t zoom to a center position as it should be. This tells me that the map displayed exceeds in size the layout size and continues right and down the layout. How can I fix this ?
About the widget HTML
When I add a widget HTML on the scene, different things happen depending on where I put it on the screen (I haven’t been able to find any logic to it) :
- Things are ok, map is displayed as it is without widget
- Things go wrong and only part of the map is displayed (see enclosed image). Apparently, this only happens with Safari (could be a Safari bug).
I’m grateful for your time. Hope this sounds clearer to you now 
Thank You for clarifying things further 
I will be out of my office for most of the day. I will check into your questions when I return. Perhaps someone will respond before that time. 
1 Like