Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 478
  • Last Modified:

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"
0
lvmllc
Asked:
lvmllc
  • 7
  • 5
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
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

Featured Post

Technology Partners: 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!

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now