ios – exploding map div on faucet on ipad

March 2, 2023

4

I am developping a leaflet app for cellular gadgets. It gave the impression to be working OK until as we speak. On an Ipad the map stays within the div I set for it, untill i faucet on the map or a marker. Then the map fills the entire display and hyperlinks grow to be inoperable.
I managed to put a button over the map, however on tapping the map makes it dissappear off the display. Not underneath the map however dissappeared.
that is the hyperlink

https://www.normandy-tour-guide.com/itin/bob1234/map.php

any solutions can be most welcome

      <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Appropriate" content material="IE=edge">
        <meta title="viewport" content material="width=device-width, initial-scale=1.0">
        <title>Band of Brothers</title>
    
        <!--leaflet css -->
        <hyperlink rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
            integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
        <hyperlink rel="stylesheet" href="../css/leaflet-routing-machine.css" />
    
    
        <hyperlink rel="stylesheet" sort="textual content/css" href="../css/map.css">
        <script>
        let web page = doc.cookie;
        console.log(web page);
        let cName = "web page";
        console.log(cName);
    
    
        perform getCookie(cName) {
            const title = cName + "=";
            const cDecoded = decodeURIComponent(doc.cookie); //to watch out
            const cArr = cDecoded.break up('; ');
            let res;
            cArr.forEach(val => {
                if (val.indexOf(title) === 0) res = val.substring(title.size);
            })
            console.log(cName);
            console.log(res);
            return res
        }
        getCookie("web page");
        </script>
        <?php
    
    $web page = $_COOKIE["page"];
    ?>
        <script>
        web page = <?php echo $web page; ?>;
        console.log("which pâge" + web page);
        </script>
    
    
    </head>
    
    <physique>
        <div class="title navmap ">
            <h1>Band of Brothers Itinerary</h1>
        </div>
        <div class="navbar navmap ">
            <ul>
                <li><a href="index.php">HOME</a></li>
                <li><a href="stands.php">STANDS</a></li>
                <li><a href="poi.php">POIs</a></li>
            </ul>
        </div>
    
        <div id="map">(
            <?php
        //echo " Cookie" . $_COOKIE["n_data"];
        $N_DATA = $_COOKIE["n_data"];
        //echo "information ".$N_DATA;
    
        if (isset($_GET['choice'])){
        $selection = $_GET['choice'];
        //echo $selection;
    }else{
        $selection = "'a'";
        //echo $selection;
    }
      ?>
             <script>
            let selection = "a";
            selection = <?php echo $selection;?>;
            //alert(selection);
            console.log('CHOICE' + selection);
            </script> 
            <button id="refreshButton">
            Button
          </button>
        </div>
    
        <!-- Be sure to put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    
        <script src="../js/leaflet-routing-machine.js"></script>
        <script src="../js/Management.Geocoder.js"></script>
        <script src="../js/config.js"></script>
        <script src="../js/bob-carentan.js"></script>
    
        <!-- geojson data-->
        <script src="../js/information.js" sort="textual content/javascript"></script>
        <script src="../js/bob-resto.js" sort="textual content/javascript"></script>
        <script src="../js/bob-carentan.js" sort="textual content/javascript"></script>
        <script src="../js/map.js" sort="textual content/javascript"></script>
    
    
        </script>
    
        <script>
        //console.log("Check")
        </script>
    
    </physique>
    
    </html>

and that is map.js

//var selection = "route";
//console.log(selection);

var map = L.map('map').setView([49.360241, -1.275101], 12);
/*L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',*/ 
L.tileLayer('../tiles/bob1/{z}/{x}/{y}.png',
{
maxZoom: 15,
minZoom: 11,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

}).addTo(map);





/* add hyperlinks to popup */

perform onEachFeature(characteristic, layer) {
    let popupContent = ` ${characteristic.properties.Stand} </br>`; 
    if(characteristic.properties.standType=="Stand") {    // && characteristic.properties.popupContent) {
        // popupContent += characteristic.properties.popupContent ;
        popupContent += '<a href="'+characteristic.properties.Nu+'.php"> Click on for Data </a> ';   
    }
    if(characteristic.properties.phone) {
        // popupContent = characteristic.properties.Stand + '</br>';
        popupContent += characteristic.properties.phone;
    }
    layer.bindPopup(popupContent);
    //console.log(characteristic.properties.Nu   )
    //console.log( stands.options.size   )
}

// perform onEachFeatureResto(characteristic, layer) {
//     let popupContent = ` ${characteristic.properties.Stand} </br>`; 
//     if (characteristic.properties){    // && characteristic.properties.popupContent) {
//         // popupContent += characteristic.properties.popupContent ;
//         popupContent += characteristic.properties.phone;   
//     }
//     layer.bindPopup(popupContent);
//     //console.log(characteristic.properties.Nu   )
//     //console.log( stands.options.size   )
// }



/* Add spherical markers and tooltips */

const standLayer = L.geoJSON(stands, {

    fashion(characteristic) {
        return characteristic.properties && characteristic.properties.fashion;
    },

    onEachFeature,

    pointToLayer(characteristic, latlng) {
        label = String(characteristic.properties.Nu) // Should convert to string, .bindTooltip cannot use straight 'characteristic.properties.attribute'
 
        return L.circleMarker(latlng, {
            radius: 15,
            fillColor: '#079',
            coloration: '#000',
            zindex: 100,
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        }).bindTooltip(label, {everlasting: true, offset: [10, 0] }).openTooltip();
    }
}).addTo(map);

if (selection=='relaxation'){
const restLayer = L.geoJSON(resto, {

    fashion(characteristic) {
        return characteristic.properties && characteristic.properties.fashion;
    },

    onEachFeature,

    pointToLayer(characteristic, latlng) {
        label = (characteristic.properties.Stand) // 'characteristic.properties.attribute'
 
       
            var smallIcon = new L.Icon({
                iconSize: [20, 20],
                iconAnchor: [13, 27],
                popupAnchor: [1, -24],
                iconUrl: '../photos/icons/resto.png'
            });
            return L.marker(latlng, {icon: smallIcon});
        
    
        }
}).addTo(map); 

}

if (selection=='wc'){
    const restLayer = L.geoJSON(wc, {
    
        fashion(characteristic) {
            return characteristic.properties && characteristic.properties.fashion;
        },
    
        onEachFeature,
    
        pointToLayer(characteristic, latlng) {
            label = (characteristic.properties.Stand) // 'characteristic.properties.attribute'
     
           
                var smallIcon = new L.Icon({
                    iconSize: [30, 30],
                    iconAnchor: [13, 27],
                    popupAnchor: [1, -24],
                    iconUrl: '../photos/icons/wc.png'
                });
                return L.marker(latlng, {icon: smallIcon});
            
        
            }
    }).addTo(map); 
    
    }
    

    if (selection=='atm'){
        const restLayer = L.geoJSON(atm, {
        
            fashion(characteristic) {
                return characteristic.properties && characteristic.properties.fashion;
            },
        
            onEachFeature,
        
            pointToLayer(characteristic, latlng) {
                label = (characteristic.properties.Stand) // 'characteristic.properties.attribute'
         
               
                    var smallIcon = new L.Icon({
                        iconSize: [30, 30],
                        iconAnchor: [13, 27],
                        popupAnchor: [1, -24],
                        iconUrl: '../photos/icons/atm.png'
                    });
                    return L.marker(latlng, {icon: smallIcon});
                
            
                }
        }).addTo(map); 
        
        }

        if (selection=='mus'){
            const restLayer = L.geoJSON(mus, {
            
                fashion(characteristic) {
                    return characteristic.properties && characteristic.properties.fashion;
                },
            
                onEachFeature,
            
                pointToLayer(characteristic, latlng) {
                    label = (characteristic.properties.Stand) // 'characteristic.properties.attribute'
             
                   
                        var smallIcon = new L.Icon({
                            iconSize: [30, 30],
                            iconAnchor: [13, 27],
                            popupAnchor: [1, -24],
                            iconUrl: '../photos/icons/mus.png'
                        });
                        return L.marker(latlng, {icon: smallIcon});
                    
                
                    }
            }).addTo(map); 
            
            }
    


const bobcarLayer = L.geoJSON(bobcar);
bobcarLayer.addTo(map);



if (selection=="route"){
    // sending web page
    let p = getCookie("web page");
    // bounce interval
   let p2 = parseInt(p);
    if (p==7||p==5||p==12||p==23){  p2=parseInt(p)+1}
    
    console.log("PAGE="+web page)
    var management = L.Routing.management(L.prolong(window.lrmConfig, {
        // waypoints: [
        //  L.latLng(49.3489, -1.25254),    
        //  L.latLng(49.32831, -1.26857)   
        // ],
       
       
        waypoints: [
            L.latLng(stands.features[p -1 ].geometry.coordinates[1], 
                stands.options[ p-1 ].geometry.coordinates[0]),    
                L.latLng(stands.options[ p2 ].geometry.coordinates[1], 
                    stands.options[ p2 ].geometry.coordinates[0])   
        ],
        



        geocoder: L.Management.Geocoder.nominatim(),
        routeWhileDragging: false,
        reverseWaypoints: false,
        showAlternatives: false,
        altLineOptions: {
            kinds: [
                {color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.5, weight: 2}
            ]
        }
    })).addTo(map);
}



//L.management.find().addTo(map);


html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */

  box-sizing: border-box;
}

