Vjylku

Why didn't Boeing produce its own regional jet?

Ambiguity in the definition of entropy

iPad being using in wall mount battery swollen

How to Recreate this in LaTeX? (Unsure What the Notation is Called)

Is there a hemisphere-neutral way of specifying a season?

Venezuelan girlfriend wants to travel the USA to be with me. What is the process?

How dangerous is XSS?

How do I handle a potential work/personal life conflict as the manager of one of my friends?

If human space travel is limited by the G force vulnerability, is there a way to counter G forces?

How to tell a function to use the default argument values?

Avoiding direct proof while writing proof by induction

I would say: "You are another teacher", but she is a woman and I am a man

Is the myth that if you can play one instrument, you can learn another instrument with ease true?

What method can I use to design a dungeon difficult enough that the PCs can't make it through without killing them?

How could indestructible materials be used in power generation?

Arrow those variables!

Size of subfigure fitting its content (tikzpicture)

Should I cover my bicycle overnight while bikepacking?

How seriously should I take size and weight limits of hand luggage?

Is there an expression that means doing something right before you will need it rather than doing it in case you might need it?

How would I stat a creature to be immune to everything but the Magic Missile spell? (just for fun)

How to show a landlord what we have in savings?

How did the Super Star Destroyer Executor get destroyed exactly?

Zip/Tar file compressed to larger size?

How to get Leaflet layer control to work with GeoJSON files hosted online

How to get LatLng array from geoJSON Layer in Leaflet?How do you load a GeoJSON file in Leaflet?Leaflet popup options with geoJSON dataleaflet: javascript scope issue within geojson onEachFeature functionMarkerCluster don't work with geojson layer in leafletJavaScript Namespace/scope issueGetting simple geoJson point layer into Leaflet mapAdding a Layer Control Legend based on geoJson propertiesLeaflet L.geoJSON from a js variable geojson object not showing on mapUsing custom icons for Leaflet Layer groups?

2

1

I am having issues getting Leaflet's layer control to work if using GeoJSON files stored online, on Amazon Web Services. The points from the online file do show up with their popups as expected, but the actual layer control window at the top right of the map that allows you to select/deselect layers isn't there anymore. This is the JS part of the code that I am trying to run, with one of the links/GeoJSON files as an example:

function addDataToMap(data, map) {

    var dataLayer = L.geoJson(data, {

    pointToLayer: function (feature, latlng) {

    return L.circleMarker(latlng, point_style); 

    }, 

    onEachFeature: function(feature, layer) {

        var popupText = 'Name  --  ' + feature.properties.NAME + '<br>' + 'Address  --  ' + feature.properties.ADDRESS;

                 layer.bindPopup(popupText); }

        });

        dataLayer.addData(data);

        dataLayer.addTo(map); 

        } 

     $.getJSON("https://s3.amazonaws.com/aws-website-homebuyerrecommendationsystemfordenver-ag706/lightrail_geojson.json", function(data) { addDataToMap(data, map); }); 



var baseLayers = {

    "Light Rail Stations": dataLayer,

    "Parks": parks_popup

};

L.control.layers(null, baseLayers, {collapsed:false}).addTo(map);

If I pull the GeoJSON files as variables within the code then my layer control works fine. But I have several layers that I need to add and they are quite large, so hosting them online and pulling them with a simple $.getJSON command would be useful. Otherwise my html file becomes very long and freezes often while scrolling around.

Any ideas as to what I'm doing wrong? Or is the only way to get the layer control functionality from Leaflet to store the GeoJSONs as local variables?

leaflet geojson

share|improve this question

edited Aug 17 '16 at 20:08

spartmar

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

add a comment | 

2

1

I am having issues getting Leaflet's layer control to work if using GeoJSON files stored online, on Amazon Web Services. The points from the online file do show up with their popups as expected, but the actual layer control window at the top right of the map that allows you to select/deselect layers isn't there anymore. This is the JS part of the code that I am trying to run, with one of the links/GeoJSON files as an example:

