Leaflet maps markers
80 views
Skip to first unread message
Jeel Puranik
Sep 20, 2021, 11:01:11 AM9/20/21
to Leaflet
I am trying to make a leaflet map that shows location of various sites. I have 2 buttons on top of that, it shows active job and completed job My map is working fine the only issue is if i click on active jobs button and then i click on completed jobs it shows markers from both the jobs and does not clear the markers from one button while clicking the other button
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Maps</title>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/lea...@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin="">
</script>
</head>
<body>
<div id="main">
<button id="btn1" type="button" name="Active Jobs" onclick="ActiveJobs()">Active Jobs</button>
<button id="btn2" type="button" name="Completed Jobs" onclick="CompleteJobs()">Completed Jobs</button>
</div>
<div id="MapDiv" style="width: 80%; height: 600px"></div>
<script>
var Map = L.map('MapDiv').setView([43.6534817, -79.3839347], 8);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(Map);
function ActiveJobs() {
var locations=[
["LNX CONDOS",43.65814248331456, -79.4518217777746],
["PARKSIDE VILL-BLK 1 & 2",43.590481160417774, -79.64928547749722]
]
for (var i = 0; i < locations.length; i++) {
marker=new L.marker([locations[i][1], locations[i][2]]).addTo(Map)
.bindPopup(locations[i][0].toString()).openPopup()
}
}
function CompleteJobs() {
var locations = [
["The Paramount",43.78115684710028, -79.41300157933055],
["Hazelton Lanes",43.6713055250336, -79.39467980632674]
]
for (var i = 0; i < locations.length; i++) {
marker=new L.marker([locations[i][1], locations[i][2]]).addTo(Map)
.bindPopup(locations[i][0].toString()).openPopup()
}
}
</script>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages