Laura89 Laura89 - 28 days ago 8
Javascript Question

Adding markers in Leaflet

I'm a beginner with JS.

I'm trying to add a map to my website using Leaflet. I followed the Quick Start Guide, but it looks like adding a marker won't work.

Here is my code :



<!-- JS Leaflet Map -->
<script src="leaflet/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([40.174295, 44.522890], 11);

var mymap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);

var marker = L.marker([40.174295, 44.522890]).addTo(mymap);





Thanks a lot for your help.

Laura

Answer Source

Error is here

var mymap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);

Do not assign the result to mymap variable

Because of that, the next line is receiving a Layer instead of a Map object

var marker = L.marker([40.174295, 44.522890]).addTo(mymap);

So, final code should be like this

<!-- JS Leaflet Map -->
<script src="leaflet/leaflet.js"></script>
<script> 
var mymap = L.map('mapid').setView([40.174295, 44.522890], 11);

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(mymap);

var marker = L.marker([40.174295, 44.522890]).addTo(mymap);