How I learned a 3rd way to link external GEOJSON files in mapbox.js and leaflet.

How I learned a 3rd way to link to External GEOJSON files in mapbox.js and leaflet.

Do you have a geojson file and want to load it up in leaflet?

All it takes are two lines.

var featLayer = L.mapbox.featureLayer().addTo(mizzap);
featLayer.loadURL('dtparking.geojson');

The first line initializes the feature layer to your map.
In my example, mizzap is the variable of the object that I created to initialize my map.. (I hate that ‘map’ is used all the time as a variable), you don’t know what’s it is referring to). Mizzap can be refer to an object directed through l.mapbox.map or l.map :)

The second line loads my geojson file which is in the same directory as my html file. I can now use it later on simply as ‘featLayer’.
.

For context, here is the finished product as html .

I loosely called it ‘the 3rd way’ as fellow Maptime organizer and all-around kickass person Lyzi Diamond described 2 other ways ( (1) and (2) ) ways to load Geojson files and I aspire that this post compliments her posts..

Why did I use this way to load my geojson (And you can too)?

Now, how I learned to use this 3rd way was because I wanted to load and style polygons in leaflet or mapbox.js based on properties within the geojson file AND I didn’t want to include styling properties in the geojson file.

Also, I’m still learning javascript and I was quite admittedly a little frustrated (and surprised) to find plenty of examples online of loading geojson and styling it but none of them fit my use case.

There were numerous examples of how to load and customize points…
https://github.com/maptime/maptime-bites/blob/gh-pages/00004/index.html
https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-from-csv-custom-style/
https://www.mapbox.com/foundations/building-a-store-locator/
https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-as-links/
http://bl.ocks.org/geografa/8743008
http://ebrelsford.github.io/jekyll-map/
http://lyzidiamond.com/posts/osgeo-august-meeting/

or

They were loading GEOJSON within the browser itself and not to an external file.
https://www.mapbox.com/mapbox.js/example/v1.0.0/geojson-simplestyle/

or
referring to a GEOJSON File (example) which isn’t a true geojson file, but has its variable in it, as mapbox did in this choropleth example.
This last point is problematic if you’re sharing this data set as Lyzi Diamond concisely explains:

If you tried to show the file in GitHub, for example, the points would not be interpreted and a map would not be rendered. Additionally, you don’t always have direct control over the GeoJSON file itself, especially if it’s a shared dataset or if it’s being returned from some other process. Adding a variable definition could also potentially mess up the work of anyone else trying to use your dataset, if it is indeed a dataset you constructed.

OR in some instances, the authors did a combination of these.

I admit, I wasn’t familiar with AJAX at all and didn’t want to touch it. Looking back, I was probably too intimidated by it and at the same time I was reading the mapbox.js documentation and thought: ‘wow, using Mapbox.js will save me some time and not have to use the Leaflet-Ajax plugin ,
I had used mapbox.js a couple times before and knew it includes the functionality of leaflet, also has many other methods and classes that are designed to add more functionality, and offers easier integration with map tiles from mapbox.com

I told myself:”I could just load my geojson file using loadurl(), and mapbox will have an example to show me!”

I learn code by reading examples and modifying them.

Below, I go through several commits where I learned to use loadURL(), load and style all polygons in a geojson file, and then point out my mistakes along the way where I used the wrong code.
=======
Commit one:

I tried to use the style option (from l.geojson) and a switch to customize the styling of the geojson file as on show on leaflet’s geojson example page .
which has the follow example.
===
L.geoJson(states, {
style: function(feature) {
switch (feature.properties.party) {
case ‘Republican’: return {color: “#ff0000”};
case ‘Democrat’: return {color: “#0000ff”};
}
}
}).addTo(map);

I adapted it in this commit (on github) and as html here
Unfortunately this didn’t work…
the console displayed:

“Uncaught Error: Invalid GeoJSON object. mapbox.js:3
s.extend.geometryToLayer mapbox.js:3
s.GeoJSON.s.FeatureGroup.extend.addData mapbox.js:3
s.GeoJSON.s.FeatureGroup.extend.initialize mapbox.js:3
e mapbox.js:1
s.geoJson mapbox.js:3
(anonymous function) index.html:36″

I thought..”
maybe I can’t style within loadURL… maybe I have to use l.geojson
and call it again?””

=======
Then, I was still confused and as I was continuing to find examples of what I was looking for and eventually asked Bill Morris, a longtime leaflet/mapbox.js/tilemill user.

He showed me several maps he recently made of Burlington
where he styled styled polygons in leaflet based on the properties of the geojson file but.

So, in this commit and
(as html),

I used 2 functions to style the polygons but no styling was happening. Still stumped.
I wanted to make sure that my 2nd function (to determines which color is being used in the style based on the property of parking) was being called/run. so I first used the show method inside the getColor function.

There was no error in the javascript console or information to find out why the functions were being called, I thought.

I tried again with replacing show with console.log and same result: the polygons would display , but
I couldn’t figure out why my getColor function wasn’t calling the property in my geojson file.

Throughout the day, I found a couple more examples (from maptime and mapbox’s store locator – that were similar to what I was looking for – customizing a feature based on the feature’s properties
(for reference, a feature is a geographic object that represents a point or a polygon) – but neither were for customizing polygons, but they offered a couple ideas of other things I tried, with no success..

I had wondered if should I first use the loadurl method and then use the filter option/method to not loading any styling; then use another function to add the data again and style it?”

Then <a href="http://twitter.com/geografa"Rafa Gutierrez from MapBox helped me out, and gave me an example of applying a style to all polygons in a geojson file (code).

Thanks to Rafa’s example and the reading documents for the upteenth time, reading the
I finally figured out a couple REALLY IMPORTANT concepts and learned where I went wrong:

I was using ‘style’ as a method in my previous commits. Again, THIS IS WRONG!
Only looking after his example,

style is not a method, but an OPTION in leaflet.

L.mapbox.featureLayer() is based upon and ‘extends’ the l.featureGroup. You can use a few more methods that are listed in L.mapbox.featureLayer() as well as all of the methods that are in l.featureGroup with l.mapbox.featureLayer.

I didn’t immediately realize that I could use the setStyle method to style my polygon since my object (which I named ‘featLayer’ in all of my examples) was constructed from l.mapbox.featureLayer because all of the examples I had found online (at the time) had constructed their object using l.geojson and used the style option of l.geojson.

But, now how do I style based on the properties of the feature in the geojson file, I wondered!
Part 2 of how I learned this, coming up.

Advertisements
Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s