read a geojson object from MapBox.js

I am using MapBox and Leaflet to load a geojson file with the code below. I would like to know how I access an individual object.

  var featureLayer = L.mapbox.featureLayer()
      .loadURL('https://web.fulcrumapp.com/shares/xyz123.geojson')
      .addTo(map);

    console.log(featureLayer);  

Open in new window



When I log the feature layer I get the following in the console.


e {options: Object, _layers: Object, _initHooksCalled: true, _request: XMLHttpRequest, _leaflet_events: Object…}_
geojson: Object
 features: Array[75]
  0: Object
   geometry: Object
   properties: Object
     title: "what I want to access"
lvmllcAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
could you share a link to your page to see this object?

try this :
for the first one :
var fL0 = featureLayer.geojson.features[0].properties.title;
alert(fL0);

you may use a loop to read all :

for(var i=0;i<featureLayer.geojson.features.length;i++) {
     var fL = featureLayer.geojson.features[i];
     var title = fL.properties.title;
     // do something with title, for example :
     alert(title);
}

Open in new window

0
lvmllcAuthor Commented:
Was not able to get that to work.  Her is a full code example

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load GeoJSON from a URL</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiY2pzZWVnZXIiLCJhIjoiOTFmM2ZXdyJ9.scsepdRndBn1oKQ7J9G_FQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([45.53, -122.68],12);


var featureLayer = L.mapbox.featureLayer()
.loadURL('https://raw.githubusercontent.com/geografa/foss4g2014-workshops/master/assets/things.geojson')
    .addTo(map);
    
    
</script>
</body>
</html>

Open in new window

0
leakim971PluritechnicianCommented:
I need a full example of response, not of code
so please share your URL or post a whole JSON response
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

leakim971PluritechnicianCommented:
Should be good, just remove geojson :
for the first one :
var fL0 = featureLayer.features[0].properties.title;
alert(fL0);

.features[0].properties.title

for(var i=0;i<featureLayer.features.length;i++) {
     var fL = featureLayer.features[i];
     var title = fL.properties.title;
     // do something with title, for example :
     alert(title);
}

Open in new window

0
lvmllcAuthor Commented:
https://raw.githubusercontent.com/geografa/foss4g2014-workshops/master/assets/things.geojson

At this point I am still not getting it to alert the title.
I wonder if mapBox wraps this in something else?
0
leakim971PluritechnicianCommented:
http://jsfiddle.net/djq6083t/

