├── .gitignore ├── README.md ├── mapbox-gl.d.ts └── typings.json /.gitignore: -------------------------------------------------------------------------------- 1 | typings/ 2 | .idea/ 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Repository Retired! 2 | =================== 3 | 4 | This repository is now considered retired. 5 | The latest one is hosted in the DefinitelyTyped repository here https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/mapbox-gl 6 | 7 | Instructions here: 8 | https://github.com/mapbox/mapbox-gl-js/issues/2440#issuecomment-249020865 9 | 10 | 11 | Old instructions follow 12 | ======================= 13 | 14 | Installing: 15 | 16 | ``` 17 | npm install mapbox-gl --save 18 | typings install registry:dt/geojson --save --global 19 | typings install github:smartrak/mapbox-gl-js-typescript/typings.json --save 20 | ``` 21 | 22 | Edit your tsconfig.json to contain 23 | ```json 24 | { 25 | "files": [ 26 | "typings/index.d.ts" 27 | ] 28 | } 29 | ``` 30 | 31 | Now you can ```import mapboxgl = require('mapbox-gl');``` 32 | 33 | There is a working example with webpack here: https://github.com/danzel/mapboxgl-webpack-example 34 | -------------------------------------------------------------------------------- /mapbox-gl.d.ts: -------------------------------------------------------------------------------- 1 | //import GeoJSON = require('geojson'); 2 | 3 | declare class mapboxgl { 4 | static accessToken: string; 5 | } 6 | 7 | declare namespace mapboxgl { 8 | interface MapOptions { 9 | 10 | /** If true, an attribution control will be added to the map. */ 11 | attributionControl?: boolean; 12 | 13 | /** Snap to north threshold in degrees. */ 14 | bearingSnap?: number; 15 | 16 | /** If true, enable the "box zoom" interaction (see BoxZoomHandler) */ 17 | boxZoom?: boolean; 18 | 19 | /** initial map center */ 20 | center?: Array; 21 | 22 | /** Style class names with which to initialize the map */ 23 | classes?: Array; 24 | 25 | /** ID of the container element */ 26 | container?: string; 27 | 28 | /** If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler). */ 29 | doubleClickZoom?: boolean; 30 | 31 | /** If true, enable the "drag to pan" interaction (see DragPanHandler). */ 32 | dragPan?: boolean; 33 | 34 | /** If true, enable the "drag to rotate" interaction (see DragRotateHandler). */ 35 | dragRotate?: boolean; 36 | 37 | /** If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. */ 38 | failIfMajorPerformanceCaveat?: boolean; 39 | 40 | /** If true, the map will track and update the page URL according to map position */ 41 | hash?: boolean; 42 | 43 | /** If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input */ 44 | interactive?: boolean; 45 | 46 | /** If true, enable keyboard shortcuts (see KeyboardHandler). */ 47 | keyboard?: boolean; 48 | 49 | /** If set, the map is constrained to the given bounds. */ 50 | maxBounds?: LngLatBounds | Array>; 51 | 52 | /** Maximum zoom of the map */ 53 | maxZoom?: number; 54 | 55 | /** Minimum zoom of the map */ 56 | minZoom?: number; 57 | 58 | /** If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization. */ 59 | preserveDrawingBuffer?: boolean; 60 | 61 | /** If true, enable the "scroll to zoom" interaction */ 62 | scrollZoom?: boolean; 63 | 64 | /** stylesheet location */ 65 | style?: string | Style; //TODO: Can be an object too 66 | 67 | /** If true, enable the "pinch to rotate and zoom" interaction (see TouchZoomRotateHandler). */ 68 | touchZoomRotate?: boolean; 69 | 70 | /** Initial zoom level */ 71 | zoom?: number 72 | } 73 | 74 | interface Style { 75 | bearing?: number; 76 | center?: Array; 77 | glyphs?: string; 78 | layers?: Array; 79 | metadata?: any; 80 | name?: string; 81 | pitch?: number; 82 | sources?: any; 83 | sprite?: string; 84 | transition?: Transition; 85 | version: number; 86 | zoom?: number; 87 | } 88 | 89 | interface Transition { 90 | delay?: number; 91 | duration?: number; 92 | } 93 | 94 | interface Source { 95 | type: "vector" | "raster" | "geojson" | "image" | "video"; 96 | } 97 | 98 | class Evented { 99 | fire(type: string, data?: any): this; 100 | listens(type: string): boolean; 101 | off(type: string, listener: Function): this; 102 | on(type: string, listener: Function): this; 103 | once(type: string, listener: Function): this; 104 | } 105 | 106 | class LngLat { 107 | lng: number; 108 | lat: number; 109 | 110 | constructor(lng: number, lat: number); 111 | 112 | /** Return a LngLat as an array */ 113 | toArray(): Array; 114 | /** Return a LngLat as a string */ 115 | toString(): string; 116 | /** Return a new LngLat object whose longitude is wrapped to the range (-180, 180). */ 117 | wrap(): LngLat; 118 | 119 | /** Convert an array to a LngLat object, or return an existing LngLat object unchanged. */ 120 | static convert(lngLat: Array): LngLat; 121 | } 122 | 123 | class LngLatBounds { 124 | constructor(sw: LngLat, ne: LngLat); 125 | 126 | /** Extend the bounds to include a given LngLat or LngLatBounds. */ 127 | extend(obj: LngLat | LngLatBounds): this; 128 | 129 | /** Get the point equidistant from this box's corners */ 130 | getCenter(): LngLat; 131 | /** Get east edge longitude */ 132 | getEast(): number; 133 | /** Get north edge latitude */ 134 | getNorth(): number; 135 | /** Get northeast corner */ 136 | getNorthEast(): LngLat; 137 | /** Get northwest corner */ 138 | getNorthEast(): LngLat; 139 | /** Get south edge latitude */ 140 | getSouth(): number; 141 | /** Get southeast corner */ 142 | getSouthEast(): LngLat; 143 | /** Get southwest corner */ 144 | getSouthWest(): LngLat; 145 | /** Get west edge longitude */ 146 | getWest(): number; 147 | 148 | /** Returns a LngLatBounds as an array */ 149 | toArray(): Array>; 150 | /** Return a LngLatBounds as a string */ 151 | toString(): string; 152 | 153 | /** Convert an array to a LngLatBounds object, or return an existing LngLatBounds object unchanged. */ 154 | static convert(input: LngLatBounds | Array | Array>): LngLatBounds; 155 | } 156 | 157 | class Point { 158 | x: number; 159 | y: number; 160 | 161 | constructor(x: number, y: number); 162 | 163 | clone(): Point; 164 | 165 | add(point: Point): Point; 166 | 167 | sub(point: Point): Point; 168 | 169 | mult(point: Point): Point; 170 | 171 | div(point: Point): Point; 172 | 173 | rotate(angle: number): Point; 174 | 175 | matMult(transformMatrix: Array): Point; 176 | 177 | unit(): Point; 178 | 179 | perp(): Point; 180 | 181 | round(): Point; 182 | 183 | mag(): number; 184 | 185 | equals(point: Point): boolean; 186 | 187 | dist(point: Point): number; 188 | 189 | distSqr(point: Point): number; 190 | 191 | angle(): number; 192 | 193 | angleTo(point: Point): number; 194 | 195 | angleWith(point: Point): number; 196 | 197 | angleWithStep(x: number, y: number): number; 198 | 199 | static convert(point: Point | Array): Point; 200 | } 201 | 202 | class Map extends Evented { 203 | constructor(options: MapOptions); 204 | 205 | addControl(control: Control): this; 206 | 207 | addClass(klass: string, options?: StyleOptions): this; 208 | 209 | removeClass(klass: string, options?: StyleOptions): this; 210 | 211 | setClasses(klasses: Array, options?: StyleOptions): this; 212 | 213 | hasClass(klass: string): boolean; 214 | 215 | getClasses(): Array; 216 | 217 | resize(): this; 218 | 219 | getBounds(): LngLatBounds; 220 | 221 | /** Sets or clears the map's geographical bounds. 222 | * Pan and zoom operations are constrained within these bounds. If a pan or zoom is performed that would display regions outside these bounds, the map will instead display a position and zoom level as close as possible to the operation's request while still remaining within the bounds. 223 | * @param bounds The maximum bounds to set. If not provided provided, the function removes the map's maximum bounds. 224 | */ 225 | setMaxBounds(bounds?: LngLatBounds | Array>): this; 226 | 227 | setMinZoom(minZoom: number): this; 228 | 229 | setMaxZoom(maxZoom: number): this; 230 | 231 | project(lnglat: LngLat): { x: number, y: number }; 232 | 233 | unproject(point: Array): LngLat; 234 | 235 | queryRenderedFeatures(pointOrBox?: Point | Array | Array | Array>, params?: { layers?: Array, filter?: Array }): Array; 236 | 237 | querySourceFeatures(sourceID: string, params?: { sourceLayer?: string, filter?: Array }): Array; 238 | 239 | setStyle(style: Style): this; 240 | 241 | getStyle(): Style; 242 | 243 | //TODO: Should this take source classes like this, or should it take json objects? probably both? 244 | addSource(id: string, source: VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource): this; 245 | 246 | removeSource(id: string): this; 247 | 248 | getSource(id: string): VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource; 249 | 250 | addLayer(layer: Layer, before?: string): this; 251 | 252 | removeLayer(id: string): this; 253 | 254 | getLayer(id: string): Layer; 255 | 256 | setFilter(layer: string, filter: Array): this 257 | 258 | setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this; 259 | 260 | getFilter(layer: string): Array; 261 | 262 | setPaintProperty(layer: string, name: string, value: any, klass?: string): this; 263 | 264 | getPaintProperty(layer: string, name: string, klass?: string): any; 265 | 266 | setLayoutProperty(layer: string, name: string, value: any): this; 267 | 268 | getLayoutProperty(layer: string, name: string, klass?: string): any; 269 | 270 | getContainer(): HTMLElement; 271 | 272 | getCanvasContainer(): HTMLElement; 273 | 274 | getCanvas(): HTMLElement; 275 | 276 | loaded(): boolean; 277 | 278 | remove(): undefined; 279 | 280 | getCenter(): LngLat; 281 | 282 | setCenter(center: LngLat, eventData?: EventData): this; 283 | 284 | panBy(offset: Array, options?: AnimationOptions, eventData?: EventData): this; 285 | 286 | panTo(lnglat: LngLat, options?: AnimationOptions, eventData?: EventData): this; 287 | 288 | getZoom(): number; 289 | 290 | setZoom(zoom: number, eventData?: EventData): this; 291 | 292 | zoomTo(zoom: number, options?: AnimationOptions, eventData?: EventData): this; 293 | 294 | zoomIn(options?: AnimationOptions, eventData?: EventData): this; 295 | 296 | zoomOut(options?: AnimationOptions, eventData?: EventData): this; 297 | 298 | getBearing(): number; 299 | 300 | setBearing(bearing: number, eventData?: EventData): this; 301 | 302 | rotateTo(bearing: number, options?: AnimationOptions, eventData?: EventData): this; 303 | 304 | resetNorth(options?: AnimationOptions, eventData?: EventData): this; 305 | 306 | snapToNorth(options?: AnimationOptions, eventData?: EventData): this; 307 | 308 | getPitch(): number; 309 | 310 | setPitch(pitch: number, eventData?: EventData): this; 311 | 312 | fitBounds(bounds: LngLatBounds | Array>, options: { linear?: boolean, easing?: Function, padding?: number, maxZoom?: number }, eventData?: EventData): this; 313 | 314 | jumpTo(options: CameraOptions, eventData?: EventData): this; 315 | 316 | easeTo(options: CameraAndAnimationOptions, eventData?: EventData): this; 317 | 318 | flyTo(options: CameraAndAnimationOptions, eventData?: EventData): this; 319 | 320 | stop(): this; 321 | } 322 | 323 | /** TODO: Should be a class */ 324 | interface VectorSource extends Source { 325 | type: "vector"; 326 | url: string; 327 | } 328 | 329 | /** TODO: Should be a class */ 330 | interface RasterSource extends Source { 331 | type: "raster"; 332 | url: string; 333 | tileSize: number 334 | } 335 | 336 | class GeoJSONSource implements Source { 337 | type: "geojson"; 338 | 339 | constructor(options: { data: GeoJSON.GeoJsonObject }); 340 | 341 | setData(data: string | GeoJSON.GeoJsonObject): void; 342 | } 343 | 344 | /** TODO: Should be a class */ 345 | interface ImageSource extends Source { 346 | type: "image"; 347 | url: string; 348 | 349 | /** [longitude, latitude] pairs for the image corners listed in clockwise order: top left, top right, bottom right, bottom left. */ 350 | coordinates: Array> 351 | } 352 | 353 | interface VideoSource extends Source { 354 | type: "video"; 355 | 356 | urls: Array; 357 | 358 | /** [longitude, latitude] pairs for the video corners listed in clockwise order: top left, top right, bottom right, bottom left. */ 359 | coordinates: Array> 360 | } 361 | 362 | 363 | interface Layer { 364 | id: string; 365 | type?: "fill" | "line" | "symbol" | "circle" | "raster" | "background"; 366 | 367 | //metadata 368 | ref?: string; 369 | 370 | /** Docs say this is optional but errors say it isn't */ 371 | source: string; 372 | 373 | "source-layer"?: string; 374 | 375 | minzoom?: number; 376 | maxzoom?: number; 377 | 378 | interactive?: boolean; 379 | 380 | filter?: Array; 381 | layout?: BackgroundLayout | FillLayout | LineLayout | SymbolLayout | RasterLayout | CircleLayout; 382 | paint?: BackgroundPaint | FillPaint | LinePaint | SymbolPaint | RasterPaint | CirclePaint; //TODO: Other types 383 | //paint.* 384 | } 385 | 386 | interface StyleFunction { 387 | stops: Array>; 388 | property?: string; 389 | base?: number; 390 | type?: "continuous" | "interval" | "categorical"; 391 | } 392 | 393 | interface BackgroundLayout { 394 | visibility?: "visible" | "none"; 395 | } 396 | 397 | interface BackgroundPaint { 398 | "background-color": string; 399 | "background-pattern": string; 400 | "background-opacity": number; 401 | } 402 | 403 | interface FillLayout { 404 | visibility?: "visible" | "none"; 405 | } 406 | interface FillPaint { 407 | "fill-antialias"?: boolean; 408 | "fill-opacity"?: number; 409 | "fill-color"?: string; 410 | "fill-outline-color": string; 411 | "fill-translate"?: Array; 412 | "fill-translate-anchor"?: "map" | "viewport"; 413 | "fill-pattern"?: "string"; 414 | } 415 | 416 | interface LineLayout { 417 | visibility?: "visible" | "none"; 418 | 419 | "line-cap"?: "butt" | "round" | "square"; 420 | "line-join"?: "bevel" | "round" | "miter"; 421 | "line-miter-limit"?: number; 422 | "line-round-limit"?: number; 423 | } 424 | interface LinePaint { 425 | "line-opacity"?: number; 426 | "line-color"?: string; 427 | "line-translate"?: Array; 428 | "line-translate-anchor"?: "map" | "viewport"; 429 | "line-width"?: number; 430 | "line-gap-width"?: number; 431 | "line-offset"?: number; 432 | "line-blur"?: number; 433 | "line-dasharray"?: Array; 434 | "line-pattern"?: string; 435 | } 436 | 437 | interface SymbolLayout { 438 | visibility?: "visible" | "none"; 439 | 440 | "symbol-placement"?: "point" | "line"; 441 | "symbol-spacing"?: number; 442 | "symbol-avoid-edges"?: boolean; 443 | "icon-allow-overlap"?: boolean; 444 | "icon-ignore-placement"?: boolean; 445 | "icon-optional"?: boolean; 446 | "icon-rotation-alignment"?: "map" | "viewport"; 447 | "icon-size"?: number; 448 | "icon-image"?: string; 449 | "icon-rotate"?: number; 450 | "icon-padding"?: number; 451 | "icon-keep-upright"?: boolean; 452 | "icon-offset"?: Array; 453 | "text-rotation-alignment"?: "map" | "viewport"; 454 | "text-field"?: string; 455 | "text-font"?: string; 456 | "text-size"?: number; 457 | "text-max-width"?: number; 458 | "text-line-height"?: number; 459 | "text-letter-spacing"?: number; 460 | "text-justify"?: "left" | "center" | "right"; 461 | "text-anchor"?: "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"; 462 | "text-max-angle"?: number; 463 | "text-rotate"?: number; 464 | "text-padding"?: number; 465 | "text-keep-upright"?: boolean; 466 | "text-transform"?: "none" | "uppercase" | "lowercase"; 467 | "text-offset"?: Array; 468 | "text-allow-overlap"?: boolean; 469 | "text-ignore-placement"?: boolean; 470 | "text-optional"?: boolean; 471 | 472 | } 473 | interface SymbolPaint { 474 | "icon-opacity"?: number; 475 | "icon-color"?: string; 476 | "icon-halo-color"?: string; 477 | "icon-halo-width"?: number; 478 | "icon-halo-blur"?: number; 479 | "icon-translate"?: Array; 480 | "icon-translate-anchor"?: "map" | "viewport"; 481 | "text-opacity"?: number; 482 | "text-color"?: "string"; 483 | "text-halo-color"?: "string"; 484 | "text-halo-width"?: number; 485 | "text-halo-blur"?: number; 486 | "text-translate"?: Array; 487 | "text-translate-anchor"?: "map" | "viewport"; 488 | } 489 | 490 | interface RasterLayout { 491 | visibility?: "visible" | "none"; 492 | } 493 | 494 | interface RasterPaint { 495 | "raster-opacity"?: number; 496 | "raster-hue-rotate"?: number; 497 | "raster-brightness-min"?: number; 498 | "raster-brightness-max"?: number; 499 | "raster-saturation"?: number; 500 | "raster-contrast"?: number; 501 | "raster-fade-duration"?: number; 502 | } 503 | 504 | interface CircleLayout { 505 | visibility?: "visible" | "none"; 506 | } 507 | 508 | interface CirclePaint { 509 | "circle-radius"?: number | StyleFunction; 510 | "circle-color"?: number | StyleFunction; 511 | "circle-blur"?: number; 512 | "circle-opacity"?: number; 513 | "circle-translate"?: Array; 514 | "circle-translate-anchor"?: "map" | "viewport"; 515 | } 516 | 517 | class Popup { 518 | constructor(options: { 519 | closeButton?: boolean, 520 | closeOnClick?: boolean, 521 | anchor?: 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 522 | }); 523 | 524 | addTo(map: Map): this; 525 | 526 | remove(): this; 527 | 528 | getLngLat(): LngLat; 529 | 530 | setLngLat(lnglat: LngLat): this; 531 | 532 | setText(test: string): this; 533 | 534 | setHtml(html: string): this; 535 | 536 | setDomContent(htmlNode: Node): this; 537 | } 538 | 539 | abstract class Control { 540 | addTo(map: Map): this; 541 | 542 | remove(): this; 543 | } 544 | 545 | class Navigation extends Control { 546 | constructor(options: { 547 | position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 548 | }); 549 | } 550 | 551 | class Geolocate extends Control { 552 | constructor(options: { 553 | position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 554 | }); 555 | } 556 | 557 | class Attribution extends Control { 558 | constructor(options: { 559 | position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' 560 | }); 561 | } 562 | 563 | interface EventData { 564 | originalEvent?: Event; 565 | point?: Array; 566 | lngLat?: LngLat; 567 | } 568 | 569 | interface CameraOptions { 570 | /** Map center */ 571 | center?: LngLat; 572 | /** Map zoom level */ 573 | zoom?: number; 574 | /** Map rotation bearing in degrees counter-clockwise from north */ 575 | bearing?: number; 576 | /** Map angle in degrees at which the camera is looking at the ground */ 577 | pitch?: number; 578 | /** If zooming, the zoom center (defaults to map center) */ 579 | around?: LngLat; 580 | } 581 | 582 | interface AnimationOptions { 583 | /** Number in milliseconds */ 584 | duration?: number; 585 | easing?: Function; 586 | /** point, origin of movement relative to map center */ 587 | offset?: Array; 588 | /** When set to false, no animation happens */ 589 | animate?: boolean; 590 | } 591 | 592 | interface StyleOptions { 593 | transition?: boolean; 594 | } 595 | 596 | interface CameraAndAnimationOptions extends CameraOptions, AnimationOptions { 597 | } 598 | } 599 | 600 | export = mapboxgl; 601 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mapbox-gl", 3 | "main": "mapbox-gl.d.ts", 4 | "homepage": "https://github.com/mapbox/mapbox-gl-js", 5 | "globalDependencies": { 6 | "geojson": "registry:dt/geojson" 7 | }, 8 | "version": "0.0.18" 9 | } --------------------------------------------------------------------------------