bravecow / Mapbox Gl Controls
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mapbox Gl Controls
lascallesdelasmujeres
Proyecto colaborativo para fomentar la generación de contenidos en OSM y Wikipedia, sobre mujeres.
Stars: ✭ 45 (-51.61%)
Mutual labels: mapbox-gl-js, mapbox
impact-tools
Simple blueprints for change-makers
Stars: ✭ 34 (-63.44%)
Mutual labels: mapbox-gl-js, mapbox
react-mapboxgl
Declarative React components for mapbox-gl-js.
Stars: ✭ 15 (-83.87%)
Mutual labels: mapbox-gl-js, mapbox
ARGoal
Get more goals. | Virtual Goals & Goal Distance | App Doctor Hu
Stars: ✭ 14 (-84.95%)
Mutual labels: measure, distance
Martin
Blazing fast and lightweight PostGIS vector tiles server
Stars: ✭ 540 (+480.65%)
Mutual labels: mapbox, mapbox-gl-js
deck.gl-time-series-widget
A React Time Slider implementation for DECK.GL - (non)temporal data - by CPU filtering ⌛
Stars: ✭ 19 (-79.57%)
Mutual labels: mapbox-gl-js, mapbox
similarity measures
Quantify the difference between two arbitrary curves in space
Stars: ✭ 140 (+50.54%)
Mutual labels: measure, distance
Distancemeasure
📷 An android demo which can measure the distance from user to something while taking photos ( Android 拍照测距 )
Stars: ✭ 185 (+98.92%)
Mutual labels: distance, measure
angular-mapboxgl-directive
AngularJS directive for Mapbox GL
Stars: ✭ 43 (-53.76%)
Mutual labels: mapbox-gl-js, mapbox
Road Orientation Map
A visualization of road orientations on an interactive map
Stars: ✭ 254 (+173.12%)
Mutual labels: mapbox, mapbox-gl-js
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+8520.43%)
Mutual labels: mapbox, mapbox-gl-js
Terrastories
Terrastories is a geostorytelling application built to enable local communities to locate and map their own oral storytelling traditions about places of significant meaning or value to them. Check out our Wiki for open source development information.
Stars: ✭ 158 (+69.89%)
Mutual labels: mapbox, mapbox-gl-js
maptalks.mapboxgl
MapboxglLayer for maptalks.js
Stars: ✭ 51 (-45.16%)
Mutual labels: mapbox-gl-js, mapbox
Mapbox Gl Directions
Directions plugin for mapbox-gl-js using Mapbox Directions API.
Stars: ✭ 154 (+65.59%)
Mutual labels: mapbox, mapbox-gl-js
web-maps-wcag-evaluation
Manual accessibility evaluation of popular web map tools.
Stars: ✭ 28 (-69.89%)
Mutual labels: mapbox-gl-js, mapbox
Stereo Vision
This program has been developed as part of a project at the University of Karlsruhe in Germany. The final purpose of the algorithm is to measure the distance to an object by combining two webcams and use them as a Stereo Camera.
Stars: ✭ 160 (+72.04%)
Mutual labels: distance, measure
Cheap Ruler Go
📏 cheapruler in Go: fast geodesic measurements
Stars: ✭ 176 (+89.25%)
Mutual labels: distance, measure
vue-mapbox-map
A minimalist Vue component wrapping Mapbox GL or MapLibre GL for dynamic interaction!
Stars: ✭ 26 (-72.04%)
Mutual labels: mapbox-gl-js, mapbox
Mapbox Gl Print Export For Port
Print/Export for Mapbox GL
Stars: ✭ 14 (-84.95%)
Mutual labels: mapbox, mapbox-gl-js
Mapbox Controls
Usage
Install
npm install mapbox-gl-controls
Include styles
<link href="mapbox-gl-controls/theme.css" rel="stylesheet">
Ruler Control
import RulerControl from 'mapbox-gl-controls/lib/ruler';
map.addControl(new RulerControl(), 'top-right');
map.on('ruler.on', () => console.log('ruler: on'));
map.on('ruler.off', () => console.log('ruler: off'));
// with miles:
map.addControl(new RulerControl({
units: 'miles',
labelFormat: n => `${n.toFixed(2)} ml`,
}), 'top-right');
Styles Control
import StylesControl from 'mapbox-gl-controls/lib/styles';
// with default styles:
map.addControl(new StylesControl(), 'top-left');
// with custom styles:
map.addControl(new StylesControl({
styles: [
{
label: 'Streets',
styleName: 'Mapbox Streets',
styleUrl: 'mapbox://styles/mapbox/streets-v9',
}, {
label: 'Satellite',
styleName: 'Satellite',
styleUrl: 'mapbox://styles/mapbox/satellite-v9',
},
],
onChange: (style) => console.log(style),
}), 'top-left');
Compass Control
import CompassControl from 'mapbox-gl-controls/lib/compass';
map.addControl(new CompassControl(), 'top-right');
Zoom Control
import ZoomControl from 'mapbox-gl-controls/lib/zoom';
map.addControl(new ZoomControl(), 'top-right');
Language Control
import LanguageControl from 'mapbox-gl-controls/lib/language';
// with browser detect:
map.addControl(new LanguageControl());
// with custom language:
const languageControl = new LanguageControl({
language: 'ru',
});
map.addControl(languageControl);
// change language to multi language after control has been added:
languageControl.setLanguage('mul');
Inspect Control
import InspectControl from 'mapbox-gl-controls/lib/inspect';
map.addControl(new InspectControl(), 'bottom-right');
Tooltip Control
import TooltipControl from 'mapbox-gl-controls/lib/tooltip';
map.addControl(new TooltipControl({ layer: '$fill' }));
API
CompassControl
Simple compass
Parameters
-
options
Object (optional, default{}
)-
options.instant
Boolean Show compass if bearing is 0 (optional, defaulttrue
)
-
InspectControl
Inspect control to debug style layers and source
LanguageControl
Localize map. Language can be set dynamically with .setLanguage(lang)
method.
Parameters
-
options
Object (optional, default{}
)-
options.supportedLanguages
Array? (Supported languages)[https://docs.mapbox.com/help/troubleshooting/change-language/] -
options.language
String? One of the supported languages to apply -
options.excludedLayerIds
Array Array of layer id to exclude from localization (optional, default[]
) -
options.getLanguageField
Function? Accepts language and returns language field By default fields arename_LANGUAGE
andname
for multi language (mul)
-
RulerControl
Fires map ruler.on
and ruler.off
events at the beginning and at the end of measuring.
Parameters
-
options
Object (optional, default{}
)-
options.units
String Any units @turf/distance supports (optional, default'kilometers'
) -
options.labelFormat
Function? Accepts number and returns label Can be used to convert value to any measuring units -
options.font
Array Array of fonts (optional, default['Roboto Medium']
) -
options.mainColor
String Color of ruler lines (optional, default'#263238'
) -
options.secondaryColor
String Color of halo and inner marker background (optional, default'#fff'
) -
options.fontSize
Number Label font size inpx
(optional, default12
) -
options.fontHalo
Number Label font halo (optional, default1
) -
options.textVariableAnchor
Array Array of anchor positions (optional, default['top']
) -
options.textAllowOverlap
Boolean Is allowed to overlap labels (optional, defaultfalse
) -
options.markerNodeSize
Number Width and Height of the marker inpx
(optional, default12
) -
options.markerNodeBorderWidth
Number Width of the marker's border inpx
(optional, default2
)
-
StylesControl
Adds style switcher similar to Google Maps.
Parameters
-
options
Object (optional, default{}
)
TooltipControl
Shows tooltip on hover on some layer or whole map.
Parameters
-
options
Object (optional, default{}
)
ZoomControl
Simple zoom control
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].