setTimeout(function() {
    for(var i=0;i<featureLayer.features.length;i++) {
         var fL = featureLayer.features[i];
         var title = fL.properties.title;
         // do something with title, for example :
         alert(title);
    }   
},1);
var featureLayer= {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "title": "DoubleTree Hotel",
        "address": "1000 NE Multnomah Street, Portland, Oregon, 97232",
        "phone": "+1-503-281-6111",
        "marker-symbol": "lodging",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65522956848145,
          45.53050807819899
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Oregon Convention Center",
        "description": "The location of the 2014 FOSS4G Conference",
        "address": "777 NE Martin Luther King Jr Blvd, Portland, Oregon, 97232",
        "marker-symbol": "star",
        "marker-size": "large",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66306161880492,
          45.52901240119642
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Eliot Center",
        "description": "The location of the FOSS4G code sprint and WhereCampPDX 7",
        "marker-symbol": "star",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.686,
          45.51859
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Bailey's Taproom",
        "description": "The boozy center of Portland's tech community",
        "address": "213 SW Broadway, Portland, OR 97205",
        "marker-symbol": "bar",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67855,
          45.52247
        ]
      }
    },
    
    {
      "type": "Feature",
      "properties": {
        "title": "Portland State University",
        "description": "The location of the FOSS4G workshops and js.geo conference",
        "marker-symbol": "star",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.68401,
          45.51244
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Staybridge Suites",
        "marker-symbol": "lodging",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.540689,
          45.568453
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Waterfront Bicycles",
        "marker-symbol": "bicycle",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67081,
          45.52139
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Ecotrust",
        "description": "FOSS4G Welcome Reception",
        "address": "721 NW 9th Ave #200, Portland, Oregon, 97209",
        "web": "http://www.eventbrite.com/e/you-are-here-foss4g-welcome-reception-hosted-by-ecotrust-and-point-97-tickets-12321175969",
        "marker-symbol": "embassy",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.68073737621307,
          45.52852009679969
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Spirit of 77",
        "description": "Location Tech Meetup",
        "address": "500 NE Martin Luther King Jr Blvd , Portland, Oregon, 97232",
        "web": "https://www.eventbrite.ca/e/locationtech-meetup-portland-tickets-12165801239",
        "marker-symbol": "embassy",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66150057315825,
          45.52670868017022
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "White Owl Social Club",
        "description": "Maptime Null Island Party",
        "address": "1305 SE 8th Ave, Portland, Oregon, 97214",
        "web": "http://maptimeparty.splashthat.com/",
        "marker-symbol": "embassy",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65791177749632,
          45.51350462236357
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "World Forestry Center",
        "description": "FOSS4G Gala Event",
        "address": "4033 SW Canyon Rd, Portland, Oregon, 97221",
        "web": "http://www.worldforestry.org/",
        "marker-symbol": "embassy",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.71803081035614,
          45.51068525047507
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "The Refuge",
        "description": "FOSS4G Wrap-up/WhereCampPDX kick-off",
        "address": "116 SE Yamhill St, Portland, Oregon, 97217",
        "web": "http://foss4gparty.splashthat.com/",
        "marker-symbol": "embassy",
        "marker-color": "#d85054"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66448855400085,
          45.515590866633325
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "PDX International Airport",
        "marker-symbol": "airport",
        "marker-color": "#23344c",
        "web": "http://www.pdx.com"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.59274482727051,
          45.58731433313998
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Veritable Quandary",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67538905143736,
          45.51392187740479
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Habibi",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.68263638019562,
          45.51996984853766
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Mother's",
        "description": "Breakfast",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.6739352941513,
          45.51995857262707
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Voodoo Doughnut",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67303943634033,
          45.52268351864251
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Stumptown Coffee",
        "marker-symbol": "cafe",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67333984374999,
          45.52175893106354
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Powell's Books",
        "marker-symbol": "library",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.68161714076996,
          45.52329238509177
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Ace Hotel Bar",
        "marker-symbol": "bar",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.68160641193391,
          45.52201826813723
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Robo Taco",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65946209430695,
          45.51739136482342
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Potato Champion Truck",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.6532232761383,
          45.51238816798644
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Shanghai Tunnel",
        "description": "Underground dive bar",
        "marker-symbol": "restaurant",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.67255127429962,
          45.52263090024497
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Salt & Straw",
        "description": "Awesome Ice Cream",
        "marker-symbol": "ice-cream",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.698425,
          45.528994
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Commons Brewery Tap Room",
        "description": "Thur-Fri(5pm-9pm), Sat(2pm-9pm), Sun(2pm-6pm)",
        "address": "1810 SE 10th Ave, Portland, Oregon, 97214",
        "web": "http://www.commonsbrewery.com/",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65549778938292,
          45.5095048315009
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "The Sidebar - Lompoc Brewery",
        "description": "Wed-Thur(4pm-10pm), Fri-Sat(4pm-11pm)",
        "address": "1810 SE 10th Ave, Portland, Oregon, 97214",
        "web": "http://www.lompocbrewing.com/sidebar/",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66693472862242,
          45.55101513368442
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Occidental Brewing",
        "description": "Wed-Thur(4pm-8pm), Fri(3pm-8pm), Sat(12pm-8pm), Sun(12pm-6pm)",
        "address": "6635 N Baltimore Ave, Portland, Oregon, 97203",
        "web": "http://www.occidentalbrewing.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.7610695362091,
          45.58895111219635
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Hair of the Dog Brewing Co",
        "description": "Tue-Sat(11:30am-10pm), Sun(11:30pm-8pm)",
        "address": "61 SE Yamhill St, Portland, Oregon, 97214",
        "web": "http://hairofthedog.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66566872596741,
          45.515955481565854
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Ground Breaker Brewing",
        "description": "Gluten Free gastropub and beer Thur-Sun(12-9)",
        "address": "2030 SE 7th, Portland, Oregon, 97214",
        "web": "http://www.groundbreakerbrewing.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65853941440582,
          45.50806498758217
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Gigantic Brewing",
        "description": "Low-key taproom and patio Mon-Fri(3pm-9pm), Sat(12pm-9pm), Sun(12pm-8pm)",
        "address": "5224 SE 26th Ave, Portland, Oregon, 97202",
        "web": "http://giganticbrewing.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.63705492019653,
          45.485093934139734
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Base Camp Brewing",
        "description": "Sun-Wed(12pm-9pm), Thur-Sat(11am-12pm)",
        "address": "930 SE Oak Street, Portland, Oregon, 97214",
        "web": "http://basecampbrewingco.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65618979930878,
          45.51996233126418
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Baerlic Brewing",
        "description": "Tues-Thurs(4pm-10pm), Fri(2pm-11pm), Sat(12pm-11pm), Sun(12pm-10pm)",
        "address": "2235 SE 11TH AVE, Portland, Oregon, 97214",
        "web": "http://baerlicbrewing.com/",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.6549506187439,
          45.506685259245195
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Cascade Brewing Barrel House",
        "description": "Sours Sun-Mon(12pm-10pm), Tues-Thurs(12pm-11pm), Fri-Sat(12pm-12am)",
        "address": "939 SE BELMONT STREET, Portland, Oregon, 97214",
        "web": "http://cascadebrewingbarrelhouse.com",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65608787536621,
          45.516617044895895
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Upright Brewing",
        "description": "Belgian and French Farm Ales Thur(5-9), Fri(4:30-9), Sat(1-8), Sun(1-6)",
        "address": "240 N Broadway, Portland, Oregon, 97227",
        "web": "http://www.uprightbrewing.com/",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.66864061355591,
          45.53486711091546
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Lucky Laborador - Hawthorne Brew Pub",
        "description": "Mon-Sat(11am-12am), Sun(12pm-10pm)",
        "address": "915 SE HAWTHORNE BLVD., Portland, Oregon, 97214",
        "web": "http://luckylab.com/hawthorne-brew-pub/",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65625953674315,
          45.51238440884337
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Hopworks Urban Brewery",
        "description": "Sun-Thur(11am-11pm), Fri-Sat(11am-12am)",
        "address": "2944 SE Powell Blvd, Portland, Oregon, 97202",
        "web": "http://hopworksbeer.com/general-info/hub",
        "marker-symbol": "beer",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.65625953674315,
          45.51238440884337
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Multnomah Whiskey Library",
        "description": "Mon-Thur(4pm-12am), Fri-Sat(4pm-1am)",
        "address": "1124 SW Alder St., Portland, Oregon, 97205",
        "web": "http://www.multnomahwhiskeylibrary.com/",
        "marker-symbol": "bar",
        "marker-color": "#23344c"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.683457,
          45.520989
        ]
      }
    }
  ]
}

