Solved

read a geojson object from MapBox.js

Posted on 2014-09-19
12
348 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
 
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now