Маркер или кружок не работает на Leaflet

Question

Я бы хотел использовать Leaflet, но маркеры и круги, похоже, не работают на моей карте.

Моя карта хорошо лежит на документе, но маркер и круг скрыты.

Мой код:

var map = L.map(document.querySelector('#map')).setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'MYMAP',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'MYTOKEN'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

var circle = L.circle([51.508, -0.11], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 500
}).addTo(map);

Загрузка с RequireJS:

define('Composite-Map', ['leaflet'], function() { /*my code*/ })

Answer 1

Проблема в том, что вы пытаетесь определить leaflet как модуль.Но это не модуль.Используйте require вместо define, и оно будет работать:

require(['https://unpkg.com/leaflet@1.3.4/dist/leaflet.js'], function() {
  var map = L.map(document.querySelector('#map')).setView([51.505, -0.09], 13);
console.log(0);
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    attribution: 'MYMAP',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'MYTOKEN'
  }).addTo(map);

  var marker = L.marker([51.5, -0.09]).addTo(map);

  var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
  }).addTo(map);
})

#map {height:100vh}

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>

<div id="map"></div>