Leaflet dialog box that contains info on 1 to n layers that were clicked on Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Turf intersect point with Leaflet GeoJSON errorLeaflet.js and CartoDB.js event conflictA problem with event firing upon mouseoutMarkerCluster don't work with geojson layer in leafletOpen popup of a feature with its markerOpenlayers3, vector data layer not visible after proceeding select onchange functionGetting feature's property by clicking on it?Adding PieChart Layer through DVF in a Leaflet mapLeaflet - How to show feature properties in a box that is not a popup?Leaflet info box error on same name properties in multiple layersLeaflet info box only showing properties from selected layer
Trademark violation for app?
How to react to hostile behavior from a senior developer?
What is a fractional matching?
How were pictures turned from film to a big picture in a picture frame before digital scanning?
Take 2! Is this homebrew Lady of Pain warlock patron balanced?
What was the first language to use conditional keywords?
Find 108 by using 3,4,6
Effects on objects due to a brief relocation of massive amounts of mass
Generate an RGB colour grid
How to write the following sign?
Crossing US/Canada Border for less than 24 hours
NumericArray versus PackedArray in MMA12
Sum letters are not two different
Does lack of seasonality imply random time series?
Can a new player join a group only when a new campaign starts?
An adverb for when you're not exaggerating
How do I find out the mythology and history of my Fortress?
Why is it faster to reheat something than it is to cook it?
Is CEO the "profession" with the most psychopaths?
Disembodied hand growing fangs
Drawing without replacement: why the order of draw is irrelevant?
How often does castling occur in grandmaster games?
How fail-safe is nr as stop bytes?
Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?
Leaflet dialog box that contains info on 1 to n layers that were clicked on
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?Leaflet: 4 overlay layers, 1 click, get properties of all intersecting polygons.Turf intersect point with Leaflet GeoJSON errorLeaflet.js and CartoDB.js event conflictA problem with event firing upon mouseoutMarkerCluster don't work with geojson layer in leafletOpen popup of a feature with its markerOpenlayers3, vector data layer not visible after proceeding select onchange functionGetting feature's property by clicking on it?Adding PieChart Layer through DVF in a Leaflet mapLeaflet - How to show feature properties in a box that is not a popup?Leaflet info box error on same name properties in multiple layersLeaflet info box only showing properties from selected layer
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have a Leaflet application where the user can click on a feature and the info for that feature will be updated in dialog box.
var info = L.control();
info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
;
info.update = function (props)
this._div.innerHTML = '<h4>Property Info</h4>' + (props ? '<b>Address: '+ props.address +'<br>Property Type: '+props.buff+'<br>Buffer Distance: '+props.buff_dist: 'Click on a Property Pal');
;
info.addTo(map);
var theMarker=
var main_layer;
map.on('click', function(e)
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(l)layer.resetStyle(l););
;
);
var str = "Latitude: " + e.latlng.lat.toFixed(5) + " Longitude: " + e.latlng.lng.toFixed(5) + " Zoom Level: " + map.getZoom();
var lat = e.latlng.lat;
var lng = e.latlng.lng;
ProcessClick(lat,lng,str)
);
function ProcessClick(lat,lng,str)
if (theMarker != undefined)
map.removeLayer(theMarker);
;
theMarker=L.marker([lat,lng],icon: pineapple_icon).addTo(map);
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(layer2)
var click_intersection = turf.booleanPointInPolygon(theMarker.toGeoJSON(), layer2.toGeoJSON());
if (click_intersection)
layer2.setStyle(fillColor: 'lightblue', opacity: 0.8);
var i=layer2.feature.properties;
console.log(layer2.feature.properties);
info.update(i);
;
);
);
$("#map_coords").html(str);
;
The code is setup so the user can click on multiple overlapping features but only the last feature that is clicked gets its info displayed in the dialog box on the top right.
Picture below explanation: the childcare and religious buffers layers are displayed on the map. in this example I click on an overlapping childcare and religious buffer. When I click on these features they get highlighted and the info from these two features updates the top right dialog box (would this be called a dialog box?).
What I want: A dialog box that stores all the info from the features that are clicked. A way to scroll through the results and when info from one feature is displayed in the dialog box, only that feature will be highlighted.
leaflet javascript
edited Apr 10 at 23:17
Vince
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
add a comment |
I have a Leaflet application where the user can click on a feature and the info for that feature will be updated in dialog box.
var info = L.control();
info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
;
info.update = function (props)
this._div.innerHTML = '<h4>Property Info</h4>' + (props ? '<b>Address: '+ props.address +'<br>Property Type: '+props.buff+'<br>Buffer Distance: '+props.buff_dist: 'Click on a Property Pal');
;
info.addTo(map);
var theMarker=
var main_layer;
map.on('click', function(e)
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(l)layer.resetStyle(l););
;
);
var str = "Latitude: " + e.latlng.lat.toFixed(5) + " Longitude: " + e.latlng.lng.toFixed(5) + " Zoom Level: " + map.getZoom();
var lat = e.latlng.lat;
var lng = e.latlng.lng;
ProcessClick(lat,lng,str)
);
function ProcessClick(lat,lng,str)
if (theMarker != undefined)
map.removeLayer(theMarker);
;
theMarker=L.marker([lat,lng],icon: pineapple_icon).addTo(map);
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(layer2)
var click_intersection = turf.booleanPointInPolygon(theMarker.toGeoJSON(), layer2.toGeoJSON());
if (click_intersection)
layer2.setStyle(fillColor: 'lightblue', opacity: 0.8);
var i=layer2.feature.properties;
console.log(layer2.feature.properties);
info.update(i);
;
);
);
$("#map_coords").html(str);
;
The code is setup so the user can click on multiple overlapping features but only the last feature that is clicked gets its info displayed in the dialog box on the top right.
Picture below explanation: the childcare and religious buffers layers are displayed on the map. in this example I click on an overlapping childcare and religious buffer. When I click on these features they get highlighted and the info from these two features updates the top right dialog box (would this be called a dialog box?).
What I want: A dialog box that stores all the info from the features that are clicked. A way to scroll through the results and when info from one feature is displayed in the dialog box, only that feature will be highlighted.
leaflet javascript
edited Apr 10 at 23:17
Vince
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
1
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30
add a comment |
I have a Leaflet application where the user can click on a feature and the info for that feature will be updated in dialog box.
var info = L.control();
info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
;
info.update = function (props)
this._div.innerHTML = '<h4>Property Info</h4>' + (props ? '<b>Address: '+ props.address +'<br>Property Type: '+props.buff+'<br>Buffer Distance: '+props.buff_dist: 'Click on a Property Pal');
;
info.addTo(map);
var theMarker=
var main_layer;
map.on('click', function(e)
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(l)layer.resetStyle(l););
;
);
var str = "Latitude: " + e.latlng.lat.toFixed(5) + " Longitude: " + e.latlng.lng.toFixed(5) + " Zoom Level: " + map.getZoom();
var lat = e.latlng.lat;
var lng = e.latlng.lng;
ProcessClick(lat,lng,str)
);
function ProcessClick(lat,lng,str)
if (theMarker != undefined)
map.removeLayer(theMarker);
;
theMarker=L.marker([lat,lng],icon: pineapple_icon).addTo(map);
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(layer2)
var click_intersection = turf.booleanPointInPolygon(theMarker.toGeoJSON(), layer2.toGeoJSON());
if (click_intersection)
layer2.setStyle(fillColor: 'lightblue', opacity: 0.8);
var i=layer2.feature.properties;
console.log(layer2.feature.properties);
info.update(i);
;
);
);
$("#map_coords").html(str);
;
The code is setup so the user can click on multiple overlapping features but only the last feature that is clicked gets its info displayed in the dialog box on the top right.
Picture below explanation: the childcare and religious buffers layers are displayed on the map. in this example I click on an overlapping childcare and religious buffer. When I click on these features they get highlighted and the info from these two features updates the top right dialog box (would this be called a dialog box?).
What I want: A dialog box that stores all the info from the features that are clicked. A way to scroll through the results and when info from one feature is displayed in the dialog box, only that feature will be highlighted.
leaflet javascript
edited Apr 10 at 23:17
Vince
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
I have a Leaflet application where the user can click on a feature and the info for that feature will be updated in dialog box.
var info = L.control();
info.onAdd = function (map)
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
;
info.update = function (props)
this._div.innerHTML = '<h4>Property Info</h4>' + (props ? '<b>Address: '+ props.address +'<br>Property Type: '+props.buff+'<br>Buffer Distance: '+props.buff_dist: 'Click on a Property Pal');
;
info.addTo(map);
var theMarker=
var main_layer;
map.on('click', function(e)
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(l)layer.resetStyle(l););
;
);
var str = "Latitude: " + e.latlng.lat.toFixed(5) + " Longitude: " + e.latlng.lng.toFixed(5) + " Zoom Level: " + map.getZoom();
var lat = e.latlng.lat;
var lng = e.latlng.lng;
ProcessClick(lat,lng,str)
);
function ProcessClick(lat,lng,str)
if (theMarker != undefined)
map.removeLayer(theMarker);
;
theMarker=L.marker([lat,lng],icon: pineapple_icon).addTo(map);
map.eachLayer(function(layer)
if (layer instanceof L.GeoJSON)
layer.eachLayer(function(layer2)
var click_intersection = turf.booleanPointInPolygon(theMarker.toGeoJSON(), layer2.toGeoJSON());
if (click_intersection)
layer2.setStyle(fillColor: 'lightblue', opacity: 0.8);
var i=layer2.feature.properties;
console.log(layer2.feature.properties);
info.update(i);
;
);
);
$("#map_coords").html(str);
;
The code is setup so the user can click on multiple overlapping features but only the last feature that is clicked gets its info displayed in the dialog box on the top right.
Picture below explanation: the childcare and religious buffers layers are displayed on the map. in this example I click on an overlapping childcare and religious buffer. When I click on these features they get highlighted and the info from these two features updates the top right dialog box (would this be called a dialog box?).
What I want: A dialog box that stores all the info from the features that are clicked. A way to scroll through the results and when info from one feature is displayed in the dialog box, only that feature will be highlighted.
leaflet javascript
leaflet javascript
edited Apr 10 at 23:17
Vince
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
edited Apr 10 at 23:17
Vince
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
edited Apr 10 at 23:17
Vince
14.8k32850
edited Apr 10 at 23:17
Vince
14.8k32850
edited Apr 10 at 23:17
Vince
14.8k32850
14.8k32850
asked Apr 10 at 20:01
ziggyziggy
2,00421136
asked Apr 10 at 20:01
ziggyziggy
2,00421136
asked Apr 10 at 20:01
ziggyziggy
2,00421136
2,00421136
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
1
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30
add a comment |
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
1
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
1
1
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f318424%2fleaflet-dialog-box-that-contains-info-on-1-to-n-layers-that-were-clicked-on%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
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f318424%2fleaflet-dialog-box-that-contains-info-on-1-to-n-layers-that-were-clicked-on%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
Leaflet-pip plugin (github.com/mapbox/leaflet-pip) might come handy here (see QA gis.stackexchange.com/questions/245090/…)
– TomazicM
Apr 10 at 21:05
The issue isn't getting the info from multiple layers. My code does that. The issue is displaying all of it at once in some sort of scrollable dialog box
– ziggy
Apr 11 at 0:50
1
Maybe this question is more meant for stackoverflow...
– ziggy
Apr 11 at 0:52
I didn't scroll down your code so I didn't notice you are using turf to detect all layers. As far as your question qoes, it's then really of pure HTML nature.
– TomazicM
Apr 11 at 5:18
Here is a link to a similar question, In my answer I pushed the results to a bootstrap dialog with tabs for each layer. The data was pushed to variables but could have been arrays for more info. gis.stackexchange.com/questions/315564/… gistechsolutions.com/leaflet/DEMO/pointsinpoly/indextab.html
– Bill Chappell
Apr 11 at 12:30