function addDataToMap(data, map) {

    var dataLayer = L.geoJson(data, {

    pointToLayer: function (feature, latlng) {

    return L.circleMarker(latlng, point_style); 

    }, 

    onEachFeature: function(feature, layer) {

        var popupText = 'Name  --  ' + feature.properties.NAME + '<br>' + 'Address  --  ' + feature.properties.ADDRESS;

                 layer.bindPopup(popupText); }

        });

        dataLayer.addData(data);

        dataLayer.addTo(map); 

        } 

     $.getJSON("https://s3.amazonaws.com/aws-website-homebuyerrecommendationsystemfordenver-ag706/lightrail_geojson.json", function(data) { addDataToMap(data, map); }); 



var baseLayers = {

    "Light Rail Stations": dataLayer,

    "Parks": parks_popup

};

L.control.layers(null, baseLayers, {collapsed:false}).addTo(map);

If I pull the GeoJSON files as variables within the code then my layer control works fine. But I have several layers that I need to add and they are quite large, so hosting them online and pulling them with a simple $.getJSON command would be useful. Otherwise my html file becomes very long and freezes often while scrolling around.

Any ideas as to what I'm doing wrong? Or is the only way to get the layer control functionality from Leaflet to store the GeoJSONs as local variables?

leaflet geojson

share|improve this question

edited Aug 17 '16 at 20:08

spartmar

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

add a comment | 

I am having issues getting Leaflet's layer control to work if using GeoJSON files stored online, on Amazon Web Services. The points from the online file do show up with their popups as expected, but the actual layer control window at the top right of the map that allows you to select/deselect layers isn't there anymore. This is the JS part of the code that I am trying to run, with one of the links/GeoJSON files as an example:

function addDataToMap(data, map) {

    var dataLayer = L.geoJson(data, {

    pointToLayer: function (feature, latlng) {

    return L.circleMarker(latlng, point_style); 

    }, 

    onEachFeature: function(feature, layer) {

        var popupText = 'Name  --  ' + feature.properties.NAME + '<br>' + 'Address  --  ' + feature.properties.ADDRESS;

                 layer.bindPopup(popupText); }

        });

        dataLayer.addData(data);

        dataLayer.addTo(map); 

        } 

     $.getJSON("https://s3.amazonaws.com/aws-website-homebuyerrecommendationsystemfordenver-ag706/lightrail_geojson.json", function(data) { addDataToMap(data, map); }); 



var baseLayers = {

    "Light Rail Stations": dataLayer,

    "Parks": parks_popup

};

L.control.layers(null, baseLayers, {collapsed:false}).addTo(map);

If I pull the GeoJSON files as variables within the code then my layer control works fine. But I have several layers that I need to add and they are quite large, so hosting them online and pulling them with a simple $.getJSON command would be useful. Otherwise my html file becomes very long and freezes often while scrolling around.

Any ideas as to what I'm doing wrong? Or is the only way to get the layer control functionality from Leaflet to store the GeoJSONs as local variables?

leaflet geojson

share|improve this question

edited Aug 17 '16 at 20:08

spartmar

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

function addDataToMap(data, map) {

    var dataLayer = L.geoJson(data, {

    pointToLayer: function (feature, latlng) {

    return L.circleMarker(latlng, point_style); 

    }, 

    onEachFeature: function(feature, layer) {

        var popupText = 'Name  --  ' + feature.properties.NAME + '<br>' + 'Address  --  ' + feature.properties.ADDRESS;

                 layer.bindPopup(popupText); }

        });

        dataLayer.addData(data);

        dataLayer.addTo(map); 

        } 

     $.getJSON("https://s3.amazonaws.com/aws-website-homebuyerrecommendationsystemfordenver-ag706/lightrail_geojson.json", function(data) { addDataToMap(data, map); }); 



var baseLayers = {

    "Light Rail Stations": dataLayer,

    "Parks": parks_popup

};

L.control.layers(null, baseLayers, {collapsed:false}).addTo(map);

share|improve this question

edited Aug 17 '16 at 20:08

spartmar

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

share|improve this question

edited Aug 17 '16 at 20:08

spartmar

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

asked Aug 17 '16 at 19:37

spartmarspartmar

1531111

1 Answer
1

active

oldest

votes

4

I believe your problem is that JQuery's getJSON function is asynchronous.

addDataToMap is called, starts the request for the JSON data, but doesn't wait for a reply. It continues to process the JS file, preparing your baselayers and finally adding the control to the map. Only problem is that it didn't wait for the reply and is essentially trying to add a undefined or Promise to the map, essentially no map. The reply is returned after the map control was set, so the map features load but not the controls.

