Leaflet info box only showing properties from selected layer The 2019 Stack Overflow Developer Survey Results Are InLeaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Turf intersect point with Leaflet GeoJSON errorChanging list-item css class using ng-class when mousing over Leaflet Map Markers?A problem with event firing upon mouseoutMarkerCluster don't work with geojson layer in leafletDynamically change Leaflet layerLeaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Adding PieChart Layer through DVF in a Leaflet mapDefining which layer (overlay) is displayed on Leaflet map?How to plot Feature properties into a html div label using Leaflet and omnivore?Leaflet - How to show feature properties in a box that is not a popup?Leaflet info box error on same name properties in multiple layers

What do hard-Brexiteers want with respect to the Irish border?

Is it possible for the two major parties in the UK to form a coalition with each other instead of a much smaller party?

Understanding the implication of what "well-defined" means for the operation in quotient group

Why is the maximum length of OpenWrt’s root password 8 characters?

Falsification in Math vs Science

Does light intensity oscillate really fast since it is a wave?

How are circuits which use complex ICs normally simulated?

Does duplicating a spell with Wish count as casting that spell?

Unbreakable Formation vs. Cry of the Carnarium

Why isn't airport relocation done gradually?

How was Skylab's orbit inclination chosen?

I looked up a future colleague on LinkedIn before I started a job. I told my colleague about it and he seemed surprised. Should I apologize?

I see my dog run

What can other administrators access on my machine?

JSON.serialize: is it possible to suppress null values of a map?

How to manage monthly salary

What effect does the “loading” weapon property have in practical terms?

What are my rights when I have a Sparpreis ticket but can't board an overcrowded train?

What does "sndry explns" mean in one of the Hitchhiker's guide books?

Could JWST stay at L2 "forever"?

Is there a name of the flying bionic bird?

What is the use of option -o in the useradd command?

Lethal sonic weapons

What is this 4-propeller plane?



Leaflet info box only showing properties from selected layer



The 2019 Stack Overflow Developer Survey Results Are InLeaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Turf intersect point with Leaflet GeoJSON errorChanging list-item css class using ng-class when mousing over Leaflet Map Markers?A problem with event firing upon mouseoutMarkerCluster don't work with geojson layer in leafletDynamically change Leaflet layerLeaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Adding PieChart Layer through DVF in a Leaflet mapDefining which layer (overlay) is displayed on Leaflet map?How to plot Feature properties into a html div label using Leaflet and omnivore?Leaflet - How to show feature properties in a box that is not a popup?Leaflet info box error on same name properties in multiple layers



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








2















I would like to use the info box as shown in the tutorial interactive choropleth map with multiple layers and properties from different layers.
The idea is to only show the properties from the selected layer.



For example the infobox has both Statename and Cityname as properties. Statename is a property in the layer States and Cityname is a property in the layer Cities.



var info = L.control(position:'topleft');

info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;;

info.update = function (pro)
this._div.innerHTML = '<h4>Information</h4>' + (pro ?
'<b>State ' + pro.Statename + '</b><br />City ' + pro.Cityname + ''
: 'hover over map');;

info.addTo(map);


And to use the infobox the following three parts within the var for each layer



function infoFeatureStates(e) 
var layer = e.target;
info.update(layer.feature.properties);


To empty the infobox



function resetInfoState(e) 
info.update();


Eventlistener



function onEachFeatureState(feature, layer) 
layer.on(
mouseover: infoFeatureState,
mouseout: resetInfoState,);


And similar functions for the other layer: infoFeatureCities, resetInfoCities, onEachFeatureCity.



When hovering over a feature from the layer States, the infobox now shows both properties, with the correct value for Statename and showing Cityname 'Undefined' as it is not a property of that layer. And vice versa when hovering over a feature from Cities layer.



I would like the info box to only be populated by the properties that are part of the selected layer (based on the feature selected by mouseover). So it doesn't show Cityname Undefined when hovering over a feature from layer States.



