'Add map marker after clicking icon
I am creating a page to do a basic search for breweries and am displaying information pulled from an API about breweries and would like to display the location on a map from the MapQuest API.
I know how to make a static marker, but is it possible to create a marker after a click event that uses the latitude and longitude from the JSON file? So after entering in a search term to populate the results, I want to be able to click a result and then have a marker added to the map. Is this even possible?
Here is my code for the map:
var L;
window.onload = function() {
L.mapquest.key = 'hidden';
// 'map' refers to a <div> element with the ID map
var map = L.mapquest.map('map', {
center: [38.584487, -90.266699],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 11
});
map.addControl(L.mapquest.control({
position: 'bottomright'
}));
L.marker([38.584487, -90.266699], {
icon: L.mapquest.icons.marker({
primaryColor: '#22407F',
secondaryColor: '#3B5998',
shadow: true,
size: 'sm',
symbol: 'A'
})
})
.bindPopup('Welcome to St. Louis! <br> Find more info <a href="https://www.stlouis-mo.gov/"> here! </a>')
.addTo(map);
}
-- and my code for displaying each brewery below the map:
// search bar using JS
const breweryList = document.getElementById('result');
const searchBar = document.getElementById('searchBar');
let brewerySpots = [];
searchBar.addEventListener('keyup', (e) => {
const searchString = e.target.value.toLowerCase();
const filteredBreweries = brewerySpots.filter(data => {
return (
data.name.toLowerCase().includes(searchString) ||
data.city.toLowerCase().includes(searchString)
);
});
displayBreweries(filteredBreweries);
});
const loadBreweries = async () => {
try {
const res = await fetch('https://raw.githubusercontent.com/openbrewerydb/openbrewerydb/master/breweries.json');
brewerySpots = await res.json();
displayBreweries(brewerySpots);
} catch (err) {
console.error(err);
}
};
const displayBreweries = (breweries) => {
const htmlString = breweries
.map((brewery) => {
return `
<li class="brewery col">
<h3><a href="${brewery.website_url}">${brewery.name}</a></h3>
<address> Location: ${brewery.street},
${brewery.city}, ${brewery.state}</address>
<p>Type: ${brewery.brewery_type}</p>
<i style='font-size:24px' class='fas' ></i>
</li>`
})
.join('');
breweryList.innerHTML = htmlString;
};
loadBreweries();
It seems like all of the examples and tutorials I have found pertain to clicking on the map to add a marker, but I want to click a hyperlink on my page that will use the latitude and longitude from the JSON data to add a marker.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
<link rel="stylesheet" href="../styles/style.css" />
<title>Beer30!</title>
</head>
<body>
<nav class="navbar">
<a href="#" class="navbar__logo">
<i class="fas fa-beer"></i>
</a>
<div class="navbar__bars">
<i class="fas fa-bars"></i>
</div>
<div class="navbar__menu">
<a href="./index.html" class="navbar__menu--links">Home</a>
<a href="./breweries.html" class="navbar__menu--links">Breweries</a>
<a href="#" class="navbar__menu--links">About</a>
<a href="./signup.html" class="navbar__menu--links" id="button">Sign Up</a>
<a href="#" class="navbar__menu--links" id="button">Log In</a>
</div>
</nav>
<!-- map placeholder -->
<div id="map"></div>
<!-- search field-->
<div class="container" style="width:900px">
<h2 align="center" style="color: rgb(231, 231, 231)">Search for Breweries</h2>
<h4 align="center" style="color: rgb(231, 231, 231)">Use the search field below to filter by city or brewery name!</h4>
<br>
<div id="searchWrapper">
<input type="text" name="searchBar" id="searchBar" placeholder="Search for a brewery" class="form-control">
</div>
<br>
<ul class="list-group" id="result"></ul>
</div>
<br><br>
<hr>
<!-- area to hold list of breweries -->
<select id="breweries-dropdown" name="breweries"></select>
<br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="../app/script.js"></script>
</body>
</html>
Solution 1:[1]
NICE! I used the Untappd API to do something similar several years ago.
I think your link will need to have an index/reference back to the list of breweries so the code can grab the correct lat/lng from the link, place the marker on the map (the same way the initial St Louis marker is added) and recenter on it.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | MQBrian |