Reputation: 419

position fixed doesn't pan to the center of the map

I have created a map and I would like that the map to be fullscreen at any size of screen. After setting my position to fixed the map is fullscreen at my screen eventhough the map is configured for a much bigger screen but the center of the map is shifted. I tried to set the position fixed !important but I'm still getting the same problem. This is my code:

index.html

{% extends 'workorders/base.html' %}
{% block jumbotron2 %}
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
{% endblock %}

{% block content %}
<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
  {% leaflet_js %}
  {% leaflet_css %}
  <title>Map</title>
    <style type="text/css">
      #map {
          position: fixed !important;
          width: 1500px;
          height: 1500px;
          margin: 0% 0 0 0%;
          }

      html, body, #map-container {
          height: 100%;
          width: 100%;
          }
    </style>
  <link rel="stylesheet" type="text/css" href="{% static 'dist/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.css' %}">
  <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/L.TileLayer.BetterWMS.js' %}" > </script>
  <script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
  <script type="text/javascript" src="{% static 'dist/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.js' %}" > </script>
</head>
<body>

<div id="map"></div>
<script type="text/javascript">
      var center_x = 42.21526;
      var center_y = 20.74148;
      var map_zoom = 15;
      var l_w_lines_on = 0;
      var l_ww_manholes =0;
      var l_ww_lines_on  =0;
      var l_ww_disch_on =0;    
      var l_w_res_on  =0;
      var l_w_pump_on  =0;
      var l_w_prod_wm_on  =0;
      var l_w_nodes =0;
      var l_w_hydr  =0;
      var l_w_conn  =0;
      var l_w_conn_pipes  =0;
      var l_ww_cath  =0;
      var l_rek =0;
      var l_ortho2012 =0;
      var l_parc =0;
      var l_ndert =0;
      var l_arcgis =0;
      var l_googleSat =0;

