Skip to content

Instantly share code, notes, and snippets.

@glw

glw/index.html

Last active August 29, 2015 14:26
Show Gist options
  • Save glw/bbafe1b0b1a0035591ad to your computer and use it in GitHub Desktop.
Save glw/bbafe1b0b1a0035591ad to your computer and use it in GitHub Desktop.
Download ZIP
Cross Domain GeoJSON w/ Omnivore and MapBoxJS
Raw
readme.md

Example use of MapBoxJS and OmnivoreJS to load a cross domain geojson file.

In the example we use earthquake data from the USGS.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
</head>
<title>MapBox cross domain geojson request - earthquake map</title>
<style>
#map { height: 600px; width: auto; }
</style>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZ2x3IiwiYSI6IjdHTVp3eWMifQ.TXIsy6c3KnbqnUAeBawVsA';
var map = L.mapbox.map('map', 'mapbox.streets').setView([42, -80], 3);
/*Add GeoJSON data using Omnivore. Data could be CSV, KML, TopoJSON, etc.*/
var geojsonLayer = omnivore.geojson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson').addTo(map);
</script>
Basic atempt at creating a cross domain geojson request using MapBoxJS and Omnivore by MapBox. These 2 tools make it trivial to put together a webmap that accomplishes this task.
https://github.com/mapbox/leaflet-omnivore
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment