Map will not load when using HTTP VPN on iPad

OscarMonell — Sat, 11 Dec 2021 21:36:14 GMT

Hi all!

I have a tricky one for you!

We have developed a very simple javascript API map with the compact build of the javascript API.
The map is live on http://kartweb.staffanstorp.se/kavlingeskotsel/ and will show you
a cached map service (publically available).
But this web map also consists of a dynamic map service published on an internal server, only reachable inside the corporate network.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <title>
      Skötselytor, Kävlinge kommun
    </title>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7compact">
    </script>
    <style type="text/css">
      html, body
      {
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
      }
      .esriSimpleSlider
       div
      {
        height: 30px !important;
        width: 30px !important;
      }
    </style>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.tasks.query");

      var map;
   
   

      function init() {
        var initialExtent = new esri.geometry.Extent(113774,6176627,130538,6188481,new esri.SpatialReference({"wkid":3008}));
        map = new esri.Map("map", {
          extent: initialExtent
        });
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://kartweb.staffanstorp.se/ArcGIS/rest/services/Grundkarta/MapServer");
        map.addLayer(tiledMapServiceLayer);

        dojo.connect(map, "onLoad", function(evt) {
          //add a feature layer
        var content = "<b>Fastighet</b>: ${FASTIGHET} <br /><b>Detaljtyp</b>: ${DETALJTYP}";

      var infoTemplate = new esri.InfoTemplate("Fastighetsinformation", content);
        map.infoWindow.resize(225,75);
        var featureLayer = new esri.layers.FeatureLayer("http://172.16.0.44/ArcGIS/rest/services/Fastighetsytor/MapServer/3",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["FASTIGHET","DETALJTYP"],
          infoTemplate: infoTemplate
        });
         var rend =new esri.renderer.SimpleRenderer( new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([254,216,93,.60])));
         featureLayer.setRenderer(rend);
        featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([254,216,93,.60])));
        dojo.connect(featureLayer,'onClick',function(evt){
          //select the clicked feature
          var query = new esri.tasks.Query();
          query.geometry = evt.mapPoint;
          featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
          
        });
        map.addLayer(featureLayer);
        });
      }

  
      function orientationChanged() {
        console.log("Orientation changed: " + window.orientation);
        if(map){
          map.reposition();
          map.resize();
        }
      }


      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body onorientationchange="orientationChanged();">
    <div id="map" style="width:100%; height:100%;">
    </div>
  </body>

</html>

My client would like to access the map through an iPad (or other mobile device) outside the corporate network.
The publically accessible parts of the map loads without problem on any mobile device, so the code seems to function well.

To access the internal parts outside the corporate network I asked my IT-department to setup some kind of VPN-access to reach all resources.
My IT-department are using a HTTPS login page. I am then presented to "my" resources, among them an URL to the above map (https://vpn.kavlinge.se/kavlingeskotsel/,DanaInfo=kartweb.staffanstorp.se+).
All resources within the webpage has been setup to be accepted on port 80, among them http://serverapi.arcgisonline.com.
This works very well in Internet Explorer and Firefox, but not in Apple Safari och Google Chrome.

[ATTACH=CONFIG]12272[/ATTACH]
This a debugging image from iPad Safari when trying to access the web site.

My IT department says they have done what they can do - port 80 is open for the requested resources.

Are Safari using any other ports than 80 to create the map?

I'm very grateful for any response to this!
Am I perhaps using the wrong approach for my problem?
What other solutions are available?

topic Map will not load when using HTTP VPN on iPad in ArcGIS JavaScript Maps SDK Questions

Map will not load when using HTTP VPN on iPad