How do I tell the infobox with property belongs to which layer?
And how do I change which properties are shown depending on which feature (layer) is selected?



Or should I build something else completely?










share|improve this question









New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Seeing some of your code would be helpful in helping you.

    – TomazicM
    Apr 4 at 15:16











  • I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

    – Kadir Şahbaz
    Apr 4 at 21:17












  • This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

    – Bill Chappell
    Apr 5 at 15:43












  • If I understand correctly you want to show only info of topmost feature when features overlap?

    – TomazicM
    10 hours ago

















2















I would like to use the info box as shown in the tutorial interactive choropleth map with multiple layers and properties from different layers.
The idea is to only show the properties from the selected layer.



For example the infobox has both Statename and Cityname as properties. Statename is a property in the layer States and Cityname is a property in the layer Cities.



var info = L.control(position:'topleft');

info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;;

info.update = function (pro)
this._div.innerHTML = '<h4>Information</h4>' + (pro ?
'<b>State ' + pro.Statename + '</b><br />City ' + pro.Cityname + ''
: 'hover over map');;

info.addTo(map);


And to use the infobox the following three parts within the var for each layer



function infoFeatureStates(e) 
var layer = e.target;
info.update(layer.feature.properties);


To empty the infobox



function resetInfoState(e) 
info.update();


Eventlistener



function onEachFeatureState(feature, layer) 
layer.on(
mouseover: infoFeatureState,
mouseout: resetInfoState,);


And similar functions for the other layer: infoFeatureCities, resetInfoCities, onEachFeatureCity.



When hovering over a feature from the layer States, the infobox now shows both properties, with the correct value for Statename and showing Cityname 'Undefined' as it is not a property of that layer. And vice versa when hovering over a feature from Cities layer.



I would like the info box to only be populated by the properties that are part of the selected layer (based on the feature selected by mouseover). So it doesn't show Cityname Undefined when hovering over a feature from layer States.



How do I tell the infobox with property belongs to which layer?
And how do I change which properties are shown depending on which feature (layer) is selected?



Or should I build something else completely?










share|improve this question









New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • Seeing some of your code would be helpful in helping you.

    – TomazicM
    Apr 4 at 15:16











  • I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

    – Kadir Şahbaz
    Apr 4 at 21:17












  • This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

    – Bill Chappell
    Apr 5 at 15:43












  • If I understand correctly you want to show only info of topmost feature when features overlap?

    – TomazicM
    10 hours ago













2












2








2


1






I would like to use the info box as shown in the tutorial interactive choropleth map with multiple layers and properties from different layers.
The idea is to only show the properties from the selected layer.



For example the infobox has both Statename and Cityname as properties. Statename is a property in the layer States and Cityname is a property in the layer Cities.



var info = L.control(position:'topleft');

info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;;

info.update = function (pro)
this._div.innerHTML = '<h4>Information</h4>' + (pro ?
'<b>State ' + pro.Statename + '</b><br />City ' + pro.Cityname + ''
: 'hover over map');;

info.addTo(map);


And to use the infobox the following three parts within the var for each layer



function infoFeatureStates(e) 
var layer = e.target;
info.update(layer.feature.properties);


To empty the infobox



function resetInfoState(e) 
info.update();


Eventlistener



function onEachFeatureState(feature, layer) 
layer.on(
mouseover: infoFeatureState,
mouseout: resetInfoState,);


And similar functions for the other layer: infoFeatureCities, resetInfoCities, onEachFeatureCity.



When hovering over a feature from the layer States, the infobox now shows both properties, with the correct value for Statename and showing Cityname 'Undefined' as it is not a property of that layer. And vice versa when hovering over a feature from Cities layer.



I would like the info box to only be populated by the properties that are part of the selected layer (based on the feature selected by mouseover). So it doesn't show Cityname Undefined when hovering over a feature from layer States.



How do I tell the infobox with property belongs to which layer?
And how do I change which properties are shown depending on which feature (layer) is selected?



Or should I build something else completely?










share|improve this question









New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