It works in your one-file model because the JS Engine parses everything before executing. The data is already there.

Either do a pure AJAX synchronous call, from a UX standpoint is less than ideal or in your anonymous callback add addOverlay to update your controls.

Here is a working example using your dataset. I annotated the code with reasoning and comments. Take a look, I structured it slightly differently too, IMO for better maintenance and scaling. Of course there are other ways to do this but the process will be the same.

http://codepen.io/romahicks/pen/zBbybp/

Note: You may have change the view to full page, the control seems to hide if the window is too small.

share|improve this answer

edited 4 mins ago

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ RomaH I tried using: $.ajax({ dataType: "json", async: false, url: "s3.amazonaws.com/…", data: data, success: function () { L.geoJson(data).addTo(map); } }); but it didn't work. I also tried adding the addOverlay statement in my layer control line but nothing. Is there any other way to import the geojson with ajax, or am I doing it wrong?
  
  – spartmar
  Aug 17 '16 at 22:23
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @spartmar I provided a working example and updated my answer. It works for me, take a look.
  
  – RomaH
  Aug 18 '16 at 0:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  so now the layer control works with other layers and that's great. But the ability to show customized styles on the other layer I just added is gone. I also can't seem to get the popups to show. Window says "undefined" but the feature.properties I am showing are correct. Ideas? Oh and thanks for all your help so far!
  
  – spartmar
  Aug 18 '16 at 1:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I didn't fully implement the L.geoJson call that you used in your code, I only load the points and style them; I was just showing how to load the points. If you look at line 18 through 31, you will not see an onEachFeature, you will need to add that. For styling, you will need to create new styles like on line 18 and then add that createPointOverlay call, similar to line 44.
  
  – RomaH
  Aug 18 '16 at 14:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I had replicated the same example and added styling and popups to other layers with no luck. However I just realized that the function was exactly the same and so that's where the issue was. Can't use the same exact parameters for points as for polygons or lines. But I fixed the newer polygon layers so they're called by an updated function... All is working as expected now! Thank you for all your help! :)
  
  – spartmar
  Aug 18 '16 at 20:07
  

  
  
  
  

add a comment | 

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
});


}
});

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f207352%2fhow-to-get-leaflet-layer-control-to-work-with-geojson-files-hosted-online%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

4

I believe your problem is that JQuery's getJSON function is asynchronous.

addDataToMap is called, starts the request for the JSON data, but doesn't wait for a reply. It continues to process the JS file, preparing your baselayers and finally adding the control to the map. Only problem is that it didn't wait for the reply and is essentially trying to add a undefined or Promise to the map, essentially no map. The reply is returned after the map control was set, so the map features load but not the controls.

It works in your one-file model because the JS Engine parses everything before executing. The data is already there.

Either do a pure AJAX synchronous call, from a UX standpoint is less than ideal or in your anonymous callback add addOverlay to update your controls.

Here is a working example using your dataset. I annotated the code with reasoning and comments. Take a look, I structured it slightly differently too, IMO for better maintenance and scaling. Of course there are other ways to do this but the process will be the same.

http://codepen.io/romahicks/pen/zBbybp/

Note: You may have change the view to full page, the control seems to hide if the window is too small.

share|improve this answer

edited 4 mins ago

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ RomaH I tried using: $.ajax({ dataType: "json", async: false, url: "s3.amazonaws.com/…", data: data, success: function () { L.geoJson(data).addTo(map); } }); but it didn't work. I also tried adding the addOverlay statement in my layer control line but nothing. Is there any other way to import the geojson with ajax, or am I doing it wrong?
  
  – spartmar
  Aug 17 '16 at 22:23
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @spartmar I provided a working example and updated my answer. It works for me, take a look.
  
  – RomaH
  Aug 18 '16 at 0:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  so now the layer control works with other layers and that's great. But the ability to show customized styles on the other layer I just added is gone. I also can't seem to get the popups to show. Window says "undefined" but the feature.properties I am showing are correct. Ideas? Oh and thanks for all your help so far!
  
  – spartmar
  Aug 18 '16 at 1:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I didn't fully implement the L.geoJson call that you used in your code, I only load the points and style them; I was just showing how to load the points. If you look at line 18 through 31, you will not see an onEachFeature, you will need to add that. For styling, you will need to create new styles like on line 18 and then add that createPointOverlay call, similar to line 44.
  
  – RomaH
  Aug 18 '16 at 14:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I had replicated the same example and added styling and popups to other layers with no luck. However I just realized that the function was exactly the same and so that's where the issue was. Can't use the same exact parameters for points as for polygons or lines. But I fixed the newer polygon layers so they're called by an updated function... All is working as expected now! Thank you for all your help! :)
  
  – spartmar
  Aug 18 '16 at 20:07
  

  
  
  
  

