What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Leaflet marker issue

halfsparrow

New member
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


<!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/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@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[1], locations[2]]).addTo(Map)
.bindPopup(locations[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[1], locations[2]]).addTo(Map)
.bindPopup(locations[0].toString()).openPopup()
}
}


</script>
</body>

</html>
 
Outsourcing your software development https://mlsdev.com work can be beneficial in several ways. You'll have a dedicated team working for you, which gives you the flexibility to manage their workload and progress. A dedicated team is a great option for a large company looking for a single-source IT department. This is the most effective way to outsource software development because it can offer a high level of expertise, and you can focus on other areas of your business.
 
Last edited:
Back
Top