I am implementing displaying locations on openstreetmaps using leafletjs API. Here is the scenario, When the page loads a JS function is being triggered which will query DB to get current locations of all the devices and show them as markers on map. I am facing two major issues in it:

--> I am trying to bind popups with each marker so that it could be descriptive. In other words user should gain idea that of what device this marker for. The problem is that popups is being showed over the marker making marker non-visible. Here is the screenshot:

Marker is shown below(after closing one popup):

--> On this page, I am displaying devices names in a table. The first column of this table is checkbox. When user check a device its marker appears on the map as expected(working fine). After that if user unchecks that device then its marker disappears. But when user re-selects that device again then its marker doesn't appear.

Here is my code:

function OnPageLoad() {
var IDs = GetAllSelectedDeviceIDs();
LoadOpenStreetMap(IDs);
}

var map;
var markers = new Array();

function LoadOpenStreetMap(deviceIDs) {
for (var i = 0; i < deviceIDs.length; i++) {
    $.ajax({
        url: "../Database/getcurrentlocation.php",
        cache: false,
        type: "post",
        data: "deviceId=" + deviceIDs[i] + "&r=" + Math.random(),
        dataType: "html",
        async: false,
        success: function (data) {
            if (data != null) {
                var dataArray = data.split(/~/);
                SetOpenStreetMap(dataArray[0], dataArray[1], deviceIDs[i], i, flags[i]);
            }
        }
    });
}
deviceIDs = GetAllSelectedDeviceIDs();
setTimeout(function () { LoadOpenStreetMap(deviceIDs); }, 500);
}

function SetOpenStreetMap(lati, longi, deviceID, markerIndex, markerFlag) {
if (!map) {
    map = L.map('map').setView([lati, longi], 12);
    L.tileLayer('http://{s}.tile.cloudmade/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    }).addTo(map);
}

if (markerFlag == 1) {
//need to add marker
    if (!markers[markerIndex]) {
        var popupLocation1 = new L.LatLng(lati, longi);
        var popupContent1 = 'This is a nice popup.';
        popup1 = new L.Popup();
        popup1.setLatLng(popupLocation1);
        popup1.setContent(popupContent1);
        markers[markerIndex] = L.marker([lati, longi]).addTo(map);
        markers[markerIndex].bindPopup(popupContent1);
        map.addLayer(popup1);
    }
    else
        markers[markerIndex].setLatLng([lati, longi]).update();
}
else {
//need to remove marker
    if (markers[markerIndex]) {
       map.removeLayer(markers[markerIndex]);
    }
}
}

Any help would be appreciated.

Thanks.

I am implementing displaying locations on openstreetmaps using leafletjs API. Here is the scenario, When the page loads a JS function is being triggered which will query DB to get current locations of all the devices and show them as markers on map. I am facing two major issues in it:

--> I am trying to bind popups with each marker so that it could be descriptive. In other words user should gain idea that of what device this marker for. The problem is that popups is being showed over the marker making marker non-visible. Here is the screenshot:

Marker is shown below(after closing one popup):

--> On this page, I am displaying devices names in a table. The first column of this table is checkbox. When user check a device its marker appears on the map as expected(working fine). After that if user unchecks that device then its marker disappears. But when user re-selects that device again then its marker doesn't appear.

Here is my code:

function OnPageLoad() {
var IDs = GetAllSelectedDeviceIDs();
LoadOpenStreetMap(IDs);
}

var map;
var markers = new Array();

function LoadOpenStreetMap(deviceIDs) {
for (var i = 0; i < deviceIDs.length; i++) {
    $.ajax({
        url: "../Database/getcurrentlocation.php",
        cache: false,
        type: "post",
        data: "deviceId=" + deviceIDs[i] + "&r=" + Math.random(),
        dataType: "html",
        async: false,
        success: function (data) {
            if (data != null) {
                var dataArray = data.split(/~/);
                SetOpenStreetMap(dataArray[0], dataArray[1], deviceIDs[i], i, flags[i]);
            }
        }
    });
}
deviceIDs = GetAllSelectedDeviceIDs();
setTimeout(function () { LoadOpenStreetMap(deviceIDs); }, 500);
}

function SetOpenStreetMap(lati, longi, deviceID, markerIndex, markerFlag) {
if (!map) {
    map = L.map('map').setView([lati, longi], 12);
    L.tileLayer('http://{s}.tile.cloudmade./XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
        attribution: '',
        maxZoom: 18
    }).addTo(map);
}

if (markerFlag == 1) {
//need to add marker
    if (!markers[markerIndex]) {
        var popupLocation1 = new L.LatLng(lati, longi);
        var popupContent1 = 'This is a nice popup.';
        popup1 = new L.Popup();
        popup1.setLatLng(popupLocation1);
        popup1.setContent(popupContent1);
        markers[markerIndex] = L.marker([lati, longi]).addTo(map);
        markers[markerIndex].bindPopup(popupContent1);
        map.addLayer(popup1);
    }
    else
        markers[markerIndex].setLatLng([lati, longi]).update();
}
else {
//need to remove marker
    if (markers[markerIndex]) {
       map.removeLayer(markers[markerIndex]);
    }
}
}

Any help would be appreciated.

Thanks.

• javascript
• html
• openstreetmap
• leaflet

• did you find a solution to the second question? The part about it not reloading the marker? – Barrett Commented Oct 25, 2013 at 1:42

3 Answers 3

To put the popup over the marker with some offset there exists an offset property:

if (markerFlag == 1) { //need to add marker
    if (!markers[markerIndex]) {
        var popupLocation1 = new L.LatLng(lati, longi);
        var popupContent1 = 'This is a nice popup.';
        popup1 = new L.Popup();
        popup1.setLatLng(popupLocation1);
        popup1.setContent(popupContent1);
        popup1.offset = new L.Point(0, -20);
        markers[markerIndex] = L.marker([lati, longi]).addTo(map);
        /* markers[markerIndex].bindPopup(popupContent1);  */
        map.addLayer(popup1);
     } else
        markers[markerIndex].setLatLng([lati, longi]).update();
}

Set the offset inside the options object when creating the popup.

var options = {
  offset:  new L.Point(1, -20)
};

var popup = L.popup(options)
  .setLatLng([ lat, lng ])
  .setContent('Your popup content goes here!')
  .openOn(map)
  ;

The "options" object is the first object that is passed to the L.popup()

To show a popup over a marker, only call the bindPopup method on the marker. This is shown in the QuickStart.

You do not need to instantiate a popup, yourself.