Mapbox GL Inspect

Add an inspect control to Mapbox GL JS to view all features of the vector sources and allows hovering over features to see their properties.

Requires mapbox-gl-js (version 0.29.0 – 0.31.x).

Usage

mapbox-gl-inspect is a Mapbox GL JS plugin that you can easily add on top of your map. Check index.html for a complete example.

Make sure to include the CSS and JS files.

When using a CDN

<script src='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.min.js'></script>
<link href='http://mapbox-gl-inspect.lukasmartinelli.ch/dist/mapbox-gl-inspect.css' rel='stylesheet' />

When using modules

require('mapbox-gl-inspect/dist/mapbox-gl-inspect.css');
var mapboxgl = require('mapbox-gl');
var MapboxInspect = require('mapbox-gl-inspect');

// Pass an initialized popup to Mapbox GL
map.addControl(new MapboxInspect({
  popup: new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false
  })
}));

Add the inspector control to your map.

map.addControl(new MapboxInspect());

Switch to the inspection map by default.

map.addControl(new MapboxInspect({
  showInspectMap: true
}));

Switch to the inspection map by default and hide the inspect button to switch back to the normal map. Check examples/inspect-only.html.

map.addControl(new MapboxInspect({
  showInspectMap: true,
  showInspectButton: false
}));

Disable the feature Popup in inspection mode and in map mode. Check examples/no-popup.html.

map.addControl(new MapboxInspect({
  showInspectMapPopup: false,
  showMapPopup: false
}));

You can also control the Popup output. Check examples/custom-popup.html.

map.addControl(new MapboxInspect({
  renderPopup: function(features) {
    return '<h1>' + features.length + '</h1>';
  }
}));

You are able to control the generated colors and background of the inspection style. Check examples/custom-color-1.html and examples/custom-color-2.html.

var colors = ['#FC49A3', '#CC66FF', '#66CCFF', '#66FFCC'];
map.addControl(new MapboxInspect({
  backgroundColor: '#000',
  assignLayerColor: function(layerId, alpha) {
    var randomNumber = parseInt(Math.random() * colors.length);
    return colors[randomNumber];
   }
}));

Develop

Run the linter and watch for changes to rebuild with browserify.

npm install
npm run test
npm run watch

Create a minified standalone build.

npm install
npm run build

tcql / mapbox-gl-inspect Goto Github PK