CODEWITHSUNDEEP
javascriptleaflet
tonymx227
tonymx227

Reputation: 5451

Marker or circle does not work on Leaflet

I'd like to use Leaflet but markers and circles seems not working on my map.

My map is well on the document but marker and circle are hidden.

My code :

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);

Loadding with RequireJS :

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

Upvotes: 2

Views: 1337

Answers (1)

Kosh
Kosh

Reputation: 18444

The problem is that you're trying to define leaflet as a module. But it's not a module. Use require instead of define and it will work:

require(['https://unpkg.com/[email protected]/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/[email protected]/dist/leaflet.css"/>

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

Upvotes: 1

Related Questions