Map will not load when using HTTP VPN on iPad

Discussion created by oscar.monellesri-se-esridist Employee on Feb 28, 2012
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">
    <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" />
      Skötselytor, Kävlinge kommun
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7compact">
    <style type="text/css">
      html, body
        height: 100%;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 30px !important;
        width: 30px !important;
    <script type="text/javascript">

      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");

        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);
        var featureLayer = new esri.layers.FeatureLayer("",{
          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.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([254,216,93,.60])));
          //select the clicked feature
          var query = new esri.tasks.Query();
          query.geometry = evt.mapPoint;

      function orientationChanged() {
        console.log("Orientation changed: " + window.orientation);

  <body onorientationchange="orientationChanged();">
    <div id="map" style="width:100%; height:100%;">


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.

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?