Hi Miquel,
I have some comments below.
First there are some specific comments on the issues and then some more general suggestions and future road map considerations
Detailed comments
- Size of iFrame: SSA used media queries to determine layout. If the screen size (of SSA or the iframe it is placed in) is less then and equal to 768px this is considered to be a small touch screen (Tablet, Mobile) and the buttons are shown under the banner. Otherwise it is considered to be a larger or desktop screen. On your page because the iframe width is less than 768px the fourth button is shown to toggle the search box. To fix this you can set the iframe width larger or by changing the class="column medium-8" to class="column medium-9". This will avoid the fourth button showing for desktop and larger screens. If a user changes the screen size so it forces the iFrame to be below 786 pixels then it will still switch to mobile layout, by adding the fourth button.
Using column medium-8 (as now- forces mobile view on buttons)
Using column medium-9 (proposed)
- Address bar dropping but buttons remain over banner: The issue with the address bar dropping over the map is as designed. What is not working is that the buttons should also have dropped to fill the gap so they do not overlap the banner. This is a bug that has been fixed in the upcoming 2019.1 release. The expected behaviour is that the buttons should also drop. However, with the banner, buttons and address bar shown, and h fact that not much height is given to the iframe, means there is very little map left. Ideally the iframe height should be greater to alleviate this issue (for example an iframe that is similar in height to a portrait mobile phone). Here is how the mobile view looks on iPhone 6 plus
General commentsUse of JavaScript and openlayers in place of iframe approachIn general, we recommend that for embedding maps on web pages it is better to use the JavaScript / REST API for Spectrum Spatial with open layers (or another preferred library like leaflet) . Usually the use cases for embedded maps do not require the full functionality of SSA and they can be better met by embedding a map without the overhead of loading the entire SSA application into an iframe. You are then free to design the page and map size as needed without the constraints of the SSA buttons and banner.
As an example, Southwark Council have recently considered this and based on our advice have adopted using open layers and JavaScript rather than using iframes. They too had concerns about SSAs buttons appearing and wanted just a pan-able map with no other controls and specific layers shown only.
An example link is below for the new council homes pages, but please note that the example is still in development by Southwark's web team and not publicised for general public use yet.
https://training.southwark.gov.uk/housing/new-council-homes/where-we-re-building/map-of-new-council-homes-sitesIt is also important to note that Southwark's web developers have taken this on as a project as it needs some development to get working. However once one example is running the other embedded map solutions can usually follow the same approach.
You will notice that without the need to load all of SSA's angular components load times for the map are also much improved – as it shows within around 1 second
If needed I can provide you some basic code examples and further advice on how to use recent versions of open layers directly with the Spectrum REST APIs (tile, mapping and feature services) to render maps, layers and also bring feature data in as clickable vector layers into the map.
Enhancements to SSA in future road map - to support better behaviour in iframes and better load timesI also appreciate that there are cases where you want to embed SSA and require some of the out of the box functionality to be present (like legend and turning layers on or off).
For these cases we will also look into enhancing the way SSA behaves in an Iframe. Currently there is not much flexibility in re-arranging the way the three buttons and banner are laid out and we will see if this can be improved in a future release
As a standalone application a number of angular components are loaded when a user first browses to SSA which can affect load times for the map. If there are many layers on the map SSA will describe them all via the REST APIs which also adds time. I have another road map item to review how we load angular components in SSA to see if we can streamline this so there is less upfront processing.
We will consider both these in the next release for 2020 as the 2019.1 release is now in code freeze and final testing
------------------------------
Mustafa Ismail
Product Architect
Pitney Bowes
London UK
------------------------------
Original Message:
Sent: 10-14-2019 11:20
From: Miquel Roy Sunyer
Subject: Whats the road track for improving responsiveness of iframe embedded SSA maps?
Hi,
We currently embed SSA maps in iframes, like the one found here: https://www.kirklees.gov.uk/beta/planning-policy/local-plan.aspx
------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------