*,
*:earlier than,
*:after {
  box-sizing: inherit;
  margin: 0;
}

* {
  max-height: 1000000px;
}

/**
   * Take away default margin.
   */

:root {
  --clr-primary: hsl(236, 76%, 38%);
  --clr-medium: hsl(236, 57%, 80%);
  --clr-light: hsl(56, 31%, 93%);
  --clr-dark: hsl(236, 10%, 0%);
  --clr-accent: hsl(56, 76%, 38%);

  --fw-n: 400;
  --fw-m: 500;
  --fw-b: 700;

  --fs-1: 3rem;
  --fs-2: 2rem;
  --fs-3: 1.4rem;
  --fs-p: 1.1rem;

}

physique {
  margin: 0;
  coloration: var(--clr-dark);
  background: var(--clr-light);

  font: 18px/1.2 "Arial", "Helvetica Neue", "Helvetica", sans-serif;
  line-height: 2rem;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  coloration: var(--clr-accent);
  text-decoration: none;
}

p{
  margin-bottom: 0.5em;
  text-indent: 5ch;
  font-size: var(--fs-3);
}

.clear{
  clear: each;
}

h1 {
  /*font-size: var(--fs-1);*/
  font-size:calc(100% + 3vw);
  text-align: heart;
  line-height: 1em;
}

