0

I'm trying to make a web application mainly with Leaflet. This is my code. I can download a file, but when you first open this web application, no layers are shown on the map. However, once I loaded a file, I can see that layer on the map as well as change layers. enter image description here

      <!DOCTYPE html>
       <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Web Application</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
        <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.67.0/dist/L.Control.Locate.min.css">
        <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.67.0/dist/L.Control.Locate.min.js"></script>        
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://unpkg.com/togeojson@0.14.2"></script>
        <script src="resources/turf.min.js"></script>
        <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
        <script src="https://unpkg.com/togeojson@0.14.2"></script>
        <script src="resources/leaflet.filelayer.js"></script>
        <style>
            #header {
                height: 75px;
                background-color: darkgoldenrod;
            }
            #mapdiv {
                height: 650px;
                background-color:salmon;
            }
            #side_panel {
                height: 650px;
                background-color:beige;
            }
            #footer {
                height:75px;
                background-color: darkgrey;
            }

            /* The Modal (background) */
            .modal {
                z-index: 1000; /* Sit on top */
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                display: none; /* Hidden by default */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal-content {
                padding: 20px;
                background-color:tan;
                margin-top: 10%;
            }

            .icon {
        max-width: 70%;
        max-height: 70%;
        margin: 4px;
      }
      </style>
    </head>
    <body>
        <div id="header">
            <h1 class="text-center">Web Application</h1>
        </div>
        <div class="row">
        <div id="side_panel" class="col-md-2 col-sm-2 col-xs-2">
        <div class="panel panel-default" style="margin:8px;border-color:blue;">
            <div class="panel-body">
                <table>
                   <tr>
                        <th>Cursor latitude:</th>
                        <td id="current_latitude">---</td>
                    </tr>
                    <tr class="space-top">
                        <th>Cursor longitude:</th>
                        <td id="current_longitude">---</td>
                    </tr>
                    <tr class="space-top">
                            <th>Zoom Level:</th>
                            <td id="zoom_level">---</td>
                        </tr>
                </table>
            </div>
         </div>
        </div>
        <div id="mapdiv" class="col-md-10 col-sm-10 col-xs-"></div>
        </div>
        <div id="footer" class="col-md-12">
            <h4 class="text-center">&copy;2019</h4>
        </div>
       <!-- The Modal -->
      <div id="dlgAttraction" class="modal">
      <div id='form' class="modal-content col-md-7 col-md-offset-4">
          <div class="form-group row">
                <div class="col-sm-10">
                      <input type="text" class="form-control" id="name" placeholder="Attraction Name">
                </div>
                <div class="col-sm-2">
                      <span id="idDisplay" class="pull-right"></span>
                </div>
          </div>
          <div class="form-group row">
                <div class="col-sm-6">
                      <input type="text" class="form-control" id="latitude" placeholder="Latitude">
                </div>
                <div class="col-sm-6">
                      <input type="text" class="form-control" id="longitude" placeholder="Longitude">
                </div>
          </div>
          <div class="form-group row">
                <div class="col-sm-6">
                      <select id="category" class="form-control">
                          <option value="Park">Park</option>
                          <option value="Museum">Museum</option>
                          <option value="Place">Place</option>
                          <option value="Neighborhood">Neighborhood</option>
                          <option value="Pueblo Magico">Pueblo Magico</option>
                      </select>
                </div>
                <div class="col-sm-6">
                      <input type="text" class="form-control" id="image" placeholder="Image File">
                </div>
          </div>
          <div class="form-group row">
                <div class="col-sm-12">
                      <input type="text" class="form-control" id="website" placeholder="Web URL">
                </div>
          </div>
          <div id="addButtons">
              <button id="btnClosest" class="btn btn-warning">Closest 5</button>
              <button id="btnSave" class="btn btn-success">Save</button>
              <button class="btn btn-danger btnCancel">Cancel</button>
          </div>
          <div id="editButtons">
              <button id="btnUpdate" class="btn btn-success">Update</button>
              <button id="btnDelete" class="btn btn-warning">Delete</button>
              <button class="btn btn-danger btnCancel">Cancel</button>
          </div>
    </div>
    <div id="table" class="modal-content col-md-7 col-md-offset-4">
        <div id="tableData"></div>
        <button class="btn btn-danger btnCancel">Close</button>
       </div>
      </div>
      <!-- End The Modal -->
      <script>
       (function (window) {
        'use strict';

      function initMap() {
        var control;
        var L = window.L;
        var parks = L.tileLayer.wms('http://localhost:8080/geoserver/cite/wms', {
                layers: 'cite:Parks',
                format: 'image/png',
                version:'1.1.0',
                transparent: true
              });

            var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
            thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';

            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; ' + osmLink + ' Contributors',
            landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
            thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;

            var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
            landMap = L.tileLayer(landUrl, {attribution: thunAttrib});

            var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

            var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
                streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

            var mymap = L.map('mapdiv', {
                layers: [streets],
                Zoom:11,
             });
             var baseLayers = {
                "Grayscale": grayscale,
                "Streets": streets,
                "OSM Mapnik": osmMap,
                "Landscape": landMap,
            };

            var overlays = {
                "Parks": parks
             };

            L.control.layers(baseLayers, overlays).addTo(mymap);

            var style = {
            color: 'red',
            opacity: 1.0,
            fillOpacity: 1.0,
            weight: 2,
            clickable: false
        };
         L.Control.FileLayerLoad.LABEL = '<img class="icon" src="img/folder.svg" alt="file icon"/>';
         control = L.Control.fileLayerLoad({
            fitBounds: true,
            layerOptions: {
                style: style,
                pointToLayer: function (data, latlng) {
                    return L.circleMarker(
                        latlng,
                        { style: style }
                    );
                }
            }
        });
        control.addTo(mymap);
        control.loader.on('data:loaded', function (e) {
            var layer = e.layer;
            console.log(layer);
        });
    }

       window.addEventListener('load', function () {
          initMap();
      });
      }(window));

            var lc = L.control.locate({
                position: 'topleft',
                setView: 'always',
            }).addTo(mymap);

            mymap.locate({setView: true});

            mymap.on('mousemove', function(e){
                var str = +e.latlng.lat.toFixed(5);
                $("#current_latitude").html(str);
            });

            mymap.on('mousemove', function(e){
                var str = e.latlng.lng.toFixed(5);
                $("#current_longitude").html(str);
            });

            mymap.on('mousemove', function(e){
                var str = mymap.getZoom();
                $("#zoom_level").html(str);
            });

            mymap.on('click', function(e){
                $("#dlgAttraction").show();
                $("#form").show();
                $("#table").hide();
                $("#addButtons").show();
                $("#editButtons").hide();
                $("#latitude").val(e.latlng.lat.toFixed(5));
                $("#longitude").val(e.latlng.lng.toFixed(5));
                $("#idDisplay").html("New");
            });

            function editAttraction(id) {
                $("#dlgAttraction").show();
                $("#addButtons").hide();
                $("#editButtons").show();
                $.ajax({
                    url:'find_attraction.php',
                    type:'POST',
                    data:{id:id},
                    success:function(response){
                        objAttraction=JSON.parse(response);
                        $("#idDisplay").html(id);
                        $("#name").val(objAttraction.name);
                        $("#latitude").val(objAttraction.latitude);
                        $("#longitude").val(objAttraction.longitude);
                        $("#category").val(objAttraction.category);
                        $("#website").val(objAttraction.web);
                        $("#image").val(objAttraction.image);
                    },
                    error:function(xhr, status, error){
                        console.log(xhr);
                        console.log(status);
                        console.log(error);
                }
                })
            }

            $("#btnUpdate").click(function(){
                $.ajax({
                   url:'update_attraction.php',
                   type:'POST',
                   data:{
                       id:$("#idDisplay").html(),
                       name:$("#name").val(),
                       image:$("#image").val(),
                       web:$("#website").val(),
                       category:$("#category").val(),
                       latitude:$("#latitude").val(),
                       longitude:$("#longitude").val()
                   },
                   success:function(response){
//                       alert(response);
                       $("#dlgAttraction").hide();
                       refreshAttractions();
                   }
               });
            });

            $("#btnDelete").click(function(){
                if (confirm("Are you sure you want to delete this attraction?")){
                    $.ajax({
                       url:'delete_attraction.php',
                       type:'POST',
                       data:{
                           id:$("#idDisplay").html(),
                       },
                       success:function(response){
 //                          alert(response);
                           $("#dlgAttraction").hide();
                           refreshAttractions();
                       }
                   });
                }
            });

            $(".btnCancel").click(function(){
                $("#dlgAttraction").hide();
            });

            $("#btnSave").click(function(){
                $.ajax({
                   url:'add_attraction.php',
                   type:'POST',
                   data:{
                       name:$("#name").val(),
                       image:$("#image").val(),
                       web:$("#website").val(),
                       category:$("#category").val(),
                       latitude:$("#latitude").val(),
                       longitude:$("#longitude").val()
                   },
                   success:function(response){
                       alert(response);
                       $("#dlgAttraction").hide();
                       refreshAttractions();
                   }
               });
            });
         </script>

      </body>
    </html>
  • I suppose you started with simple map that worked and then added complexity step by step. At which step is stopped working as is should? – TomazicM Jul 27 at 9:44
  • After adding file layer code.... It did not work. – ake Jul 28 at 22:11
0

Map does not display initially because it needs two input values to be displayed: initial view center coordinates and zoom. You specified only zoom, but no view center.

You can specify center when defining map (this is for London):

var mymap = L.map('mapdiv', {
  layers: [streets],
  zoom: 11,
  center: [51.509865, -0.118092]
});

You can specify also later with setView method:

var mymap = L.map('mapdiv', {
  layers: [streets]
});
...
mymap.setView([51.509865, -0.118092], 14);

Final remark for the future: It's looks like you copied code from somewhere and then tried to modify it without clear understading how it works. You can hardly expect then that others will debug your long complex code, if you just publish it and complain that it does not work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.