mapbox-gl-markers

A Mapbox GL JS plugin that turns your GeoJSON into an interactive map in minutes.

Usage

Using the web tool

1. Create and save your geojson to an open hosting service like Github Gist. For Gists, copy the raw url https://gist.github.com/anonymous/11d74ac48876bafa64868658d99c4846/raw/8a688828a572a076dbd0dfeee016b4e06041ff21/map.geojson
2. Open the Mapbox Markers web tool and add the url to your geojson as a ?data=<url> parameter before the map hash.
   • eg. https://planemad.github.io/mapbox-gl-markers/?data=https://gist.githubusercontent.com/anonymous/11d74ac48876bafa64868658d99c4846/raw/c6a8c80959cbf1814afeb28bd1757b68bd5f78a8/map.geojson#1/37.8/-20

Using Mapbox GL JS

Include the JS and CSS in the :

<script src='https://rawgit.com/mapbox/mapbox-gl-markers/master/dist/mapbox-gl-markers.js'></script>
<link href='https://rawgit.com/mapbox/mapbox-gl-markers/master/dist/mapbox-gl-markers.css' rel='stylesheet' />

Add the plugin after initializing your Mapbox GL map:

map.addControl(new MapboxMarkers(geojson[, options]));  // Pass a GeoJSON feature collection that follows the marker-spec

See available options. You can also set the following using URL parameters:

• data URL to an external GeoJSON. Use a Gist.

Generating a GeoJSON

Use geojson.io to quickly create a custom GeoJSON dataset with the properties you need.

GeoJSON marker-spec

This is a WIP: https://paper.dropbox.com/doc/marker-spec-1-11DEmlIrR8bk1dlm3sU8B