最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - LeafletJS popups positions and markers add and remove issue - Stack Overflow

programmeradmin3浏览0评论

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.

Share Improve this question asked Mar 15, 2013 at 9:45 AzeemAzeem 2,92418 gold badges56 silver badges89 bronze badges 1
  • 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
Add a ment  | 

3 Answers 3

Reset to default 2

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.

发布评论

评论列表(0)

  1. 暂无评论