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/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/L.Control.Locate.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]"></script>
<script src="resources/turf.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]"></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">©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 = '© ' + osmLink + ' Contributors',
landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var mbAttr = 'Map data © <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>
Vince
20.5k16 gold badges49 silver badges65 bronze badges
-
1I 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– TomazicM2019年07月27日 09:44:48 +00:00Commented Jul 27, 2019 at 9:44
-
After adding file layer code.... It did not work.ake– ake2019年07月28日 22:11:49 +00:00Commented Jul 28, 2019 at 22:11
1 Answer 1
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.
answered Jul 29, 2019 at 18:38
lang-js