CODEWITHSUNDEEP
htmlcssleaflet
mightycode Newton
mightycode Newton

Reputation: 3949

How to position leaflet map over the whole width?

I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:

<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
    "https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
    "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
 <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
<script src=
    "https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>

<style> 
#peMap {height:1000px; 
    width: 100%;
    background: rgba(76, 175, 80, 0.0); 
    border:5px double #000000}

div {   margin-left:auto; 
    margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>

<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];

    var maxBounds=[
    [50.800,3.259],     //Southwest
    [53.565,7.335]];    //Northeast
    
    var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
                     'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
    var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};

    var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);

    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {attribution:'&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(peMap);
    L.control.scale().addTo(peMap);

    var i;
    for ( i=0;i<(dlist.length);i++ )
    {   circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
        circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
    };

});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331,  Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>

and this is how it looks like now:

enter image description here

So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.

So what I have to change?

Thank you

if I do it like this:

<style> 
html, body
{
    margin: 0px; padding: 0px
}
#peMap {height:1000px; 
    width: 100%;
    background: rgba(76, 175, 80, 0.0); 
    

div {   margin-left:auto; 
    margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>

<script>

still on the left a lot of white space. Even on mobile

Upvotes: 0

Views: 1170

Answers (1)

ad2969
ad2969

Reputation: 500

There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.

In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.

Here's some fun reading and discussion about this.

Upvotes: 1

Related Questions