0

EDITED: I made a jsfiddle at jsfiddle.net/ccoffin/4rwo3kLu/1 Currently, when the user clicks a marker both the popup and infowindow open. When clicking the closeButton on the popup both windows close. This is the desired behaivor. When clicking anywhere except a marker the last viewed infowindow opens again. Not the desired behaivor. That's because I'm using #map in the show() function (first instance on line 418 in the html of the fiddle) which I know is wrong. It seems like I need to use whatever layer I'm acting on but I'm not sure how to call just that one layer.

Perhaps an easier way to describe the issue is that I would like the right hand infowindow to open and close in tandem with it's associated popup.

------------- original post: When a user clicks a marker on my map two items open, a popup and a related infowindow (the infowindow being absolutely positioned to the top right of the map). I want to get both items to close when the user clicks either the closeButton on the popup, the layer not using the infowindow (demographics), or anywhere in the non-active areas of the map. If I put the infowindow content into the popup window code I've been unable to place the infowindow content outside of the popup box.

I've tried many different things but being new to this kind of code I'm not sure if what I want is possible or if it's a matter of finding the right code. I'm using carto.js v4 to build my map, grabbing bits from examples and shaping them to my needs. I've thought maybe some variation of featureClicked might do the job but I haven't found an example of using it that way. The closest I've been able to get is when I use the following code placed at the end of the popup block:

$(function() {
  $("a[href='#close']").click(function() {  $('.informationbox').hide();});
  $("#map").click(function() {  $('.informationbox').show();});
});

This closes the infowindow when using the popup closeButton but it reopens when clicking anywhere else on the map. This is due to using #map for the .show part of the function (as expected). You can view a live version of the map at: http://pstrust.org/carto/mapdebug.htm

I'm building the popup and the infowindow with the following code: POPUP:

//gas transmission POPUP
const gasTransmissionPopup = L.popup({ closeButton: true });
  gasTransmissionLayer.on('featureClicked', featureEvent => {
    gasTransmissionPopup.setLatLng(featureEvent.latLng);
    gasTransmissionPopup.setContent(`
        <div class="pop-border">
        <div class="pop-head, transmission-fill"><span class="pop-white-title">Gas Transmission Incident</span></div>
        <div class="pop-titlebox-buffer"></div>
            <div><span class="pop-subtitle">Event Date/Time:</span><span class="pop-data">${featureEvent.data.local_datetime}</span></div>
            <div><span class="pop-subtitle">Location:</span><span class="pop-data">${featureEvent.data.onshore_city_name}, ${featureEvent.data.onshore_postal_code}<br />${featureEvent.data.onshore_county_name} County</span></div>
        </div>
        <div class="CDB-hook">
        <div class="CDB-hook-inner">
        </div>
        </div>
    `);
  gasTransmissionPopup.openOn(map);
  $(function() {
    $("a[href='#close']").click(function() {  $('.informationbox').hide();});
    $("#map").click(function() {  $('.informationbox').show();});
    });
});

INFOWINDOW:

