CODEWITHSUNDEEP
javascriptmapsleaflettilemill
Zain
Zain

Reputation: 85

Leaflet Markers

I’m new to leaflet, and I’m trying to display the markers. The tutorials don’t seem to work for me. The map shows up fine, however I just can’t get a marker to display. below is my sample code:

wax.tilejson('http://localhost:8888/v2/DigitalHumanities.json',
  function(tilejson) {
        var map = new L.Map('map-div')
            .addLayer(new wax.leaf.connector(tilejson))
            .setView(new L.LatLng(-17.1828,137.4609), 4);

    var markers = new L.marker(-17.1828,137.4609);
    map.addLayer(markers);

    var markerx = new L.marker(137.4609,-17.1828);
    map.addLayer(markerx);

  });

I’ve tried the samples in the tutorials i.e.: .addTo(map); , map.addLayer(markers); etc.

Upvotes: 7

Views: 1569

Answers (5)

Santosh
Santosh

Reputation: 2323

You can find the working example here< https://jsfiddle.net/viswanathamsantosh/x63kzb31/ >. The below line would add a marker and also a popup to your map when clicked on the marker.

new L.Marker([46.947, 7.4448]).addTo(map).bindPopup('hello world!!!');

Upvotes: 1

Ethan McCoy
Ethan McCoy

Reputation: 41

You can do it by either using the factory or the 'new' keyword on the class (which I believe is what the factory does anyway. The difference is in the case used.

I believe these should both work the same way:

var markerx = new L.Marker(L.latLng(137.4609,-17.1828));
map.addLayer(markerx);

.

var markerx = L.marker(L.latLng(137.4609,-17.1828));
map.addLayer(markerx);

But you cannot combine them.

Upvotes: 0

Mujtaba Kably
Mujtaba Kably

Reputation: 755

let markers = L.marker([-17.1828,137.4609]);

or

let markers = L.marker({lat: -17.1828,lng: 137.4609});`

then:

map.addLayer(markers);

Upvotes: 0

Nikhil Sharma
Nikhil Sharma

Reputation: 31

The actual syntax for creating leaflet marker is 

L.marker(<LatLng> latlng, <Marker options> options? );

You can check the API reference here
Below is your code

correct code

wax.tilejson('http://localhost:8888/v2/DigitalHumanities.json',
  function(tilejson) {
        var map = new L.Map('map-div')
            .addLayer(new wax.leaf.connector(tilejson))
            .setView(new L.LatLng(-17.1828,137.4609), 4);

    var markers = new L.marker([-17.1828,137.4609],{clickable:true});
    map.addLayer(markers);

    var markerx = new L.marker([137.4609,-17.1828]);
    map.addLayer(markerx);

  });

Upvotes: 1

psousa
psousa

Reputation: 6726

The L.marker constructor should be used as:

var markers = L.marker([-17.1828,137.4609]);
map.addLayer(markers);

You can check the API reference here

Upvotes: 14

Related Questions