h2{
  font-size: var(--fs-3);
  text-align: heart;
  line-height: 1em;
  margin: 0.5em 0;
}

.imgr{
  width:70%;
  float: proper;
  margin: 1em ;
}

.imgl{
  width:70%;
  float: left;
  margin: 1em ;
}

.imgnf{
  width: 70%;
  margin: auto;
}
.imgg{
  width: 100%;
  max-width: 1000px;
}

@media (max-width:600px ){
  .imgr, .imgl , .imgnf{
    width:95%;
  }

}

.button {
  background-color: var(--clr-primary);
  border: none;
  coloration: white;
  border-radius: 1rem;
  padding: 15px 25px;
  text-align: heart;
  text-decoration: none;
  show: inline-block;
  margin: auto;
  cursor: pointer;
}

.div-button{
  show: flex;
  margin:auto;
}


.buttonl{
  left: 30%;
}


#map {
  margin-top: 3em;
  padding: 0;
  peak: 93vh;
  background-color: var(--clr-dark);
}

.content-splash {
  background-image: url(../photos/webp/ste-marie-church.webp);
  background-repeat: no-repeat;
  background-position: heart;
  background-color: var(--clr-medium);
  background-size: cowl;
peak: 100vh;
show: flex;
align-items: heart;
justify-content: heart;
}

