dandanyouxiang / mapbox-gl-markers

Mapbox GL plugin that implements the GeoJSON marker spec

mapbox-gl-markers

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

Usage

1. 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.githubusercontent.com/anonymous/11d74ac48876bafa64868658d99c4846/raw/c6a8c80959cbf1814afeb28bd1757b68bd5f78a8/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://mapbox.github.io/mapbox-gl-markers/?data=https://gist.githubusercontent.com/anonymous/11d74ac48876bafa64868658d99c4846/raw/c6a8c80959cbf1814afeb28bd1757b68bd5f78a8/map.geojson

2. Using Mapbox GL JS or NPM mapbox-gl-markers

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.

GeoJSON marker-spec

Supported fields:

• marker-image Image to use for the marker
• title Title of the marker popup
• description Description in the popup
• image An image to add in the popup
• website Link to a website, defaults to an OSM link to the location if blank

This is a WIP: https://paper.dropbox.com/doc/marker-spec-1-11DEmlIrR8bk1dlm3sU8B . Note: Other properties in the GeoJSON simplestyle-spec has not been implemented yet.

Contributing

• npm start to run the development page with live reload
• npm run build to update the final dist/mapbox-gl-markers.js file