Spectrum Spatial (SSA/LIM)

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
------------------------------

We've noticed the same thing in the latest version too, possibly due to the side panels having a minimum width.   We're also finding that any long pieces of text in a custom template are 'word wrapped' and splits text half-way through words, no matter how I set the justification:

Forty percent of users accessing our external SSA instance are doing so with a mobile phone, and their experience of this is effectively broken.

------------------------------
Darren White
Derbyshire County Council
MATLOCK
------------------------------

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

It turns out that this technique has some issues with the current version of Spectrum Spatial Analyst (2018.2):
- While the map frame is responsive, the elements inside don't behave properly when viewed from small screens like mobile phones. For example, the search box gets displaced  occupying the middle area of the screen, buttons and Organization Logo overlap, bar colors get modified.. See images below. All these issues translate in the map being useless when viewed from such devices.

From the point of view of improving user experience, it would be interesting if the top right buttons could be hidden from the embedded maps, because the functions that are found inside are not used in mobile devices and the buttons and right panel are taking half of the screen. Same applies to the top bar, which doesn't re-scale when viewed from small screen and it takes most of the frame. In fact, it doesn't make much sense that the map, which is the most important feature, re-scales (and at some point is completely hidden by the other elements), and the other elements stay the same size. It should be the other way. The map should take priority over the other elements.

Also, when viewing the map from a full SSA screen from a mobile device (so, not embedded), there are some things that do not behave properly:  Left and right panels occupy the entire width of the screen, and disabling completely the map functions, which should be the important ones.

Additionally, there are other issues that are preventing us to use Spectrum more widely across the council:
- Internal users having issues with credentials when seeing these public access maps (this has already been reported)
- Users needing to clear the cache of their browsers continuously, because otherwise the maps won't load.

Just wanted to ask if there are other users that have found the same responsiveness issues, and if they have been able to sort such issues? Also, I would like to ask to developers and engineers if there is a plan to improve responsiveness of SpectrumSpatialAnalyst in newer versions? Specially when opened inside iframes and viewed from small screens? It seems that nowadays mobile devices are being used more and more, and it feels that Spectrum should be able to adapt better to such devices.

Kind regards,

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

Hi Darren, thanks for your reply. This is definitely annoying... I hope it gets improved in future versions.

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

Original Message:
Sent: 10-16-2019 07:51
From: Darren White
Subject: Whats the road track for improving responsiveness of iframe embedded SSA maps?

We've noticed the same thing in the latest version too, possibly due to the side panels having a minimum width.   We're also finding that any long pieces of text in a custom template are 'word wrapped' and splits text half-way through words, no matter how I set the justification:

Forty percent of users accessing our external SSA instance are doing so with a mobile phone, and their experience of this is effectively broken.

------------------------------
Darren White
Derbyshire County Council
MATLOCK

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

It turns out that this technique has some issues with the current version of Spectrum Spatial Analyst (2018.2):
- While the map frame is responsive, the elements inside don't behave properly when viewed from small screens like mobile phones. For example, the search box gets displaced  occupying the middle area of the screen, buttons and Organization Logo overlap, bar colors get modified.. See images below. All these issues translate in the map being useless when viewed from such devices.

From the point of view of improving user experience, it would be interesting if the top right buttons could be hidden from the embedded maps, because the functions that are found inside are not used in mobile devices and the buttons and right panel are taking half of the screen. Same applies to the top bar, which doesn't re-scale when viewed from small screen and it takes most of the frame. In fact, it doesn't make much sense that the map, which is the most important feature, re-scales (and at some point is completely hidden by the other elements), and the other elements stay the same size. It should be the other way. The map should take priority over the other elements.

Also, when viewing the map from a full SSA screen from a mobile device (so, not embedded), there are some things that do not behave properly:  Left and right panels occupy the entire width of the screen, and disabling completely the map functions, which should be the important ones.

Additionally, there are other issues that are preventing us to use Spectrum more widely across the council:
- Internal users having issues with credentials when seeing these public access maps (this has already been reported)
- Users needing to clear the cache of their browsers continuously, because otherwise the maps won't load.