// URL parameters  ?c_x=42.21526&c_y=20.74148&m_zoom=18&w_lines_on=1&ww_manholes=0&ww_lines_on=0&ww_disch_on=0&w_res_on=0&w_pump_on=0&w_prod_wm_on=0&w_nodes=0&w_hydr=0&w_conn=0&w_conn_pipes=0&ww_cath=0&l_rek_on=0&l_ortho2012_on=0&l_ndert_on=0&l_arcgis_on=0&l_googleSat_on=0
      var l_url = location.search;
      var l_urlPairs = l_url.split("?");
      var l_ValStr = l_urlPairs [1];
      if (l_urlPairs.length > 1) {
        var l_Pairs = l_ValStr.split("&");
        var l_pair, l_name, l_val; 
        if (l_Pairs.length > 0) {
         for (var i = 0; i < l_Pairs.length; i++) {
           l_pair = l_Pairs[i].split("="); 
            l_name = l_pair [0]; 
           l_val = l_pair [1]; 
            if (l_name == 'c_x') {
             center_x = l_val;
            } else if (l_name == 'c_y') {
            center_y = l_val;
            } else if (l_name == 'm_zoom') {
             map_zoom = l_val;
            } else if (l_name == 'w_lines_on') {
              l_w_lines_on = l_val;
            } else if (l_name == 'ww_manholes') {
              l_ww_manholes = l_val;
            } else if (l_name == 'ww_lines_on') {
              l_ww_lines_on = l_val;
            } else if (l_name == 'ww_disch_on') {
              l_ww_disch_on = l_val;
            } else if (l_name == 'w_res_on') {
              l_w_res_on = l_val;
            } else if (l_name == 'w_pump_on') {
              l_w_pump_on = l_val;
            } else if (l_name == 'w_prod_wm_on') {
              l_w_prod_wm_on = l_val;
            } else if (l_name == 'w_nodes') {
              l_w_nodes = l_val;
            } else if (l_name == 'w_hydr') {
              l_w_hydr = l_val;
            } else if (l_name == 'w_conn') {
              l_w_conn = l_val;
            } else if (l_name == 'w_conn_pipes') {
              l_w_conn_pipes = l_val;
            } else if (l_name == 'ww_cath') {
              l_ww_cath = l_val;
            } else if (l_name == 'l_rek_on') {
              l_rek = l_val;
            } else if (l_ortho2012 == 'l_ortho2012_on') {
              l_ortho2012 = l_val;
            } else if (l_parc == 'l_parc_on') {
              l_parc = l_val;
            } else if (l_ndert == 'l_ndert_on') {
              l_ndert = l_val;
            } else if (l_arcgis == 'l_arcgis_on') {
              l_arcgis = l_val;
            } else if (l_googleSat == 'l_googleSat_on') {
              l_googleSat = l_val;
            }
          }
        }
      }
      var map = L.map('map', {
        center: [center_x , center_y],
        zoom: map_zoom
      });

      L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          maxNativeZoom:25,
          maxZoom: 25,
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // map.on('click', function(e) {
      //     alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
      // });

      var serviceUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
      var credits = 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012 etc. etc. etc.';
      var arcgis = L.tileLayer(serviceUrl, { 
        attribution: credits,
        maxZoom: 25,
        maxNativeZoom: 18
      });

      var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
          maxZoom: 25,
          subdomains:['mt0','mt1','mt2','mt3']
      });

      var datasets = L.tileLayer.betterWms('http://172.17.1.123:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_manholes',
        format: 'image/png',
        transparent: true,
        maxZoom: 25
      });

      var lines = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_lines',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_lines = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_lines',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var ww_discharge = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_discharge',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_reservoirs = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_reservoirs',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_pumpstations = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_pumpstations',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_product_wm = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_product_wm',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_nodes = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_nodes',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_hydrants = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_hydrants',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_connect_wm = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_connect_wm',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var w_connect_pipes = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_w_connect_pipes',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var ww_catchments = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_ww_catchments',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var rekordet = L.tileLayer.betterWms('http://localhost:8080/geoserver/geodjango/wms', {
        layers: 'geodjango:layer_rekordet',
        transparent: true,
        maxZoom: 25,
        format: 'image/png'
      });

      var parcelat = L.tileLayer.betterWms('http://geoportal.rks-gov.net:/wms', {
        layers: 'KCM_DEV_WS:ParcelGeomView',
        format: 'image/png',
        transparent: true,
        visibility: false,
        srs: 'EPSG:7392',
        maxZoom: 25,
        singleTile: false
      });

      var ndertesat = L.tileLayer.betterWms('http://geoportal.rks-gov.net:/wms', {
        layers: 'KCM_DEV_WS:BuildingGeomView',
        format: 'image/png',
        transparent: true,
        visibility: false,
        srs: 'EPSG:7392',
        maxZoom: 25,
        singleTile: false
      });

      var ortho2012 = L.tileLayer.betterWms('http://geoportal.rks-gov.net:/wms', {
        layers: 'Orthophoto_2012',
        format: 'image/png',
        transparent: true,
        visibility: true,
        srs: 'EPSG:7392',
        maxZoom: 25,
        singleTile: false
      });



        if (l_ww_manholes == 1)  datasets.addTo(map);
        if (l_ww_lines_on == 1)  lines.addTo(map);
        if (l_w_lines_on == 1)  w_lines.addTo(map);
        if (l_ww_disch_on == 1)  ww_discharge.addTo(map);    
        if (l_w_res_on == 1)  w_reservoirs.addTo(map);
        if (l_w_pump_on == 1)  w_pumpstations.addTo(map);
        if (l_w_prod_wm_on == 1)  w_product_wm.addTo(map);
        if (l_w_nodes == 1)  w_nodes.addTo(map);
        if (l_w_hydr == 1)  w_hydrants.addTo(map);
        if (l_w_conn == 1)  w_connect_wm.addTo(map);
        if (l_w_conn_pipes == 1)  w_connect_pipes.addTo(map);
        if (l_ww_cath == 1)   ww_catchments.addTo(map);
        if (l_rek == 1)   rekordet.addTo(map);
        if (l_ortho2012 == 1)   ortho2012.addTo(map);
        if (l_parc ==1)   parcelat.addTo(map);
        if (l_ndert ==1)   ndertesat.addTo(map);
        if (l_arcgis ==1)   arcgis.addTo(map);
        if (l_googleSat ==1)   googleSat.addTo(map);



       var basemaps = {
          OSM: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            maxNativeZoom:25,
            maxZoom:19
          })
      };

        var groupedOverlays = {
          "Layers": {
            "satellite":googleSat,
            "arcgis map": arcgis,
            "Orthophoto_2012": ortho2012,
            "Ndertesat": ndertesat,
            "Parcelat": parcelat,
            "ww_manholes": datasets,
            "ww_lines": lines,
            "w_lines": w_lines,
            "ww_discharge": ww_discharge,
            "w_reservoirs": w_reservoirs,
            "w_pumpstations": w_pumpstations,
            "w_product_wm": w_product_wm,
            "w_nodes": w_nodes,
            "w_hydrants": w_hydrants,
            "w_connect_wm": w_connect_wm,
            "w_connect_pipes": w_connect_pipes,
            "ww_catchments": ww_catchments,
            "rekordet": rekordet

          }

        };

        L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);   

</script>


</body>
</html>
{% endblock %}

Upvotes: 0

Answers (1)

szogoon

Reputation: 644

Try with:

#map {
    height: 100vh;
    width: 100vw;
}

Upvotes: 2

position fixed doesn&#39;t pan to the center of the map

Answers (1)

Related Questions

position fixed doesn't pan to the center of the map