add a comment | 

4

I believe your problem is that JQuery's getJSON function is asynchronous.

addDataToMap is called, starts the request for the JSON data, but doesn't wait for a reply. It continues to process the JS file, preparing your baselayers and finally adding the control to the map. Only problem is that it didn't wait for the reply and is essentially trying to add a undefined or Promise to the map, essentially no map. The reply is returned after the map control was set, so the map features load but not the controls.

It works in your one-file model because the JS Engine parses everything before executing. The data is already there.

Either do a pure AJAX synchronous call, from a UX standpoint is less than ideal or in your anonymous callback add addOverlay to update your controls.

Here is a working example using your dataset. I annotated the code with reasoning and comments. Take a look, I structured it slightly differently too, IMO for better maintenance and scaling. Of course there are other ways to do this but the process will be the same.

http://codepen.io/romahicks/pen/zBbybp/

Note: You may have change the view to full page, the control seems to hide if the window is too small.

share|improve this answer

edited 4 mins ago

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @ RomaH I tried using: $.ajax({ dataType: "json", async: false, url: "s3.amazonaws.com/…", data: data, success: function () { L.geoJson(data).addTo(map); } }); but it didn't work. I also tried adding the addOverlay statement in my layer control line but nothing. Is there any other way to import the geojson with ajax, or am I doing it wrong?
  
  – spartmar
  Aug 17 '16 at 22:23
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @spartmar I provided a working example and updated my answer. It works for me, take a look.
  
  – RomaH
  Aug 18 '16 at 0:07
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  so now the layer control works with other layers and that's great. But the ability to show customized styles on the other layer I just added is gone. I also can't seem to get the popups to show. Window says "undefined" but the feature.properties I am showing are correct. Ideas? Oh and thanks for all your help so far!
  
  – spartmar
  Aug 18 '16 at 1:40
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I didn't fully implement the L.geoJson call that you used in your code, I only load the points and style them; I was just showing how to load the points. If you look at line 18 through 31, you will not see an onEachFeature, you will need to add that. For styling, you will need to create new styles like on line 18 and then add that createPointOverlay call, similar to line 44.
  
  – RomaH
  Aug 18 '16 at 14:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I had replicated the same example and added styling and popups to other layers with no luck. However I just realized that the function was exactly the same and so that's where the issue was. Can't use the same exact parameters for points as for polygons or lines. But I fixed the newer polygon layers so they're called by an updated function... All is working as expected now! Thank you for all your help! :)
  
  – spartmar
  Aug 18 '16 at 20:07
  

  
  
  
  

add a comment | 

I believe your problem is that JQuery's getJSON function is asynchronous.

addDataToMap is called, starts the request for the JSON data, but doesn't wait for a reply. It continues to process the JS file, preparing your baselayers and finally adding the control to the map. Only problem is that it didn't wait for the reply and is essentially trying to add a undefined or Promise to the map, essentially no map. The reply is returned after the map control was set, so the map features load but not the controls.

It works in your one-file model because the JS Engine parses everything before executing. The data is already there.

Either do a pure AJAX synchronous call, from a UX standpoint is less than ideal or in your anonymous callback add addOverlay to update your controls.

Here is a working example using your dataset. I annotated the code with reasoning and comments. Take a look, I structured it slightly differently too, IMO for better maintenance and scaling. Of course there are other ways to do this but the process will be the same.

http://codepen.io/romahicks/pen/zBbybp/

Note: You may have change the view to full page, the control seems to hide if the window is too small.

share|improve this answer

edited 4 mins ago

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

share|improve this answer

edited 4 mins ago

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814

answered Aug 17 '16 at 21:25

RomaHRomaH

1,989814