?
Solved

read a geojson object from MapBox.js

Posted on 2014-09-19
12
Medium Priority
?
439 Views
Last Modified: 2014-09-23
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"
0
Comment
Question by:lvmllc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40334305
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
 

Author Comment

by:lvmllc
ID: 40334936
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40334939
I need a full example of response, not of code
so please share your URL or post a whole JSON response
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:leakim971
ID: 40334947
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
 

Author Comment

by:lvmllc
ID: 40337346
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40337449
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
 

Author Comment

by:lvmllc
ID: 40337599
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40337678
could you share a link to your page with the code?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40338917
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
 

Author Comment

by:lvmllc
ID: 40339202
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40339433
later, onclick, you will need to access to featureLayer variable and use addTo(map) after a reset of  the map.
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question