0

In my map (http://www.enjoytheparks.com/EtP_Map.html) I display "special" popups for Park Points of Interest. To see this, you would have to select a park first. Easiest way is use the magnifying glass on left panel, Zoom to Park, and then select Acadia. Once the map zooms, on the right panel, select -inPark->Park POIs. This display icons (currently broken, but will be fixed) that, if you click on them, will display a fair amount of info for the given POI. Most of these work, but if you select one near the top of the map, when the popup opens, the map is pushed up a bit and then the popup immediately closes. For instance, the "Hulls Cove Visitor Center" near the top by ME3 will do this. I have tried to override some of the leaflet CSS using these values:

let poiOptions = {
'maxWidth' : '500',
'maxHeight' : '80%',
'autoPan' : 'false',
'keepInView' : 'true',
'className' : 'poiCustom'

}

I have tried setting keepInView to both true/false, and autoPan to true/false. I'm not a css expert, but am pretty sure the problem lies here. I'm at a loss as to how to stop this from happening or even what to try next.

Here is the entire code block that binds the tooltip and popup for that layer:

function bindPoiTooltip_Popup(feature, layer) {
    let props = feature.properties;
    let tooltipInfo = props.title;
    let popupPoiText = '';
    let iconUrl = getIconUrl('mapicons', 'park_poi');
    let popupName = '<h3> ' + props.title + '</h3>';
    let popDesc = '';
    let popInfo = '';
    let popUrl = '';
    let popManagedOrg = '';
    let popManagedUrl = '';
    let amenities = '';
    let popAmenities = '';
    let popLatLng = '<br/>Lat/Lng: ' + props.latLng;
    let poiOptions = {
        'maxWidth' : '500',
        'maxHeight' : '80%',
        'autoPan' : 'false',
        'keepInView' : 'true',
        'className' : 'poiCustom'
    }

    if (props.desc != undefined) {
        popDesc = ('<br/>' + props.desc);
    }

    if (props.info != undefined) {
        popInfo = ('<br/>' + props.info);
    }

    if (props.url !== undefined) {
        popUrl = ('<br />URL: <a href="' + props.url + '" target="_blank">' + props.url + '</a>');
    }

    if (props.managedOrg != undefined) {
        popManagedOrg = ('<br/>' + props.managedOrg);
    }

    if (props.managedUrl != undefined) {
        popManagedUrl = ('<br/>' + props.managedUrl);
    }

    if (props.amenities != undefined) {
        let newAmenities = props.amenities.replace(",", "<br/>");
        popAmenities = ('<br/>Amenities: ' + newAmenities);
    }

    if (popManagedOrg.length > 0) {
        popupPoiText = popupName.concat(popDesc, popInfo, popUrl, popManagedOrg, popManagedUrl, popAmenities, popLatLng);
    }else {
        popupPoiText = popupName.concat(popDesc, popInfo, popUrl, popAmenities, popLatLng);
    }

    let popupInfo = '<div class="poi-popup">' + '<p>' + popupPoiText + '</p></div>';

    layer.bindPopup(popupInfo, poiOptions);
    layer.bindTooltip(tooltipInfo, {className: 'leaflet-ovl-tooltip', offset: L.point({x: 15, y: 0})});
}

I did get things to improve once I figured out how to get a scrollbar in with the text. It fixed some of the POIs so the popup stays and includes a scroll bar, but not all. I went to Alcatraz Island and found a number of them are still doing the same thing, where they appear, but then the map seems to move and then they disappear.

Do I need to look at the code that captures the move end event?

I also used percentages for the popup height and width. In any case, here is the updated css:

let sh = screen.height;
let sw = screen.width;
let popupHeight = sh * .60;
let popupWidth = sw * .35;
let poiOptions = {
    'maxWidth' : popupWidth,
    'maxHeight' : popupHeight,
    'autoPan' : 'true',
    'closeButton' : 'true',
    'autoPanPadding': [5, 5]
}
4
  • 1
    I would say there is an error somewhere in your program logic. It looks like you are closing popup programmatically, based on some conditions. For example, Joseph Allen Memorial Plaque opens OK on zoom levels above 12, but disappears on zoom level 12 or lower. – TomazicM Jun 12 at 14:09
  • I understand what you mean and I'll investigate things like moveend to see if that is causing the issue. Thanks. – user25839 Jun 12 at 23:28
  • 1
    You have a lot of nice debug console program flow messages. Check those out and then look at your code logic. When everything goes OK and popup stays, there is a message current bounds is within the current overlay bbox.... When popup disappears, there is first message BBox is NOT within the current overlay bbox, creating currOverlayBbox, followed by Park POIs Layer, then creating Park POIs and so on. Here you should look for the culprit for popup disappearance. – TomazicM Jun 13 at 7:40
  • You are correct. It appears that if the popup is too big, it pans the map, but the map bbox is then pushed outside the bbox coords I have saved. When a user zooms to a location, I get the current bbox, plus 40% around it and pull the various points within that larger area. Kind of a cache so if a user pans the map a bit, it already has those points loaded too. But the dialog popping up move it outside the range and so the code thinks the user moved the map outside the box and needs to reload the data for those new coords. This is going to be fun to figure out, but I'll get there. Thanks! – user25839 Jun 13 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.