Solved

read a geojson object from MapBox.js

Posted on 2014-09-19
12
364 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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
 

Author Comment

by:lvmllc
ID: 40338277
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

786 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