Open in new window

0
lvmllcAuthor Commented:
yes - I have it working when it is on its own, but the issue is it is getting loaded with


var featureLayer = L.mapbox.featureLayer()
.loadURL('https://raw.githubusercontent.com/geografa/foss4g2014-workshops/master/assets/things.geojson')
    .addTo(map);

Open in new window


and when it does that it must be getting wrapped in something else as I can't access it.
0
leakim971PluritechnicianCommented:
could you share a link to your page with the code?
0
lvmllcAuthor Commented:
0
leakim971PluritechnicianCommented:
ah yes, we must use a callback because it's an asynchronous call

test page : http://jsfiddle.net/djq6083t/3/

we replaced :
var featureLayer = L.mapbox.featureLayer()
.loadURL('http://129.186.142.145/indicators/things.json')
    .addTo(map);

Open in new window

by :
var featureLayer = L.mapbox.featureLayer()
.loadURL('http://129.186.142.145/indicators/things.json')
.on('ready', function(layer) {
    var fl = layer.target.getGeoJSON();
    for(var i=0;i<fl.features.length;i++) {
         var fL = fl.features[i];
         var title = fL.properties.title;
         // do something with title, for example :
         alert(title);
    }   
})
.addTo(map);

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lvmllcAuthor Commented:
OK - I see that working. One question - is it just reading the title as it loads, or is it going into the location in memory that it is stored? The reason I ask is because I am wondering if I will be able to later change the value of the title after pressing a button? Ultimately what I am after is I need to replace the icon styles, but they are derived from a value in the JSON so I will change say tea shop to coffee shop etc.

Just need to know if you think this is possible - then I will play a bit and if I run into trouble will post a new ?

Thanks
0
leakim971PluritechnicianCommented:
later, onclick, you will need to access to featureLayer variable and use addTo(map) after a reset of  the map.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.