default map extent

[nicodebo]

Hi,
First, thank you for syntool web portal.
I would like to know if it is possible to define a default map extent (i.e. position the map on France when a user visit the web portal) ?

Have a nice day

[Sylvain Herlédan]

Hi Nicolas,

There are two possible ways to achieve this result, depending on whether you want to let users navigate out of the boundaries you define or not.

Please note that for both options:

• the extent must be expressed with coordinates in the same projection as the one used by the Syntool portal (EPSG:3857 for Web Mercator)
  
• the boundaries of the extent must be provided in the following order: left, bottom, right, top.
  
• You have to regenerate the Web portal with the developer/generate.sh script for the changes to take effect
  

Option 1: keeping the view within boundaries

If you want to keep the map viewport locked within the boundaries you defined, i.e. users can still pan and zoom the map as long as the viewport stays within the limits, you simply have to change the value of the maxExtent variable in the config.js file and set it to the extent of your choice:

Code:

var maxExtent = [-1819234.3113266, 4619400.2787615, 2867272.7662418, 7278185.8702629];

Option 2: letting users navigate out of the boundaries
It is possible to implement this by editing the footer.html file which is in the same directory as the configuration of your portal. The content of this file is included at the end of the portal web page so it is the best place to put customization scripts.

For example you can tell Syntool to adapt the map extent automatically to get a view centered on France by putting the following code in the footer.html file:

Code:

<script type="text/javascript">
(function() {
 var centerOnFrance = function() {
   var france_bounds = [-1819234.3113266, 4619400.2787615, 2867272.7662418, 7278185.8702629];
   if (window.map.zoomToExtent) {
     window.map.zoomToExtent(france_bounds, true);
   } else {
     setTimeout(centerOnFrance, 100);
   }
 };
 window.addEventListener('DOMContentLoaded', centerOnFrance);
})();
</script>

[nicodebo]

Thank you very much. The option 2 is exactly what I was looking for.