Just wanted to ask if there are other users that have found the same responsiveness issues, and if they have been able to sort such issues? Also, I would like to ask to developers and engineers if there is a plan to improve responsiveness of SpectrumSpatialAnalyst in newer versions? Specially when opened inside iframes and viewed from small screens? It seems that nowadays mobile devices are being used more and more, and it feels that Spectrum should be able to adapt better to such devices.

Kind regards,

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

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.

• 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

• Background colour of buttons: The background colour of the buttons can be changed by modifying the brand.css associated with the map project. Please see this help page https://support.pb.com/help/analyst/2018.2/admin_guide/en/concepts/branding_banner.html?hl=brand and there are inline comments in the brand.css we provide as a default (which has PB branding).

General comments

Use of JavaScript and openlayers in place of iframe approach

In 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-sites

It 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 times

I 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

It turns out that this technique has some issues with the current version of Spectrum Spatial Analyst (2018.2):
- While the map frame is responsive, the elements inside don't behave properly when viewed from small screens like mobile phones. For example, the search box gets displaced  occupying the middle area of the screen, buttons and Organization Logo overlap, bar colors get modified.. See images below. All these issues translate in the map being useless when viewed from such devices.

From the point of view of improving user experience, it would be interesting if the top right buttons could be hidden from the embedded maps, because the functions that are found inside are not used in mobile devices and the buttons and right panel are taking half of the screen. Same applies to the top bar, which doesn't re-scale when viewed from small screen and it takes most of the frame. In fact, it doesn't make much sense that the map, which is the most important feature, re-scales (and at some point is completely hidden by the other elements), and the other elements stay the same size. It should be the other way. The map should take priority over the other elements.

Also, when viewing the map from a full SSA screen from a mobile device (so, not embedded), there are some things that do not behave properly:  Left and right panels occupy the entire width of the screen, and disabling completely the map functions, which should be the important ones.

Additionally, there are other issues that are preventing us to use Spectrum more widely across the council:
- Internal users having issues with credentials when seeing these public access maps (this has already been reported)
- Users needing to clear the cache of their browsers continuously, because otherwise the maps won't load.

Just wanted to ask if there are other users that have found the same responsiveness issues, and if they have been able to sort such issues? Also, I would like to ask to developers and engineers if there is a plan to improve responsiveness of SpectrumSpatialAnalyst in newer versions? Specially when opened inside iframes and viewed from small screens? It seems that nowadays mobile devices are being used more and more, and it feels that Spectrum should be able to adapt better to such devices.

Kind regards,

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

Hi Mustafa, 
Thanks for your thorough answer. Openlayers approach is definitely what we need, and yes we're very interested in learning more about how to set it up, so any information that you can provide will be very helpful and much appreciated. The Southwark example looks fantastic, and works very well in mobile. Seeing this, it seems clear that the iFrame approach is not the best one.

Please, let me know if you need my contact details to send more info about this solution.

Kind regards,


------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

Original Message:
Sent: 10-23-2019 09:47
From: Mustafa Ismail
Subject: Whats the road track for improving responsiveness of iframe embedded SSA maps?

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

• Background colour of buttons: The background colour of the buttons can be changed by modifying the brand.css associated with the map project. Please see this help page https://support.pb.com/help/analyst/2018.2/admin_guide/en/concepts/branding_banner.html?hl=brand and there are inline comments in the brand.css we provide as a default (which has PB branding).

General comments

Use of JavaScript and openlayers in place of iframe approach

In 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-sites

It 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 times

I 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

It turns out that this technique has some issues with the current version of Spectrum Spatial Analyst (2018.2):
- While the map frame is responsive, the elements inside don't behave properly when viewed from small screens like mobile phones. For example, the search box gets displaced  occupying the middle area of the screen, buttons and Organization Logo overlap, bar colors get modified.. See images below. All these issues translate in the map being useless when viewed from such devices.

From the point of view of improving user experience, it would be interesting if the top right buttons could be hidden from the embedded maps, because the functions that are found inside are not used in mobile devices and the buttons and right panel are taking half of the screen. Same applies to the top bar, which doesn't re-scale when viewed from small screen and it takes most of the frame. In fact, it doesn't make much sense that the map, which is the most important feature, re-scales (and at some point is completely hidden by the other elements), and the other elements stay the same size. It should be the other way. The map should take priority over the other elements.