//gas transmission
const gasTransmissionInfo = gasTransmissionLayer.on('featureClicked', featureEvent => {
//add decimals and commas to large numbers
var unintentional = featureEvent.data.unintentional_release
var totalCost = featureEvent.data.total_cost_current
var formatter = new Intl.NumberFormat('en-EN',{ useGrouping: true, maximumFractionDigits:2})
formatter.format(unintentional)
formatter.format(totalCost)
const content = `
<div class="info-border">
<div class="info-head, transmission-fill"><span class="info-white-title">Gas Transmission Incident<br /><span class="infoscrollfoot">scroll for more</span></span></div>
<div class="info-titlebox-buffer"></div>
    <div><span class="info-subtitle">Event Date/Time:</span><span class="info-data">${featureEvent.data.local_datetime}</span></div>
    <div><span class="info-subtitle">City Name:</span><span class="info-data">${featureEvent.data.onshore_city_name}</span></div>
    <div><span class="info-subtitle">Postal Code:</span><span class="info-data">${featureEvent.data.onshore_postal_code}</span></div>
    <div><span class="info-subtitle">County Name:</span><span class="info-data">${featureEvent.data.onshore_county_name}</span></div>
    <div><span class="info-subtitle">Datafile As Of:</span><span class="info-data">${featureEvent.data.datafile_as_of}</span></div>
    <div><span class="info-subtitle">Significant:</span><span class="info-data">${featureEvent.data.significant}</span></div>
    <div><span class="info-subtitle">Serious:</span><span class="info-data">${featureEvent.data.serious}</span></div>
    <div><span class="info-subtitle">System Type:</span><span class="info-data">${featureEvent.data.system_type}</span></div>
    <div><span class="info-subtitle">Report Number:</span><span class="info-data">${featureEvent.data.report_number}</span></div>
    <div><span class="info-subtitle">Name:</span><span class="info-data">${featureEvent.data.name}</span></div>
    <div><span class="info-subtitle">Operator Postal Code:</span><span class="info-data">${featureEvent.data.operator_postal_code}</span></div>
    <div><span class="info-subtitle">Incident Resulted:</span><span class="info-data">${featureEvent.data.incident_resulted}</span></div>
    <div><span class="info-subtitle">Commodity Released Type:</span><span class="info-data">${featureEvent.data.commodity_released_type}</span></div>
    <div><span class="info-subtitle">Unintentional Release:</span><span class="info-data">${formatter.format(unintentional)} <span style="font-style:italic;font-size:10px;">(MCF)</span></span></div>
    <div><span class="info-subtitle">Fatal:</span><span class="info-data">${featureEvent.data.fatal}</span></div>
    <div><span class="info-subtitle">Injure:</span><span class="info-data">${featureEvent.data.injure}</span></div>
    <div><span class="info-subtitle">Shutdown Due Accident Ind:</span><span class="info-data">${featureEvent.data.shutdown_due_accident_ind}</span></div>
    <div><span class="info-subtitle">Ignite Ind:</span><span class="info-data">${featureEvent.data.ignite_ind}</span></div>
    <div><span class="info-subtitle">Explode Ind:</span><span class="info-data">${featureEvent.data.explode_ind}</span></div>
    <div><span class="info-subtitle">Pipe Facility Type:</span><span class="info-data">${featureEvent.data.pipe_facility_type}</span></div>
    <div><span class="info-subtitle">Item Involved:</span><span class="info-data">${featureEvent.data.item_involved}</span></div>
    <div><span class="info-subtitle">Pipe Type:</span><span class="info-data">${featureEvent.data.pipe_type}</span></div>
    <div><span class="info-subtitle">Pipe Diameter:</span><span class="info-data">${featureEvent.data.pipe_diameter}</span></div>
    <div><span class="info-subtitle">Pipe Wall Thickness:</span><span class="info-data">${featureEvent.data.pipe_wall_thickness}</span></div>
    <div><span class="info-subtitle">Installation Year:</span><span class="info-data">${featureEvent.data.installation_year}</span></div>
    <div><span class="info-subtitle">Material Involved:</span><span class="info-data">${featureEvent.data.material_involved}</span></div>
    <div><span class="info-subtitle">Release Type:</span><span class="info-data">${featureEvent.data.release_type}</span></div>
    <div><span class="info-subtitle">Class Location Type:</span><span class="info-data">${featureEvent.data.class_location_type}</span></div>
    <div><span class="info-subtitle">Could Be HCA:</span><span class="info-data">${featureEvent.data.could_be_hca}</span></div>
    <div><span class="info-subtitle">Determination Method:</span><span class="info-data">${featureEvent.data.determination_method}</span></div>
    <div><span class="info-subtitle">Pir Radius:</span><span class="info-data">${featureEvent.data.pir_radius}</span></div>
    <div><span class="info-subtitle">Total Cost Current:</span><span class="info-data">$${formatter.format(totalCost)}</span></div>
    <div><span class="info-subtitle">Accident Psig:</span><span class="info-data">${featureEvent.data.accident_psig}</span></div>
    <div><span class="info-subtitle">Mop Psig:</span><span class="info-data">${featureEvent.data.mop_psig}</span></div>
    <div><span class="info-subtitle">Cause:</span><span class="info-data">${featureEvent.data.cause}</span></div>
    <div><span class="info-subtitle">Cause Details:</span><span class="info-data">${featureEvent.data.cause_details}</span></div>
</div>
`;
document.getElementById('info').innerHTML = content;
featureVisible = true;
});
  • It would help (and encourage!) to provide a minimum example of the behavior you are getting using Jsfiddle or something like that, so we can take a look without having getting distracted by code not related with your issue. – Jorge Sanz Aug 7 '18 at 8:35
  • Okay, thanks. I made a jsfiddle at jsfiddle.net/ccoffin/4rwo3kLu/1 Currently, when the user clicks a marker both the popup and infowindow open. When clicking the closeButton on the popup both windows close. This is the desired behaivor. When clicking anywhere except a marker the last viewed infowindow opens again. Not the desired behaivor. That's because I'm using #map in the show() function (first instance on line 418 in the html of the fiddle) which I know is wrong. It seems like I need to use whatever layer I'm acting on but I'm not sure how to call just that one layer. – Chris Coffin Aug 7 '18 at 15:37
  • Perhaps an easier way to describe the issue is that I would like the right hand infowindow to open and close in tandem with it's associated popup. – Chris Coffin Aug 7 '18 at 16:03

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.