Having trouble displaying GeoJSON attributes in Leaflet container
I'm trying to create a dynamic pop-up in my leaflet map, in which I've put a link. When you click the link I'd like a pre-defined container to appear on the page, which displays certain attributes from the GeoJSON layer.
I've managed to get the the pop-up working and the link. The container also appears, but no matter what I try the text in the container remains the same.
The polygon layer to which the popup is bound looks like this:
var container = $('<div />');
var poly = new L.GeoJSON.AJAX("polygons.geojson", {
style: {"color": "red",
"weight": 5,
"opacity": 0.65},
onEachFeature: function(feature, layer){
container.on('click', '.smallPolygonLink', function() {
if (feature.properties.attribute1 == 'value1') {
alert("This is one message");
}
else if (feature.properties.attribute1 == 'value2'){
alert("this is another message");
}
});
}
});
What is supposed to happen is that the container should be filled with one of the two strings depending on the value. The following code is the content of the popup which seems to work:
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))
The issue with all the code above, is that it produces an infinite loop and the message doesn't depend on the value of the attribute.
Hope you can help
javascript popup leaflet geojson
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
add a comment |
I'm trying to create a dynamic pop-up in my leaflet map, in which I've put a link. When you click the link I'd like a pre-defined container to appear on the page, which displays certain attributes from the GeoJSON layer.
I've managed to get the the pop-up working and the link. The container also appears, but no matter what I try the text in the container remains the same.
The polygon layer to which the popup is bound looks like this:
var container = $('<div />');
var poly = new L.GeoJSON.AJAX("polygons.geojson", {
style: {"color": "red",
"weight": 5,
"opacity": 0.65},
onEachFeature: function(feature, layer){
container.on('click', '.smallPolygonLink', function() {
if (feature.properties.attribute1 == 'value1') {
alert("This is one message");
}
else if (feature.properties.attribute1 == 'value2'){
alert("this is another message");
}
});
}
});
What is supposed to happen is that the container should be filled with one of the two strings depending on the value. The following code is the content of the popup which seems to work:
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))
The issue with all the code above, is that it produces an infinite loop and the message doesn't depend on the value of the attribute.
Hope you can help
javascript popup leaflet geojson
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
add a comment |
I'm trying to create a dynamic pop-up in my leaflet map, in which I've put a link. When you click the link I'd like a pre-defined container to appear on the page, which displays certain attributes from the GeoJSON layer.
I've managed to get the the pop-up working and the link. The container also appears, but no matter what I try the text in the container remains the same.
The polygon layer to which the popup is bound looks like this:
var container = $('<div />');
var poly = new L.GeoJSON.AJAX("polygons.geojson", {
style: {"color": "red",
"weight": 5,
"opacity": 0.65},
onEachFeature: function(feature, layer){
container.on('click', '.smallPolygonLink', function() {
if (feature.properties.attribute1 == 'value1') {
alert("This is one message");
}
else if (feature.properties.attribute1 == 'value2'){
alert("this is another message");
}
});
}
});
What is supposed to happen is that the container should be filled with one of the two strings depending on the value. The following code is the content of the popup which seems to work:
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))
The issue with all the code above, is that it produces an infinite loop and the message doesn't depend on the value of the attribute.
Hope you can help
javascript popup leaflet geojson
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
I'm trying to create a dynamic pop-up in my leaflet map, in which I've put a link. When you click the link I'd like a pre-defined container to appear on the page, which displays certain attributes from the GeoJSON layer.
I've managed to get the the pop-up working and the link. The container also appears, but no matter what I try the text in the container remains the same.
The polygon layer to which the popup is bound looks like this:
var container = $('<div />');
var poly = new L.GeoJSON.AJAX("polygons.geojson", {
style: {"color": "red",
"weight": 5,
"opacity": 0.65},
onEachFeature: function(feature, layer){
container.on('click', '.smallPolygonLink', function() {
if (feature.properties.attribute1 == 'value1') {
alert("This is one message");
}
else if (feature.properties.attribute1 == 'value2'){
alert("this is another message");
}
});
}
});
What is supposed to happen is that the container should be filled with one of the two strings depending on the value. The following code is the content of the popup which seems to work:
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))
The issue with all the code above, is that it produces an infinite loop and the message doesn't depend on the value of the attribute.
Hope you can help
javascript popup leaflet geojson
javascript popup leaflet geojson
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
asked Nov 12 '18 at 13:14
Tobias Hjelmbjerg
11
11
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
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: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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%2fstackoverflow.com%2fquestions%2f53262957%2fhaving-trouble-displaying-geojson-attributes-in-leaflet-container%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2fstackoverflow.com%2fquestions%2f53262957%2fhaving-trouble-displaying-geojson-attributes-in-leaflet-container%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