Also, when viewing the map from a full SSA screen from a mobile device (so, not embedded), there are some things that do not behave properly:  Left and right panels occupy the entire width of the screen, and disabling completely the map functions, which should be the important ones.

Additionally, there are other issues that are preventing us to use Spectrum more widely across the council:
- Internal users having issues with credentials when seeing these public access maps (this has already been reported)
- Users needing to clear the cache of their browsers continuously, because otherwise the maps won't load.

Just wanted to ask if there are other users that have found the same responsiveness issues, and if they have been able to sort such issues? Also, I would like to ask to developers and engineers if there is a plan to improve responsiveness of SpectrumSpatialAnalyst in newer versions? Specially when opened inside iframes and viewed from small screens? It seems that nowadays mobile devices are being used more and more, and it feels that Spectrum should be able to adapt better to such devices.

Kind regards,

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------

Hi Miquel 

Thanks. I have your details so will reach out via email to discuss further.

------------------------------
Mustafa Ismail
Product Architect
Pitney Bowes
London UK
------------------------------

Original Message:
Sent: 10-23-2019 10:20
From: Miquel Roy Sunyer
Subject: Whats the road track for improving responsiveness of iframe embedded SSA maps?

Hi Mustafa,
Thanks for your thorough answer. Openlayers approach is definitely what we need, and yes we're very interested in learning more about how to set it up, so any information that you can provide will be very helpful and much appreciated. The Southwark example looks fantastic, and works very well in mobile. Seeing this, it seems clear that the iFrame approach is not the best one.

Please, let me know if you need my contact details to send more info about this solution.

Kind regards,


------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD

Original Message:
Sent: 10-23-2019 09:47
From: Mustafa Ismail
Subject: Whats the road track for improving responsiveness of iframe embedded SSA maps?

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

• Background colour of buttons: The background colour of the buttons can be changed by modifying the brand.css associated with the map project. Please see this help page https://support.pb.com/help/analyst/2018.2/admin_guide/en/concepts/branding_banner.html?hl=brand and there are inline comments in the brand.css we provide as a default (which has PB branding).

General comments

Use of JavaScript and openlayers in place of iframe approach

In 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-sites

It 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 times

I 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

It turns out that this technique has some issues with the current version of Spectrum Spatial Analyst (2018.2):
- While the map frame is responsive, the elements inside don't behave properly when viewed from small screens like mobile phones. For example, the search box gets displaced  occupying the middle area of the screen, buttons and Organization Logo overlap, bar colors get modified.. See images below. All these issues translate in the map being useless when viewed from such devices.

From the point of view of improving user experience, it would be interesting if the top right buttons could be hidden from the embedded maps, because the functions that are found inside are not used in mobile devices and the buttons and right panel are taking half of the screen. Same applies to the top bar, which doesn't re-scale when viewed from small screen and it takes most of the frame. In fact, it doesn't make much sense that the map, which is the most important feature, re-scales (and at some point is completely hidden by the other elements), and the other elements stay the same size. It should be the other way. The map should take priority over the other elements.

Also, when viewing the map from a full SSA screen from a mobile device (so, not embedded), there are some things that do not behave properly:  Left and right panels occupy the entire width of the screen, and disabling completely the map functions, which should be the important ones.

Additionally, there are other issues that are preventing us to use Spectrum more widely across the council:
- Internal users having issues with credentials when seeing these public access maps (this has already been reported)
- Users needing to clear the cache of their browsers continuously, because otherwise the maps won't load.

Just wanted to ask if there are other users that have found the same responsiveness issues, and if they have been able to sort such issues? Also, I would like to ask to developers and engineers if there is a plan to improve responsiveness of SpectrumSpatialAnalyst in newer versions? Specially when opened inside iframes and viewed from small screens? It seems that nowadays mobile devices are being used more and more, and it feels that Spectrum should be able to adapt better to such devices.

Kind regards,

------------------------------
Miquel Roy Sunyer
Kirklees Council
HUDDERSFIELD
------------------------------