I would like to use the info box as shown in the tutorial interactive choropleth map with multiple layers and properties from different layers.
The idea is to only show the properties from the selected layer.



For example the infobox has both Statename and Cityname as properties. Statename is a property in the layer States and Cityname is a property in the layer Cities.



var info = L.control(position:'topleft');

info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;;

info.update = function (pro)
this._div.innerHTML = '<h4>Information</h4>' + (pro ?
'<b>State ' + pro.Statename + '</b><br />City ' + pro.Cityname + ''
: 'hover over map');;

info.addTo(map);


And to use the infobox the following three parts within the var for each layer



function infoFeatureStates(e) 
var layer = e.target;
info.update(layer.feature.properties);


To empty the infobox



function resetInfoState(e) 
info.update();


Eventlistener



function onEachFeatureState(feature, layer) 
layer.on(
mouseover: infoFeatureState,
mouseout: resetInfoState,);


And similar functions for the other layer: infoFeatureCities, resetInfoCities, onEachFeatureCity.



When hovering over a feature from the layer States, the infobox now shows both properties, with the correct value for Statename and showing Cityname 'Undefined' as it is not a property of that layer. And vice versa when hovering over a feature from Cities layer.



I would like the info box to only be populated by the properties that are part of the selected layer (based on the feature selected by mouseover). So it doesn't show Cityname Undefined when hovering over a feature from layer States.



How do I tell the infobox with property belongs to which layer?
And how do I change which properties are shown depending on which feature (layer) is selected?



Or should I build something else completely?







leaflet






share|improve this question









New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question









New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question








edited Apr 4 at 18:56







JoeneGB













New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked Apr 4 at 14:46









JoeneGBJoeneGB

112




112




New contributor




JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






JoeneGB is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • Seeing some of your code would be helpful in helping you.

    – TomazicM
    Apr 4 at 15:16











  • I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

    – Kadir Şahbaz
    Apr 4 at 21:17












  • This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

    – Bill Chappell
    Apr 5 at 15:43












  • If I understand correctly you want to show only info of topmost feature when features overlap?

    – TomazicM
    10 hours ago

















  • Seeing some of your code would be helpful in helping you.

    – TomazicM
    Apr 4 at 15:16











  • I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

    – Kadir Şahbaz
    Apr 4 at 21:17












  • This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

    – Bill Chappell
    Apr 5 at 15:43












  • If I understand correctly you want to show only info of topmost feature when features overlap?

    – TomazicM
    10 hours ago
















Seeing some of your code would be helpful in helping you.

– TomazicM
Apr 4 at 15:16





Seeing some of your code would be helpful in helping you.

– TomazicM
Apr 4 at 15:16













I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

– Kadir Şahbaz
Apr 4 at 21:17






I suggest you to review these posts: 1. Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons 2. Get all features of all layers clicked in leaflet

– Kadir Şahbaz
Apr 4 at 21:17














This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

– Bill Chappell
Apr 5 at 15:43






This may help gis.stackexchange.com/questions/315564/…, Here gistechsolutions.com/leaflet/DEMO/pointsinpoly/index.html I put results in a bootstrap dialog, but you could push them to a sidebar table or div just as easily. Just need something to like map.hasLayer() to determine if visible.

– Bill Chappell
Apr 5 at 15:43














If I understand correctly you want to show only info of topmost feature when features overlap?

– TomazicM
10 hours ago





If I understand correctly you want to show only info of topmost feature when features overlap?

– TomazicM
10 hours ago










0






active

oldest

votes












Your Answer








StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);






JoeneGB is a new contributor. Be nice, and check out our Code of Conduct.









draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317795%2fleaflet-info-box-only-showing-properties-from-selected-layer%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes








JoeneGB is a new contributor. Be nice, and check out our Code of Conduct.









draft saved

draft discarded


















JoeneGB is a new contributor. Be nice, and check out our Code of Conduct.












JoeneGB is a new contributor. Be nice, and check out our Code of Conduct.











