loading geoJSON examples

1_basic_browser.js

// we have a geoJSON file (in this case for Guinea) on the web:
var guinea = 'https://raw.githubusercontent.com/johan/world.geo.json/master/countries/GIN.geo.json'

// and we have a function that does something with the geoJSON file:
var handleGeoJSON = function (data) {
  // data is the JSON parsed into a JS object
  console.log(data)
}

// using jquery (you must have loaded jQuery first) - http://api.jquery.com/jquery.getjson
// this is the shortest amount of code for you to write but you have to include a huge library to be able to use it
$.getJSON(guinea, handleGeoJSON)

// using the native browser fetch API - https://developer.mozilla.org/en/docs/Web/API/Fetch_API
// this requires a tiny bit more code from you but no dependencies (only works in modern browsers)
fetch(guinea).then(function(response) { return response.json() }).then(handleGeoJSON)

2_into_leaflet_modern_browsers.js

// you can load a geoJSON file into a leaflet map super easily using
// the geoJSON method - see http://leafletjs.com/examples/geojson/

// in modern browsers you can use JS features from newer versions of the specification
// note that JS is called ECMAScript in the standards, see e.g. https://babeljs.io/learn-es2015/

// same geoJSON as before
var guinea = 'https://raw.githubusercontent.com/johan/world.geo.json/master/countries/GIN.geo.json'

// create a leaflet map (you must have loaded leaflet first)
var map = L.map('mapid')

fetch(
  guinea
).then(
  res => res.json()
).then(
  data => L.geoJSON(data).addTo(map)
)

3_extra_info.md

extra info if you want to dig deeper:

1. fetch() returns a promise

• a promise is a way of controlling the flow of logic for asynchronous operations
• this is necessary because most JS, especially IO like communicating with a server, is asyncronous
• here's a petty good explanation of Promises: https://developers.google.com/web/fundamentals/getting-started/primers/promises
• here's a developer reference for Promises: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

2. not all browsers have fetch yet - and those that do only support it in more recent versions

• see which browsers support fetch: http://caniuse.com/#feat=fetch
• you can 'polyfill' fetch for browsers that don't support it using https://github.com/github/fetch
  • polyfilling is where you add a feature to JS that isn't supported natively in the browser, by loading a library that adds the same functionality as if it were natively supported
• or use a service that auto-polyfills the fetch function in any browser that's missing it: https://polyfill.io/v2/docs/