I have this leaflet map inside a HTML file that I can easily return with my Flask app.py, but I've been trying to add a marker for a while now to no avail.
var marker = L.marker([latitud, longitud]);
var addmarker = L.addmarker([marker]).addTo(map_init);
The marker stuff is at the bottom, but I'm sharing the whole file in case I messed up somewhere else
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mapa pelao</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Control.Geocoder.js"></script>
<style>
body {
margin: 10px;
padding: 0;
}
#map {
width: 100%;
height: calc(100vh - 20px);
}
</style>
</head>
<body>
<div class="contenedor">
<div id="map" class="mapa-img"></div>
<script src=""LINK HERE"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="></script>
<script src="LINK HERE"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// se crea el mapa
var map_init = L.map('map', {
center: [-33.4449, -70.6664],
zoom: 13
});
// se usa OpenStreetMap para agregar la imagen al mapa creado
var osm = L.tileLayer("LINK HERE", {
attribution: "© <a href='"LINK HERE'>OpenStreetMap</a> contributors"
}).addTo(map_init);
// se agrega un buscador para el mapa
L.Control.geocoder().addTo(map_init);
// Obtener la posición desde la base de datos (ejemplo)
var latitud = -33.4450;
var longitud = -70.6694;
// Crear un marcador en la posición obtenida
var marker = L.marker([latitud, longitud]);
var addmarker = L.addmarker([marker]).addTo(map_init);
});
</script>
</div>
</body>
</html>
AFAIK it should show the marker with just that, I've been messing with it but nothing changes, I can even change the center of the map, so atleast not the whole file is messed up. Example of a change that didn't work:
var addmarker = L.addmarker([latitud, longitud]).addTo(map_init);
And yes, eventually I'd want to pull positions from a database, but first I need to know how to even place a single marker.
L.marker([lat, long])and then you add that to the map by either chaining.addTo(map)or by saving the marker in a variable and calling.addto(map)on that. This is very much covered by the quick start guide so give that a (re)read and use the code that tells you to use. With the added bonus that Leaflet's on v1.9.4 now, not v1.7.1L.addmarker()is not a thing in the Leaflet JS API.L.marker()was just the Lplus the variable name... thank you both for answering.