JoeneGB is a new contributor. Be nice, and check out our Code of Conduct.














Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317795%2fleaflet-info-box-only-showing-properties-from-selected-layer%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

រឿង រ៉ូមេអូ និង ហ្ស៊ុយលីយេ សង្ខេបរឿង តួអង្គ បញ្ជីណែនាំ

Crop image to path created in TikZ? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Crop an inserted image?TikZ pictures does not appear in posterImage behind and beyond crop marks?Tikz picture as large as possible on A4 PageTransparency vs image compression dilemmaHow to crop background from image automatically?Image does not cropTikzexternal capturing crop marks when externalizing pgfplots?How to include image path that contains a dollar signCrop image with left size given

Romeo and Juliet ContentsCharactersSynopsisSourcesDate and textThemes and motifsCriticism and interpretationLegacyScene by sceneSee alsoNotes and referencesSourcesExternal linksNavigation menu"Consumer Price Index (estimate) 1800–"10.2307/28710160037-3222287101610.1093/res/II.5.31910.2307/45967845967810.2307/2869925286992510.1525/jams.1982.35.3.03a00050"Dada Masilo: South African dancer who breaks the rules"10.1093/res/os-XV.57.1610.2307/28680942868094"Sweet Sorrow: Mann-Korman's Romeo and Juliet Closes Sept. 5 at MN's Ordway"the original10.2307/45957745957710.1017/CCOL0521570476.009"Ram Leela box office collections hit massive Rs 100 crore, pulverises prediction"Archived"Broadway Revival of Romeo and Juliet, Starring Orlando Bloom and Condola Rashad, Will Close Dec. 8"Archived10.1075/jhp.7.1.04hon"Wherefore art thou, Romeo? To make us laugh at Navy Pier"the original10.1093/gmo/9781561592630.article.O006772"Ram-leela Review Roundup: Critics Hail Film as Best Adaptation of Romeo and Juliet"Archived10.2307/31946310047-77293194631"Romeo and Juliet get Twitter treatment""Juliet's Nurse by Lois Leveen""Romeo and Juliet: Orlando Bloom's Broadway Debut Released in Theaters for Valentine's Day"Archived"Romeo and Juliet Has No Balcony"10.1093/gmo/9781561592630.article.O00778110.2307/2867423286742310.1076/enst.82.2.115.959510.1080/00138380601042675"A plague o' both your houses: error in GCSE exam paper forces apology""Juliet of the Five O'Clock Shadow, and Other Wonders"10.2307/33912430027-4321339124310.2307/28487440038-7134284874410.2307/29123140149-661129123144728341M"Weekender Guide: Shakespeare on The Drive""balcony"UK public library membership"romeo"UK public library membership10.1017/CCOL9780521844291"Post-Zionist Critique on Israel and the Palestinians Part III: Popular Culture"10.2307/25379071533-86140377-919X2537907"Capulets and Montagues: UK exam board admit mixing names up in Romeo and Juliet paper"Istoria Novellamente Ritrovata di Due Nobili Amanti2027/mdp.390150822329610820-750X"GCSE exam error: Board accidentally rewrites Shakespeare"10.2307/29176390149-66112917639"Exam board apologises after error in English GCSE paper which confused characters in Shakespeare's Romeo and Juliet""From Mariotto and Ganozza to Romeo and Guilietta: Metamorphoses of a Renaissance Tale"10.2307/37323537323510.2307/2867455286745510.2307/28678912867891"10 Questions for Taylor Swift"10.2307/28680922868092"Haymarket Theatre""The Zeffirelli Way: Revealing Talk by Florentine Director""Michael Smuin: 1938-2007 / Prolific dance director had showy career"The Life and Art of Edwin BoothRomeo and JulietRomeo and JulietRomeo and JulietRomeo and JulietEasy Read Romeo and JulietRomeo and Julieteeecb12003684p(data)4099369-3n8211610759dbe00d-a9e2-41a3-b2c1-977dd692899302814385X313670221313670221