/*

.content-splash ul {
  width: 100%;
  list-style-type: none;

}*/

.wrapper {
  show: flex;
  align-items: heart;

}
.wrapper ul {
  margin: auto;
  show: inline-block;
  align-items: heart;
 /* margin: 0;
  padding: 0;
  /* For IE, the outcast */
  /*zoom:1;
  show: inline; */
  text-align: heart;
 /* show: flex;*/
}
.wrapper li {
  
  float: left;
  clear:each;
  width:25ch;
  padding: 1.8vh;
  margin: 1.5vh;
  border: 1px strong black;
  list-style-type: none;

  background-image: linear-gradient(to backside proper, var(--clr-accent), var(--clr-dark));
}

.wrapper li a {
text-align: heart;
coloration: var(--clr-light);
}


.content material {
 width: 60ch ;
 max-width: 95%;
  margin: auto;
  background-color: var(--clr-light);
}

.content material ul {
  width: 100%;
  list-style-type: none;
}


.content material div{
  peak: auto;
}
.content-stands a{
  coloration:var(--clr-primary);
  width: 6em;
}

.content-stands{
  text-transform: uppercase
}
.content-stands ul{
  list-style-type: none;
}
.title {
  peak:3em;
  width: 100%;
  padding-top: 0;
  margin-inline: auto;
  background-color: var(--clr-dark);
  coloration: var(--clr-accent);
}

.navbar {
  place: sticky;
  high:0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  width: 100%;
  /*show:inline-flex;*/
  background-color: var(--clr-dark);
}

.navbar ul {
  width: 100%;
  list-style-type: none;
  show: flex;
  margin:auto;
}

.navbar ul li {
  show: inline;
  margin-inline: auto;

}

#refreshButton {
  place: absolute;
  high: 60px;
  left: 20px;
  padding: 10px;
  z-index: 10000;
}

/* .titlemap{
  z-index: 10000;
  place: absolute;
  high:0;

} */

.navmap {
  z-index: 10000;
  
}

.leaflet-control-zoom{
  show:none;
}

ios – exploding map div on faucet on ipad

ios – What ought to I do on this scenario when one thing is out of scope?

swift – The way to hold auto focus off whereas retaining the flash on in iOS

ios – Easy methods to convert response textual content to speech utilizing AVSpeechSynthesizer

LEAVE A REPLY Cancel reply

Most Popular

Apple @ Work: Pigs typically fly or Apple allowed IdP integration for quicker and extra scalable deployments

STMicroelectronics Provides TinyML Capabilities to its Newest “Sensible” MEMS Accelerometers

How Steve Jobs stepped in to guard this iconic Mac app from the ‘litigious’ RIAA

various roads result in the response heart

Utah’s new social media regulation may imply the tip of web anonymity

Vi May Face Warmth from Airtel, Jio Latest Transfer in Postpaid Phase

Rotate matrix counter-clockwise N instances in Java

Dungeons & Dragons: Honor Amongst Thieves overview: simply roll with it

The way forward for immersive work within the metaverse

The best way to buy films and TV reveals on YouTube

Recent Comments

ABOUT US

POPULAR POSTS

Apple @ Work: Pigs typically fly or Apple allowed IdP integration for quicker and extra scalable deployments

STMicroelectronics Provides TinyML Capabilities to its Newest “Sensible” MEMS Accelerometers

How Steve Jobs stepped in to guard this iconic Mac app from the ‘litigious’ RIAA

POPULAR CATEGORY