AnsweredAssumed Answered

pop-ups not displaying correctly on mobile device

Question asked by jpilbeam on Oct 17, 2018
Latest reply on Oct 17, 2018 by jpilbeam

I think the header is causing this. Viewing an app without a header the popups display fine on all mobile devices I've tested on. But, when I have a header the popups are way off the screen on phones and fine on a PC or I-Pad. I'm thinking there's a mobile friendly solution here, which is what my question is about. 

 

I've tested on both actual phones and through Chrome and Firefox's mobile device developer tools. Here's how the popup displays on an I-Phone 4, or any other mobile device, with a header: 

I Phone 4

 

Here's the whole pop-up viewed from my PC:

whole_popup

 

I need a header, so getting rid of it is out of the question. I've put this question to Esri last week, but haven't heard back yet. Our server doesn't yet have a security certificate for https, only http. This may be part of the problem. We're getting one soon. 

 

One other weird thing is that when I close the pop-up the entire header disappears. It comes back when I refresh.

 

Here is my entire app:

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Will County Attractions</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">


    <style>
        html,
        body,
        #viewDiv {
            overflow: hidden;
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        /*search*/
        #searchParentDiv {
            height: 100%;
        }

        /*search*/
        .esri-search {
            border: solid 3px red;
        }

        div.a {
            /* center the header*/
            text-align: center;

        }

        /* Style the header */
        header {
            background-color: whitesmoke;
            padding: 1px;
            font-size: 12px;
            font-family: 'Sans Serif';
            color: black;
        }

        .esri-legend__layer-caption {
            display: none;
        }

        /*query dropdown*/
        #infoDiv {
            background-color: black;
            color: white;
            font-family: 'Sans Serif';
            padding: 2px;
            width: 2000px;
        }

        /*query*/
        #results {
            font-weight: bolder;
        }
    </style>

    <script src="https://js.arcgis.com/4.9/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/widgets/Search",
            "esri/widgets/Home",
            "esri/widgets/Legend",
            "esri/widgets/Expand",
            "dojo/domReady!"
        ],
            function (
                Map, MapView, FeatureLayer, GraphicsLayer, Search, Home, Legend, Expand
            ) {

                //set basemap
                var map = new Map({
                    basemap: "topo",
                });

                //set map view
                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    scale: 500000,
                    center: [-87.95, 41.4],
                    //popup settings for attractions layer
                    popup: {
                        dockEnabled: true,
                        dockOptions: {
                            //set dock/undock button from on pop-up
                            buttonEnabled: false,
                            //ignore the default sizes that trigger responsive docking
                            breakpoint: false,
                        }
                    }
                });
                //***widgets***
                //home widget
                var homeBtn = new Home({
                    view: view,
                });
                view.ui.add(homeBtn, "top-left");

                //search widget
                var searchWidget = new Search({
                    view: view,
                    container: "searchDiv"
                });

                //legend widget
                var legend = new Expand({
                    content: new Legend({
                        view: view,
                        //style: "card"
                    }),
                    view: view,
                    expanded: false
                });
                view.ui.add(legend, "top-left");

                //***popups***
                //popup template
                var template = { //autocasts the new template
                    title: "<img src= {logo}><font color= '#008000'>{Name}",
                    content: [{ //set content elements in the order to display
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "Type",
                            label: "Type",
                            visible: true,
                        }, {
                            fieldName: "Address",
                            label: "Address",
                            visible: true,
                        }, {
                            fieldName: "Website",
                            label: "Website",
                            visible: true,
                        }, {
                            fieldName: "Photo",
                            label: "Photo",
                            visible: false,
                        }
                        ]
                    }, {
                        // You can set a media element within the popup as well. This
                        // can be either an image or a chart. You specify this within
                        // the mediaInfos. Similar to text elements, media can only be set within the content.
                        type: "media",
                        mediaInfos: [{
                            type: "image",
                            value: { sourceURL: "{Photo}" }
                        }]
                    }]
                };
                var template2 = { //autocasts the new template
                    title: "<font color= '#008000'>Route 66",
                    content: [{ //set content elements in the order to display
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "Photo",
                            label: "Photo",
                            visible: false,
                        }
                        ]
                    }, {
                        type: "media",
                        mediaInfos: [{
                            type: "image",
                            value: { sourceURL: "{Photo}" }
                        }]
                    }]
                };
                var template3 = { //autocasts the new template
                    title: "<font color= '#008000'>Illinois & Michigan Canal",
                    content: [{ //set content elements in the order to display
                        type: "fields",
                        fieldInfos: [{
                            fieldName: "Photo",
                            label: "Photo",
                            visible: true,
                        }
                        ]
                    }, {
                        type: "media",
                        mediaInfos: [{
                            type: "image",
                            value: { sourceURL: "{Photo}" }
                        }]
                    }]
                };

                //***feature layers***
                //add will county boundary
                var boundary = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/County_Limits/FeatureServer/0?token=yM_YxXpVn38Dir9j6MRvcz3cvEAXYr9xLwp79OTcBP9VHu_Xy6tftzewVd-a5J7ufeUZXyzLuv9QggdIFDgPGiI0yYbHiYc_0y9Yzuc-kxglDfuDzhbl5wF-ZYQPiGRl3wssCXMT1rXUMjxyJXsDMKUoOy1PrgJmzk-XgrkNu-H8Hv3WGhahXiehU0n2Dk4l3RpPc0fs4bbSG8hGP5dcl30whsg3cpG3CtFseegv4kge4WhxkjuYs8umMxleGzYr",
                    //id: "boundary",
                });
                map.add(boundary);

                //add Rt 66   
                var rt66 = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Rte_66/FeatureServer/0?token=xWHh8zKgamTMcroCxiE7AQbskmQ3_xo9xvkuxqS4opeVjboyOLCBVF_X-07v1MUHXfzB8eipB72cdUeFgicDZZR2tkk27yuo15QdnknRJaqh1rGU0XUjzwm7r3-ICbGfdyuQhitU8zI_je0RfnKDlMkgHeyKCFbcCCqGw4bb3x0TjB0P0yEth4yVNbRIAla8Pp8nnW-YBKcUWNl-dMZXG0N1OpbsD_BmtwZ_EZ_piSSyBTgFCA4DywH9r0SIKEzS",
                    // id: "rt66",
                    popupTemplate: template2,
                    outFields: ["*"]
                });
                map.add(rt66);

                //add canal
                var canal = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Illinois_and_Michigan_Canal/FeatureServer/0?token=saZNZop-3O7ZpTob147oHVUv7fVo9SntOUafwdgNf0gutXW2RYRP8q9TawAILOtVGPZDOwEK-wajGVtUOugqGMw4nfGoRfwHW1KoIPkthtC6CBAG7RPuCMqAFYmS1SCm8F1_4mv9Z_EM8y74Qaf1g62ujJrSslPuUTxkEdEYDhY9EB4wJkEARGlarw2k9iWFpMS5PPKBMNVaYDYMN7ak9d-1Qu9C_pckMtNc_Hbdjkkbt2xijQWJMKmqgK6nJrrQ",
                    popupTemplate: template3,
                    //id: "canal",
                });
                map.add(canal);

                //add preserves
                var preserves = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Will_County_Forest_Preserves/FeatureServer/0?token=PlThkEXvgHjgFl78dz4yPzYZtkRZA2WzsigDa1Ndd1-H7eSrko_OXuP90_rLhOtdTZGDPfs1pauVuhbmPiJTT9SBA1FViJc-UgfTOzocH5qJW6cxSfyS7vwXjw0NPCJJ2TP47F4VEIJktUZv7HmILjxUVGVbAA6M4WoUxUBZynGiAA25AgGwjAQhigP1sypK3yzzITSRA8TpDf0DrvXE2fGv3aVTWMeAa3hblHqU1R71lfKgtwXna200qkJnWGoN",
                    //id: "preserves",
                    //zoom: 1,
                });
                map.add(preserves);

                //add attraction feature layer
                //reference the popup template instance in the popuptmeplate property of featurelayer
                var attractions = new FeatureLayer({
                    url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=kIhkvEGZO_-PPXgeZu2nYpHz_eXYZ1NZ9DGgX7CbRZsG9vic6BHNeOiiLw37TCoGgn22dNexnPmhppQk8YeXV3f0OxYcTC1YcMINIwcbcw_e8tEpKfdkjCLL3byL640Dil7J-izJUpOFIl7Wa1L6UpZ-xZbP1oA41jmhaOC_dha3PPvm-lwnFY6ZsAk5IIdub0_nimOM2IlTUTaER45elvCg3lfmy5BVodDkggLnWQY-60sg50jYQys-QSpzDFSShttps://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Attractions/FeatureServer/0?token=brm_9OG_7AUlcufevjfLoiSCxxlcVN1g5n68z0G-L5L1gE22RKd_us2vNRlwNY1EwS0ci88AMo4Xu7Y90ScmkgC4KubpvN94IAAPMn1JdSEaDsNACutdsM0RCDxAUt6OJa5JDd3K53AI816rgB6QgMGaqNnR4A7-XNgfqKwfN9ygBw_P0uN_Mec_NPoKg19J_S91p9LwPuxjSGgYjPC6N6rJTsp206_z4Om7XtP_3uUaVHf6NRMDy4TdLMotUnxs",
                    id: "attractions",
                    visible: true,
                    popupTemplate: template,
                    outFields: ["*"]
                });
                map.add(attractions);



                //***From here down deals with the query by type dropdown menu***
                var attTypeSelect = document.getElementById("attractions");
                view.ui.add("infoDiv", "left");
                //query all features from the attractions layer
                view.when(function () {
                    return attractions.when(function () {
                        var query = attractions.createQuery();
                        return attractions.queryFeatures(query);
                    });
                })
                    .then(getValues)
                    .then(getUniqueValues)
                    .then(addToSelect);

                // return an array of all the values in the
                // Type field of the attractions layer
                function getValues(response) {
                    var features = response.features;
                    var values = features.map(function (feature) {
                        return feature.attributes.Type;
                    });
                    return values;
                }

                // return an array of unique values in
                // the Type field of the attractions layer
                function getUniqueValues(values) {
                    var uniqueValues = [];

                    values.forEach(function (item, i) {
                        if ((uniqueValues.length < 1 || uniqueValues.indexOf(item) === -1) &&
                            (item !== "")) {
                            uniqueValues.push(item);
                        }
                    });
                    return uniqueValues;
                }

                // Add the unique values to the attractions type
                // select element. This will allow the user
                // to filter attractions by type.
                function addToSelect(values) {
                    values.sort();
                    values.forEach(function (value) {
                        var option = document.createElement("option");
                        option.text = value;
                        attTypeSelect.add(option);
                    });

                    return setattractionsDefinitionExpression(attTypeSelect.value);
                }

                // set the definition expression on the attractions
                // layer to reflect the selection of the user
                function setattractionsDefinitionExpression(newValue) {
                    attractions.definitionExpression = "Type = '" + newValue + "'";
                    if (!attractions.visible) {
                        attractions.visible = true;
                    }

                    return queryForAttractionGeometries();
                }
                // set a new definitionExpression on the attractions layer
                attTypeSelect.addEventListener("change", function () {
                    var type = event.target.value;
                    setattractionsDefinitionExpression(type);
                });
                // Get all the geometries of the attractions layer
                // the createQuery() method creates a query
                // object that respects the definitionExpression
                // of the layer
                function queryForAttractionGeometries() {
                    var attractionsQuery = attractions.createQuery();

                    return attractions.queryFeatures(attractionsQuery)
                        .then(function (response) {
                            attractionsGeometries = response.features.map(function (feature) {
                                return feature.geometry;
                            });

                            return attractionsGeometries;
                        });
                }

            }
        )
    </script>

</head>

<body>
    <header>
        <p><img src="http://www.willcogis.org/website2014/gis/images/gisseal_thumbnail.png" alt="GIS Seal" style="float:left;width:48px;height:46px;">
            <div id="searchParentDiv" style="float:right;width:250px;height:46px;">
                <div id="searchDiv"></div>
            </div>
            <div class="a">
                <h1 class="local">Will County Attractions</h1>
            </div>
    </header>
    <div id="infoDiv">
        Select attractions type:
        <select id="attractions"></select>
    </div>
    <div id="viewDiv"></div>
</body>

</html>

Outcomes