Leaflet Omnivore

universal format parser for Leaflet & Mapbox.js
Alternatives To Leaflet Omnivore
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome Vector Tiles1,991
7 days ago2cc0-1.0
awesome implementations of the Mapbox Vector Tile specification
Leaflet Geoman1,8653112 days ago17May 20, 202240mitJavaScript
🍂🗺️ The most powerful leaflet plugin for drawing and editing geometry layers
Leaflet Realtime689627 months ago13September 07, 201914iscJavaScript
Put realtime data on a Leaflet map
Leaflet Omnivore5565542 years ago11November 17, 201623otherJavaScript
universal format parser for Leaflet & Mapbox.js
Leaflet.vectorgrid47843182 years ago8August 28, 2017102JavaScript
Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
2a year ago1May 20, 20178bsd-2-clauseJavaScript
OSM Buildings Classic 2.5D
a year ago1February 09, 201654otherJavaScript
This is a Leaflet plug-in that plays back points that have a time stamp synchronized to a clock.
Proj4leaflet449100443 years ago9August 14, 201711bsd-2-clauseJavaScript
Smooth Proj4js integration with Leaflet.
Mapstore2412217 hours ago6August 26, 2022503otherJavaScript
Modern webmapping with OpenLayers, Leaflet, Cesium and React
Leaflet.timeline303112 years ago15June 26, 202036iscTypeScript
Display arbitrary GeoJSON on a map with a timeline slider and play button
Alternatives To Leaflet Omnivore
Select To Compare

Alternative Project Comparisons


Leaflet supports the GeoJSON format by default. What if you have something else? That's where omnivore comes in.

It currently supports:

Omnivore also includes an AJAX library, corslite, so you can specify what you want to add to the map with just a URL.


use it easily with the Mapbox Plugins CDN:

<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>

Or download leaflet-omnivore.min.js from this repository.


Live examples:

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([38, -102.0], 5);



Arguments with ? are optional. parser_options consists of options sent to the parser library, not to the layer: if you want to provide options to the layer, see the example in the Custom Layers section.

By default, the library will construct a L.geoJson() layer internally and call .addData(geojson) on it in order to load it full of GeoJSON. If you want to use a different kind of layer, like a L.mapbox.featureLayer(), you can, by passing it as customLayer, as long as it supports events and addData(). You can also use this API to pass custom options to a L.geoJson() instance.:

  • .csv(url, parser_options?, customLayer?): Load & parse CSV, and return layer. Options are the same as csv2geojson: latfield, lonfield, delimiter
  • .csv.parse(csvString, parser_options?): Parse CSV, and return layer.
  • .kml(url): Load & parse KML, and return layer.
  • .kml.parse(kmlString | gpxDom): Parse KML from a string of XML or XML DOM, and return layer.
  • .gpx(url, parser_options?, customLayer?): Load & parse GPX, and return layer.
  • .gpx.parse(gpxString | gpxDom): Parse GPX from a string of XML or XML DOM, and return layer.
  • .geojson(url, parser_options?, customLayer?): Load GeoJSON file at URL, parse GeoJSON, and return layer.
  • .wkt(url, parser_options?, customLayer?): Load & parse WKT, and return layer.
  • .wkt.parse(wktString): Parse WKT, and return layer.
  • .topojson(url, parser_options?, customLayer?): Load & parse TopoJSON, and return layer.
  • .topojson.parse(topojson): Parse TopoJSON (given as a string or object), and return layer.
  • .polyline(url, parser_options?, customLayer?): Load & parse polyline, and return layer.
  • .polyline.parse(txt, options, layer): Parse polyline (given as a string or object), and return layer.

Valid options:


  • precision will change how the polyline is interpreted. By default, the value is 5. This is the factor in the algorithm, by default 1e5, which is adjustable.

Custom Layers

Passing custom options:

var customLayer = L.geoJson(null, {
    filter: function() {
        // my custom filter function
        return true;

var myLayer = omnivore.csv('foo', null, customLayer);

Adding custom styles to a GeoJSON layer:

var customLayer = L.geoJson(null, {
    // http://leafletjs.com/reference.html#geojson-style
    style: function(feature) {
        return { color: '#f00' };
// this can be any kind of omnivore layer
var runLayer = omnivore.kml('line.kml', null, customLayer)

Using a L.mapbox.featureLayer:

var layer = omnivore.gpx('a.gpx', null, L.mapbox.featureLayer());

Async & Events

Each function returns an L.geoJson object. Functions that load from URLs are asynchronous, so they will not immediately expose accurate .setGeoJSON() functions.

For this reason, we fire events:

  • ready: fired when all data is loaded into the layer
  • error: fired if data can't be loaded or parsed
var layer = omnivore.gpx('a.gpx')
    .on('ready', function() {
        // when this is fired, the layer
        // is done being initialized
    .on('error', function() {
        // fired if the layer can't be loaded over AJAX
        // or can't be parsed

ready does not fire if you don't use an asynchronous form of the function like .topojson.parse(): because you don't need an event. Just run your code after the call.


This is a browserify project:

git clone [email protected]:mapbox/leaflet-omnivore.git

cd leaflet-omnivore

# to run tests
npm install

# to build leaflet-omnivore.js
npm run prepublish

leaflet-omnivore.js and leaflet-omnivore.min.js are built files generated from index.js by browserify. If you find an issue, it either needs to be fixed in index.js, or in one of the libraries leaflet-omnivore uses to parse formats.


  • What if I just want one format? Lucky for you, each format is specified in a different module, so you can just use TopoJSON, csv2geojson, wellknown, or toGeoJSON individually.
  • My AJAX request is failing for a cross-domain request. Read up on the Same Origin Restriction. By default, we use corslite, so cross-domain requests will try to use CORS if your server and browser supports it, but if one of them doesn't, there's no way on the internet to support your request.
  • Why isn't JSONP supported? Here's why.
Popular Leaflet Projects
Popular Geojson Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.