From 829d1c9e2292a0fabd2ea3a7ada05292d98bc948 Mon Sep 17 00:00:00 2001 From: Bryan Johnson Date: Wed, 21 Sep 2016 15:12:44 -0600 Subject: [PATCH 1/5] Add mapbox-gl typings --- mapbox-gl/mapbox-gl-tests.ts | 445 +++++++++++++++++ mapbox-gl/mapbox-gl.d.ts | 934 +++++++++++++++++++++++++++++++++++ 2 files changed, 1379 insertions(+) create mode 100644 mapbox-gl/mapbox-gl-tests.ts create mode 100644 mapbox-gl/mapbox-gl.d.ts diff --git a/mapbox-gl/mapbox-gl-tests.ts b/mapbox-gl/mapbox-gl-tests.ts new file mode 100644 index 0000000000..92f72789da --- /dev/null +++ b/mapbox-gl/mapbox-gl-tests.ts @@ -0,0 +1,445 @@ +// These examples are from Mapbox (https://www.mapbox.com/mapbox-gl-js/examples/) and therefore under the copyright of Mapbox Inc. +/// +/// + +/** + * Set API Access Token + */ +mapboxgl.accessToken = 'foo'; + + +/** + * Display a Map + */ +let map = new mapboxgl.Map({ + container: 'map', // container id + style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location + center: [-74.50, 40], // starting position + zoom: 9 // starting zoom +}); + + +/** + * Create and style marker clusters + */ +map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/dark-v8', + center: [-103.59179687498357, 40.66995747013945], + zoom: 3, +}); + +map.on('load', function(){ + + // Add a new source from our GeoJSON data and set the + // 'cluster' option to true. + map.addSource("earthquakes", { + type: "geojson", + // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes + // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program. + data: "/mapbox-gl-js/assets/earthquakes.geojson", + cluster: true, + clusterMaxZoom: 14, // Max zoom to cluster points on + clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) + }); + + // Use the earthquakes source to create five layers: + // One for non-clustered markers, three for each cluster category, + // and one for cluster labels. + map.addLayer({ + "id": "non-cluster-markers", + "type": "symbol", + "source": "earthquakes", + "layout": { + "icon-image": "marker-15" + } + }); + + // Display the earthquake data in three layers, each filtered to a range of + // count values. Each range gets a different fill color. + var layers = [ + [150, '#f28cb1'], + [20, '#f1f075'], + [0, '#51bbd6'] + ]; + + layers.forEach(function (layer, i) { + map.addLayer({ + "id": "cluster-" + i, + "type": "circle", + "source": "earthquakes", + "paint": { + "circle-color": layer[1], + "circle-radius": 18 + }, + "filter": i == 0 ? + [">=", "point_count", layer[0]] : + ["all", + [">=", "point_count", layer[0]], + ["<", "point_count", layers[i - 1][0]]] + }); + }); + + // Add a layer for the clusters' count labels + map.addLayer({ + "id": "cluster-count", + "type": "symbol", + "source": "earthquakes", + "layout": { + "text-field": "{point_count}", + "text-font": [ + "DIN Offc Pro Medium", + "Arial Unicode MS Bold" + ], + "text-size": 12 + } + }); +}); + +/** + * Add a GeoJSON line + */ +map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/streets-v8', + center: [-122.486052, 37.830348], + zoom: 15 +}); + +map.on('load', function () { + map.addSource("route", { + "type": "geojson", + "data": { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "LineString", + "coordinates": [ + [-122.48369693756104, 37.83381888486939], + [-122.48348236083984, 37.83317489144141], + [-122.48339653015138, 37.83270036637107], + [-122.48356819152832, 37.832056363179625], + [-122.48404026031496, 37.83114119107971], + [-122.48404026031496, 37.83049717427869], + [-122.48348236083984, 37.829920943955045], + [-122.48356819152832, 37.82954808664175], + [-122.48507022857666, 37.82944639795659], + [-122.48610019683838, 37.82880236636284], + [-122.48695850372314, 37.82931081282506], + [-122.48700141906738, 37.83080223556934], + [-122.48751640319824, 37.83168351665737], + [-122.48803138732912, 37.832158048267786], + [-122.48888969421387, 37.83297152392784], + [-122.48987674713133, 37.83263257682617], + [-122.49043464660643, 37.832937629287755], + [-122.49125003814696, 37.832429207817725], + [-122.49163627624512, 37.832564787218985], + [-122.49223709106445, 37.83337825839438], + [-122.49378204345702, 37.83368330777276] + ] + } + } + }); + + map.addLayer({ + "id": "route", + "type": "line", + "source": "route", + "layout": { + "line-join": "round", + "line-cap": "round" + }, + "paint": { + "line-color": "#888", + "line-width": 8 + } + }); +}); + +/** + * Display a Popup + */ + +map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/streets-v8', + center: [-96, 37.8], + zoom: 3 +}); + +map.flyTo({center: [0, 0], zoom: 9}); + +map.flyTo({ + center: [0, 0], + zoom: 9, + speed: 0.2, + curve: 1, + easing: function(t: any) { + return t; + } +}); + +/** + * GeoJSONSource + */ +var geoJSONSourceObj = new mapboxgl.GeoJSONSource({ + data: { + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "properties": null, + "geometry": { + "type": "Point", + "coordinates": [ + -76.53063297271729, + 39.18174077994108 + ] + } + }] + } +}); +map.addSource('some id', geoJSONSourceObj); // add +map.removeSource('some id'); // remove + +/** + * ImageSource + */ +var imageSourceObj = new mapboxgl.ImageSource({ + url: 'https://www.mapbox.com/images/foo.png', + coordinates: [ + [-76.54335737228394, 39.18579907229748], + [-76.52803659439087, 39.1838364847587], + [-76.5295386314392, 39.17683392507606], + [-76.54520273208618, 39.17876344106642] + ] +}); +map.addSource('some id', imageSourceObj); // add +map.removeSource('some id'); // remove + +/** + * Video Source + */ +var videoSourceObj = new mapboxgl.VideoSource({ + urls: [ + 'https://www.mapbox.com/videos/baltimore-smoke.mp4', + 'https://www.mapbox.com/videos/baltimore-smoke.webm' + ], + coordinates: [ + [-76.54335737228394, 39.18579907229748], + [-76.52803659439087, 39.1838364847587], + [-76.5295386314392, 39.17683392507606], + [-76.54520273208618, 39.17876344106642] + ] +}); +map.addSource('some id', videoSourceObj); // add +map.removeSource('some id'); // remove + +/** + * Tooltip + */ +var tooltip = new mapboxgl.Popup({closeOnClick: false}) + .setLngLat([-96, 37.8]) + .setHTML('

Hello World!

') + .addTo(map); + +/** + * Add an image + */ +var mapStyle = { + "version": 8, + "name": "Dark", + "sources": { + "mapbox": { + "type": "vector", + "url": "mapbox://mapbox.mapbox-streets-v6" + }, + "overlay": { + "type": "image", + "url": "/mapbox-gl-js/assets/radar.gif", + "coordinates": [ + [-80.425, 46.437], + [-71.516, 46.437], + [-71.516, 37.936], + [-80.425, 37.936] + ] + } + }, + "sprite": "mapbox://sprites/mapbox/dark-v8", + "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": {"background-color": "#111"} + }, + { + "id": "water", + "source": "mapbox", + "source-layer": "water", + "type": "fill", + "paint": {"fill-color": "#2c2c2c"} + }, + { + "id": "boundaries", + "source": "mapbox", + "source-layer": "admin", + "type": "line", + "paint": {"line-color": "#797979", "line-dasharray": [2, 2, 6, 2]}, + "filter": ["all", ["==", "maritime", 0]], + }, + { + "id": "overlay", + "source": "overlay", + "type": "raster", + "paint": {"raster-opacity": 0.85} + }, + { + "id": "cities", + "source": "mapbox", + "source-layer": "place_label", + "type": "symbol", + "layout": { + "text-field": "{name_en}", + "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"], + "text-size": {"stops": [[4, 9], [6, 12]]} + }, + "paint": { + "text-color": "#969696", + "text-halo-width": 2, + "text-halo-color": "rgba(0, 0, 0, 0.85)" + } + }, + { + "id": "states", + "source": "mapbox", + "source-layer": "state_label", + "type": "symbol", + "layout": { + "text-transform": "uppercase", + "text-field": "{name_en}", + "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"], + "text-letter-spacing": 0.15, + "text-max-width": 7, + "text-size": {"stops": [[4, 10], [6, 14]]} + }, + "filter": [">=", "area", 80000], + "paint": { + "text-color": "#969696", + "text-halo-width": 2, + "text-halo-color": "rgba(0, 0, 0, 0.85)" + } + } + ] +}; + +map = new mapboxgl.Map({ + container: 'map', + maxZoom: 5.99, + minZoom: 4, + zoom: 5, + center: [-75.789, 41.874], + style: mapStyle, + hash: false +}); + +/** + * Add video + */ +var videoStyle = { + "version": 8, + "sources": { + "satellite": { + "type": "raster", + "url": "mapbox://mapbox.satellite", + "tileSize": 256 + }, + "video": { + "type": "video", + "urls": ["https://www.mapbox.com/drone/video/drone.mp4", "https://www.mapbox.com/drone/video/drone.webm"], + "coordinates": [ + [-122.51596391201019, 37.56238816766053], + [-122.51467645168304, 37.56410183312965], + [-122.51309394836426, 37.563391708549425], + [-122.51423120498657, 37.56161849366671] + ] + } + }, + "layers": [{ + "id": "background", + "type": "background", + "paint": { + "background-color": "rgb(4,7,14)" + } + }, { + "id": "satellite", + "type": "raster", + "source": "satellite" + }, { + "id": "video", + "type": "raster", + "source": "video" + }] +}; + +map = new mapboxgl.Map({ + container: 'map', + minZoom: 14, + zoom: 17, + center: [-122.514426, 37.562984], + bearing: -96, + style: videoStyle, + hash: false +}); + +/** + * Add GeoJSON Markers + */ +map = new mapboxgl.Map({ + container: 'map', + style: 'mapbox://styles/mapbox/streets-v8', + center: [-96, 37.8], + zoom: 3 +}); + +map.on('load', function () { + map.addSource("markers", { + "type": "geojson", + "data": { + "type": "FeatureCollection", + "features": [{ + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [-77.03238901390978, 38.913188059745586] + }, + "properties": { + "title": "Mapbox DC", + "marker-symbol": "monument" + } + }, { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [-122.414, 37.776] + }, + "properties": { + "title": "Mapbox SF", + "marker-symbol": "harbor" + } + }] + } + }); + + map.addLayer({ + "id": "markers", + "type": "symbol", + "source": "markers", + "layout": { + "icon-image": "{marker-symbol}-15", + "text-field": "{title}", + "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], + "text-offset": [0, 0.6], + "text-anchor": "top" + } + }); +}); \ No newline at end of file diff --git a/mapbox-gl/mapbox-gl.d.ts b/mapbox-gl/mapbox-gl.d.ts new file mode 100644 index 0000000000..6ea2ec5c71 --- /dev/null +++ b/mapbox-gl/mapbox-gl.d.ts @@ -0,0 +1,934 @@ +// Type definitions for Mapbox GL JS v0.24.0 +// Project: https://github.com/mapbox/mapbox-gl-js +// Definitions by: Dominik Bruderer +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace mapboxgl { + let accessToken: string; + let version: string; + export function supported(options?: {failIfMajorPerformanceCaveat?: boolean}): boolean; + + /** + * Map + */ + export class Map extends Evented { + constructor(options?: MapboxOptions); + + addControl(control: Control): this; + + addClass(klass: string, options?: mapboxgl.StyleOptions): this; + + removeClass(klass: string, options?: mapboxgl.StyleOptions): this; + + setClasses(klasses: string[], options?: mapboxgl.StyleOptions): this; + + hasClass(klass: string): boolean; + + getClasses(): string[]; + + resize(): this; + + getBounds(): mapboxgl.LngLatBounds; + + setMaxBounds(lnglatbounds?: mapboxgl.LngLatBounds | number[][]): this; + + setMinZoom(minZoom?: number): this; + + setMaxZoom(maxZoom?: number): this; + + project(lnglat: mapboxgl.LngLat | number[]): mapboxgl.Point; + + unproject(point: mapboxgl.Point | number[]): mapboxgl.LngLat; + + queryRenderedFeatures(pointOrBox?: mapboxgl.Point|number[]|mapboxgl.Point[]|number[][], parameters?: {layers?: string[], filter?: any[]}): GeoJSON.Feature[]; + + querySourceFeatures(sourceID: string, parameters: {sourceLayer?: string, filter?: any[]}): GeoJSON.Feature[]; + + setStyle(style: mapboxgl.Style | string): this; + + getStyle(): mapboxgl.Style; + + addSource(id: string, source: VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource | GeoJSONSourceRaw): this; + + removeSource(id: string): this; + + getSource(id: string): VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource; + + addLayer(layer: mapboxgl.Layer, before?: string): this; + + removeLayer(id: string): this; + + getLayer(id: string): mapboxgl.Layer; + + setFilter(layer: string, filter: any[]): this; + + setLayerZoomRange(layerId: string, minzoom: number, maxzoom: number): this; + + getFilter(layer: string): any[]; + + setPaintProperty(layer: string, name: string, value: any, klass?: string): this; + + getPaintProperty(layer: string, name: string, klass?: string): any; + + setLayoutProperty(layer: string, name: string, value: any): this; + + getLayoutProperty(layer: string, name: string, klass?: string): any; + + getContainer(): HTMLElement; + + getCanvasContainer(): HTMLElement; + + getCanvas(): HTMLCanvasElement; + + loaded(): boolean; + + remove(): void; + + onError(): void; + + showTileBoundaries: boolean; + + showCollisionBoxes: boolean; + + repaint: boolean; + + getCenter(): mapboxgl.LngLat; + + setCenter(center: LngLat|number[], eventData?: mapboxgl.EventData): this; + + panBy(offset: number[], options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + panTo(lnglat: mapboxgl.LngLat, options?: mapboxgl.AnimationOptions, eventdata?: mapboxgl.EventData): this; + + getZoom(): number; + + setZoom(zoom: number, eventData?: mapboxgl.EventData): this; + + zoomTo(zoom: number, options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + zoomIn(options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + zoomOut(options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + getBearing(): number; + + setBearing(bearing: number, eventData?: mapboxgl.EventData): this; + + rotateTo(bearing: number, options?: mapboxgl.AnimationOptions, eventData?: EventData): this; + + resetNorth(options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + snapToNorth(options?: mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + getPitch(): number; + + setPitch(pitch: number, eventData?: EventData): this; + + fitBounds(bounds: mapboxgl.LngLatBounds | number[][], options?: { linear?: boolean, easing?: Function, padding?: number, offset?: Point|number[],maxZoom?: number }): this; + + jumpTo(options: mapboxgl.CameraOptions, eventData?: mapboxgl.EventData): this; + + easeTo(options: mapboxgl.CameraOptions | mapboxgl.AnimationOptions, eventData?: mapboxgl.EventData): this; + + flyTo(options: mapboxgl.FlyToOptions, eventData?: mapboxgl.EventData): this; + + stop(): this; + + scrollZoom: ScrollZoomHandler; + + boxZoom: BoxZoomHandler; + + dragRotate: DragRotateHandler; + + dragPan: DragPanHandler; + + keyboard: KeyboardHandler; + + doublClickZoom: DoubleClickZoomHandler; + + touchZoomRotate: TouchZoomRotateHandler; + } + + export interface MapboxOptions { + /** If true, an attribution control will be added to the map. */ + attributionControl?: boolean; + + bearing?: number; + + /** Snap to north threshold in degrees. */ + bearingSnap?: number; + + /** If true, enable the "box zoom" interaction (see BoxZoomHandler) */ + boxZoom?: boolean; + + /** initial map center */ + center?: mapboxgl.LngLat | number[]; + + /** Style class names with which to initialize the map */ + classes?: string[]; + + /** ID of the container element */ + container?: string | Element; + + /** If true, enable the "drag to pan" interaction (see DragPanHandler). */ + dragPan?: boolean; + + /** If true, enable the "drag to rotate" interaction (see DragRotateHandler). */ + dragRotate?: boolean; + + /** If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler). */ + doubleClickZoom?: boolean; + + /** If true, the map will track and update the page URL according to map position */ + hash?: boolean; + + /** If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected. */ + failIfMayorPerformanceCaveat?: boolean; + + /** If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input */ + interactive?: boolean; + + /** If true, enable keyboard shortcuts (see KeyboardHandler). */ + keyboard?: boolean; + + /** If set, the map is constrained to the given bounds. */ + maxBounds?: mapboxgl.LngLatBounds | number[][]; + + /** Maximum zoom of the map */ + maxZoom?: number; + + /** Minimum zoom of the map */ + minZoom?: number; + + /** If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization. */ + preserveDrawingBuffer?: boolean; + + pitch?: number; + + /** If true, enable the "scroll to zoom" interaction */ + scrollZoom?: boolean; + + /** stylesheet location */ + style?: mapboxgl.Style | string; + + /** If true, the map will automatically resize when the browser window resizes */ + trackResize?: boolean; + + /** If true, enable the "pinch to rotate and zoom" interaction (see TouchZoomRotateHandler). */ + touchZoomRotate?: boolean; + + /** Initial zoom level */ + zoom?: number; + } + + /** + * BoxZoomHandler + */ + export class BoxZoomHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + isActive(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * ScrollZoomHandler + */ + export class ScrollZoomHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * DragPenHandler + */ + export class DragPanHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + isActive(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * DragRotateHandler + */ + export class DragRotateHandler { + constructor(map: mapboxgl.Map, options?: {bearingSnap?: number, pitchWithRotate?: boolean}); + + isEnabled(): boolean; + + isActive(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * KeyboardHandler + */ + export class KeyboardHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * DoubleClickZoomHandler + */ + export class DoubleClickZoomHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + enable(): void; + + disable(): void; + } + + /** + * TouchZoomRotateHandler + */ + export class TouchZoomRotateHandler { + constructor(map: mapboxgl.Map); + + isEnabled(): boolean; + + enable(): void; + + disable(): void; + + disableRotation(): void; + + enableRotation(): void; + } + + /** + * Control + */ + export class Control extends Evented { + addTo(map: mapboxgl.Map): this; + + remove(): this; + } + + /** + * ControlOptions + */ + export interface ControlOptions { + position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'; + } + + /** + * Navigation + */ + export class Navigation extends Control { + constructor(options?: mapboxgl.ControlOptions); + } + + /** + * Geolocate + */ + export class Geolocate extends Control { + constructor(options?: mapboxgl.ControlOptions); + } + + /** + * Attribution + */ + export class Attribution extends Control { + constructor(options?: mapboxgl.ControlOptions); + } + + /** + * Scale + */ + export class Scale extends Control { + constructor(options?: {position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left', maxWidth?: number, unit?: string}) + } + + /** + * Popup + */ + export class Popup extends Evented { + constructor(options?: mapboxgl.PopupOptions); + + addTo(map: mapboxgl.Map): this; + + isOpen(): boolean; + + remove(): this; + + getLngLat(): mapboxgl.LngLat; + + setLngLat(lnglat: mapboxgl.LngLat | number[]): this; + + setText(text: string): this; + + setHTML(html: string): this; + + setDOMContent(htmlNode: Node): this; + } + + export interface PopupOptions { + closeButton?: boolean; + + closeOnClick?: boolean; + + anchor?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; + + offset?: number | Point | number[] | { [key:string]: Point | number[];}; + } + + export interface Style { + bearing?: number; + center?: number[]; + glyphs?: string; + layers?: Layer[]; + metadata?: any; + name?: string; + pitch?: number; + sources?: any; + sprite?: string; + transition?: Transition; + version: number; + zoom?: number; + } + + export interface Transition { + delay?: number; + duration?: number; + } + + export interface Source { + type: "vector" | "raster" | "geojson" | "image" | "video"; + } + + /** + * GeoJSONSource + */ + + export interface GeoJSONSourceRaw extends Source, GeoJSONSourceOptions { + type: "geojson"; + } + + export class GeoJSONSource implements GeoJSONSourceRaw { + type: "geojson"; + + constructor(options?: mapboxgl.GeoJSONSourceOptions); + + setData(data: GeoJSON.Feature | GeoJSON.FeatureCollection | String): this; + } + + export interface GeoJSONSourceOptions { + data?: GeoJSON.Feature | GeoJSON.FeatureCollection | string; + + maxzoom?: number; + + buffer?: number; + + tolerance?: number; + + cluster?: number | boolean; + + clusterRadius?: number; + + clusterMaxZoom?: number; + } + + /** + * VideoSource + */ + export class VideoSource implements Source, VideoSourceOptions { + type: "video"; + + constructor(options?: mapboxgl.VideoSourceOptions); + + getVideo(): HTMLVideoElement; + + setCoordinates(coordinates: number[][]): this; + } + + export interface VideoSourceOptions { + urls?: string[]; + + coordinates?: number[][]; + } + + /** + * ImageSource + */ + export class ImageSource implements Source, ImageSourceOptions { + type: "image"; + + constructor(options?: mapboxgl.ImageSourceOptions); + + setCoordinates(coordinates: number[][]): this; + } + + export interface ImageSourceOptions { + url?: string; + + coordinates?: number[][]; + } + + interface VectorSource extends Source { + type: "vector"; + url?: string; + tiles?: string[]; + minzoom?: number; + maxzoom?: number; + } + + interface RasterSource extends Source { + type: "raster"; + url: string; + tiles?: string[]; + minzoom?: number; + maxzoom?: number; + tileSize?: number; + } + + /** + * LngLat + */ + export class LngLat { + lng: number; + lat: number; + + constructor(lng: number, lat: number); + + /** Return a new LngLat object whose longitude is wrapped to the range (-180, 180). */ + wrap(): mapboxgl.LngLat; + + /** Return a LngLat as an array */ + toArray(): number[]; + + /** Return a LngLat as a string */ + toString(): string; + + static convert(input: number[]|mapboxgl.LngLat): mapboxgl.LngLat; + } + + /** + * LngLatBounds + */ + export class LngLatBounds { + sw: LngLat | number[]; + ne: LngLat | number[]; + constructor(sw?: LngLat, ne?: LngLat); + + /** Extend the bounds to include a given LngLat or LngLatBounds. */ + extend(obj: mapboxgl.LngLat | mapboxgl.LngLatBounds): this; + + /** Get the point equidistant from this box's corners */ + getCenter(): mapboxgl.LngLat; + + /** Get southwest corner */ + getSouthWest(): mapboxgl.LngLat; + + /** Get northeast corner */ + getNorthEast(): mapboxgl.LngLat; + + /** Get northwest corner */ + getNorthWest(): mapboxgl.LngLat; + + /** Get southeast corner */ + getSouthEast(): mapboxgl.LngLat; + + /** Get west edge longitude */ + getWest(): number; + + /** Get south edge latitude */ + getSouth(): number; + + /** Get east edge longitude */ + getEast(): number; + + /** Get north edge latitude */ + getNorth(): number; + + /** Returns a LngLatBounds as an array */ + toArray(): number[][]; + + /** Return a LngLatBounds as a string */ + toString(): string; + + /** Convert an array to a LngLatBounds object, or return an existing LngLatBounds object unchanged. */ + static convert(input: mapboxgl.LngLatBounds | number[] | number[][]): mapboxgl.LngLatBounds; + } + + /** + * Point + */ + // Todo: Pull out class to seperate definition for Module "point-geometry" + export class Point { + constructor(options?: Object); + + clone(): Point; + + add(p: number): Point; + + sub(p: number): Point; + + mult(k: number): Point; + + div(k: number): Point; + + rotate(a: number): Point; + + matMult(m: number): Point; + + unit(): Point; + + perp(): Point; + + round(): Point; + + mag(): number; + + equals(): boolean; + + dist(): number; + + distSqr(): number; + + angle(): number; + + angleTo(): number; + + angleWidth(): number; + + angleWidthSep(): number; + } + + export class Marker { + constructor(element?: HTMLElement, options?: { offset?: Point | number[] }); + + addTo(map: Map): this; + + remove(): this; + + getLngLat(): LngLat; + + setLngLat(lngLat: LngLat | number[]): this; + + setPopup(popup?: Popup): this; + + getPopup(): Popup; + + togglePopup(): this; + } + + /** + * Evented + */ + export class Evented { + on(type: string, listener: Function): this; + + off(type?: string | any, listener?: Function): this; + + once(type: string, listener: Function): this; + + fire(type: string, data?: mapboxgl.EventData | Object): this; + + listens(type: string): boolean; + } + + /** + * StyleOptions + */ + export interface StyleOptions { + transition?: boolean; + } + + /** + * EventData + */ + export class EventData { + type: string; + target: Map; + originalEvent: Event; + point: mapboxgl.Point; + lngLat: mapboxgl.LngLat; + } + + export class MapMouseEvent { + type: string; + target: Map; + originalEvent: MouseEvent; + point: mapboxgl.Point; + lngLat: mapboxgl.LngLat; + } + + export class MapTouchEvent { + type: string; + target: Map; + originalEvent: TouchEvent; + point: mapboxgl.Point; + lngLat: mapboxgl.LngLat; + points: Array; + lngLats: Array; + } + + export class MapBoxZoomEvent { + originalEvent: MouseEvent; + boxZoomBounds: LngLatBounds; + } + + /** + * AnimationOptions + */ + export interface AnimationOptions { + /** Number in milliseconds */ + duration?: number; + easing?: Function; + /** point, origin of movement relative to map center */ + offset?: Point | number[]; + /** When set to false, no animation happens */ + animate?: boolean; + } + + /** + * CameraOptions + */ + export interface CameraOptions { + /** Map center */ + center?: mapboxgl.LngLat | number[]; + /** Map zoom level */ + zoom?: number; + /** Map rotation bearing in degrees counter-clockwise from north */ + bearing?: number; + /** Map angle in degrees at which the camera is looking at the ground */ + pitch?: number; + /** If zooming, the zoom center (defaults to map center) */ + around?: mapboxgl.LngLat | number[]; + } + + /** + * FlyToOptions + */ + export interface FlyToOptions extends AnimationOptions, CameraOptions { + curve?: number; + minZoom?: number; + speed?: number; + screenSpeed?: number; + easing?: Function; + } + + /** + * MapEvent + */ + export interface MapEvent { + webglcontextlost?: {originalEvent: WebGLContextEvent}; + webglcontextrestored?: {originalEvent: WebGLContextEvent}; + render?: void; + contextmenu?: {data: mapboxgl.MapMouseEvent}; + dblclick?: {data: mapboxgl.MapMouseEvent}; + click?: {data: mapboxgl.MapMouseEvent}; + touchcancel?: {data: mapboxgl.MapTouchEvent}; + touchmove?: {data: mapboxgl.MapTouchEvent}; + touchend?: {data: mapboxgl.MapTouchEvent}; + touchstart?: {data: mapboxgl.MapTouchEvent}; + mousemove?: {data: mapboxgl.MapMouseEvent}; + mouseup?: {data: mapboxgl.MapMouseEvent}; + mousedown?: {data: mapboxgl.MapMouseEvent}; + moveend?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + move?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + movestart?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + mouseout?:{data: mapboxgl.MapMouseEvent}; + load?: void; + zoomend?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + zoom?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + zoomstart?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + boxzoomcancel?: {data: mapboxgl.MapBoxZoomEvent}; + boxzoomstart?: {data: mapboxgl.MapBoxZoomEvent}; + boxzoomend?: {data: mapboxgl.MapBoxZoomEvent}; + rotate?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + rotatestart?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + rotateend?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + drag?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + dragend?: {data: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent}; + pitch?: {data: mapboxgl.EventData}; + } + + export interface Layer { + id: string; + type?: "fill" | "line" | "symbol" | "circle" | "raster" | "background" | string; //TODO: Ideally we wouldn't accept string here, just these specific strings + + metadata?: any; + ref?: string; + + source?: string; + + "source-layer"?: string; + + minzoom?: number; + maxzoom?: number; + + interactive?: boolean; + + filter?: Array; + layout?: BackgroundLayout | FillLayout | LineLayout | SymbolLayout | RasterLayout | CircleLayout; + paint?: BackgroundPaint | FillPaint | LinePaint | SymbolPaint | RasterPaint | CirclePaint; + } + + export interface StyleFunction { + stops: Array>; + property?: string; + base?: number; + type?: "continuous" | "interval" | "categorical"; + } + + export interface BackgroundLayout { + visibility?: "visible" | "none"; + } + export interface BackgroundPaint { + "background-color"?: string; + "background-pattern"?: string; + "background-opacity"?: number; + } + + export interface FillLayout { + visibility?: "visible" | "none"; + } + export interface FillPaint { + "fill-antialias"?: boolean; + "fill-opacity"?: number | StyleFunction; + "fill-color"?: string | StyleFunction; + "fill-outline-color": string | StyleFunction; + "fill-translate"?: Array; + "fill-translate-anchor"?: "map" | "viewport"; + "fill-pattern"?: "string"; + } + + export interface LineLayout { + visibility?: "visible" | "none"; + + "line-cap"?: "butt" | "round" | "square"; + "line-join"?: "bevel" | "round" | "miter"; + "line-miter-limit"?: number; + "line-round-limit"?: number; + } + export interface LinePaint { + "line-opacity"?: number; + "line-color"?: string| StyleFunction; + "line-translate"?: Array; + "line-translate-anchor"?: "map" | "viewport"; + "line-width"?: number; + "line-gap-width"?: number; + "line-offset"?: number; + "line-blur"?: number; + "line-dasharray"?: Array; + "line-dasharray-transition"?: Transition; + "line-pattern"?: string; + } + + export interface SymbolLayout { + visibility?: "visible" | "none"; + + "symbol-placement"?: "point" | "line"; + "symbol-spacing"?: number; + "symbol-avoid-edges"?: boolean; + "icon-allow-overlap"?: boolean; + "icon-ignore-placement"?: boolean; + "icon-optional"?: boolean; + "icon-rotation-alignment"?: "map" | "viewport" | "auto"; + "icon-size"?: number; + "icon-text-fit"?: "none" | "both" | "width" | "height"; + "icon-text-fit-padding"?: Array; + "icon-image"?: string; + "icon-rotate"?: number | StyleFunction; + "icon-padding"?: number; + "icon-keep-upright"?: boolean; + "icon-offset"?: Array; + "text-pitch-alignment"?: "map" | "viewport" | "auto"; + "text-rotation-alignment"?: "map" | "viewport" | "auto"; + "text-field"?: string; + "text-font"?: string | string[]; + "text-size"?: number; + "text-max-width"?: number; + "text-line-height"?: number; + "text-letter-spacing"?: number; + "text-justify"?: "left" | "center" | "right"; + "text-anchor"?: "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"; + "text-max-angle"?: number; + "text-rotate"?: number; + "text-padding"?: number; + "text-keep-upright"?: boolean; + "text-transform"?: "none" | "uppercase" | "lowercase"; + "text-offset"?: Array; + "text-allow-overlap"?: boolean; + "text-ignore-placement"?: boolean; + "text-optional"?: boolean; + + } + export interface SymbolPaint { + "icon-opacity"?: number; + "icon-color"?: string; + "icon-halo-color"?: string; + "icon-halo-width"?: number; + "icon-halo-blur"?: number; + "icon-translate"?: Array; + "icon-translate-anchor"?: "map" | "viewport"; + "text-opacity"?: number; + "text-color"?: "string"; + "text-halo-color"?: "string"; + "text-halo-width"?: number; + "text-halo-blur"?: number; + "text-translate"?: Array; + "text-translate-anchor"?: "map" | "viewport"; + } + + export interface RasterLayout { + visibility?: "visible" | "none"; + } + + export interface RasterPaint { + "raster-opacity"?: number; + "raster-hue-rotate"?: number; + "raster-brightness-min"?: number; + "raster-brightness-max"?: number; + "raster-saturation"?: number; + "raster-contrast"?: number; + "raster-fade-duration"?: number; + } + + export interface CircleLayout { + visibility?: "visible" | "none"; + } + + export interface CirclePaint { + "circle-radius"?: number | StyleFunction; + "circle-radius-transition"?: Transition; + "circle-color"?: number | StyleFunction; + "circle-blur"?: number | StyleFunction; + "circle-opacity"?: number | StyleFunction; + "circle-translate"?: Array; + "circle-translate-anchor"?: "map" | "viewport"; + "circle-pitch-scale"?: "map" | "viewport"; + } +} + +declare module 'mapbox-gl' { + export = mapboxgl; +} From 1c02488e759f747cf31d268ca55db83b1be1c787 Mon Sep 17 00:00:00 2001 From: Bryan Johnson Date: Wed, 21 Sep 2016 15:18:46 -0600 Subject: [PATCH 2/5] Fixes to get the tests working --- mapbox-gl/mapbox-gl-tests.ts | 2 +- mapbox-gl/mapbox-gl.d.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/mapbox-gl/mapbox-gl-tests.ts b/mapbox-gl/mapbox-gl-tests.ts index 92f72789da..90cb9ff580 100644 --- a/mapbox-gl/mapbox-gl-tests.ts +++ b/mapbox-gl/mapbox-gl-tests.ts @@ -1,6 +1,6 @@ // These examples are from Mapbox (https://www.mapbox.com/mapbox-gl-js/examples/) and therefore under the copyright of Mapbox Inc. /// -/// +/// /** * Set API Access Token diff --git a/mapbox-gl/mapbox-gl.d.ts b/mapbox-gl/mapbox-gl.d.ts index 6ea2ec5c71..50f9fca505 100644 --- a/mapbox-gl/mapbox-gl.d.ts +++ b/mapbox-gl/mapbox-gl.d.ts @@ -3,6 +3,8 @@ // Definitions by: Dominik Bruderer // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +/// + declare namespace mapboxgl { let accessToken: string; let version: string; From 137e01e335610c54507009de39399e9d8643483f Mon Sep 17 00:00:00 2001 From: Bryan Johnson Date: Thu, 22 Sep 2016 11:47:14 -0600 Subject: [PATCH 3/5] Switch Array<> to [] --- mapbox-gl/mapbox-gl.d.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/mapbox-gl/mapbox-gl.d.ts b/mapbox-gl/mapbox-gl.d.ts index 50f9fca505..2ee8d30949 100644 --- a/mapbox-gl/mapbox-gl.d.ts +++ b/mapbox-gl/mapbox-gl.d.ts @@ -688,8 +688,8 @@ declare namespace mapboxgl { originalEvent: TouchEvent; point: mapboxgl.Point; lngLat: mapboxgl.LngLat; - points: Array; - lngLats: Array; + points: Point[]; + lngLats: LngLat[]; } export class MapBoxZoomEvent { @@ -789,13 +789,13 @@ declare namespace mapboxgl { interactive?: boolean; - filter?: Array; + filter?: any[]; layout?: BackgroundLayout | FillLayout | LineLayout | SymbolLayout | RasterLayout | CircleLayout; paint?: BackgroundPaint | FillPaint | LinePaint | SymbolPaint | RasterPaint | CirclePaint; } export interface StyleFunction { - stops: Array>; + stops: any[][]; property?: string; base?: number; type?: "continuous" | "interval" | "categorical"; @@ -818,7 +818,7 @@ declare namespace mapboxgl { "fill-opacity"?: number | StyleFunction; "fill-color"?: string | StyleFunction; "fill-outline-color": string | StyleFunction; - "fill-translate"?: Array; + "fill-translate"?: number[]; "fill-translate-anchor"?: "map" | "viewport"; "fill-pattern"?: "string"; } @@ -834,13 +834,13 @@ declare namespace mapboxgl { export interface LinePaint { "line-opacity"?: number; "line-color"?: string| StyleFunction; - "line-translate"?: Array; + "line-translate"?: number[]; "line-translate-anchor"?: "map" | "viewport"; "line-width"?: number; "line-gap-width"?: number; "line-offset"?: number; "line-blur"?: number; - "line-dasharray"?: Array; + "line-dasharray"?: number[]; "line-dasharray-transition"?: Transition; "line-pattern"?: string; } @@ -857,12 +857,12 @@ declare namespace mapboxgl { "icon-rotation-alignment"?: "map" | "viewport" | "auto"; "icon-size"?: number; "icon-text-fit"?: "none" | "both" | "width" | "height"; - "icon-text-fit-padding"?: Array; + "icon-text-fit-padding"?: number[]; "icon-image"?: string; "icon-rotate"?: number | StyleFunction; "icon-padding"?: number; "icon-keep-upright"?: boolean; - "icon-offset"?: Array; + "icon-offset"?: number[]; "text-pitch-alignment"?: "map" | "viewport" | "auto"; "text-rotation-alignment"?: "map" | "viewport" | "auto"; "text-field"?: string; @@ -878,7 +878,7 @@ declare namespace mapboxgl { "text-padding"?: number; "text-keep-upright"?: boolean; "text-transform"?: "none" | "uppercase" | "lowercase"; - "text-offset"?: Array; + "text-offset"?: number[]; "text-allow-overlap"?: boolean; "text-ignore-placement"?: boolean; "text-optional"?: boolean; @@ -890,14 +890,14 @@ declare namespace mapboxgl { "icon-halo-color"?: string; "icon-halo-width"?: number; "icon-halo-blur"?: number; - "icon-translate"?: Array; + "icon-translate"?: number[]; "icon-translate-anchor"?: "map" | "viewport"; "text-opacity"?: number; "text-color"?: "string"; "text-halo-color"?: "string"; "text-halo-width"?: number; "text-halo-blur"?: number; - "text-translate"?: Array; + "text-translate"?: number[]; "text-translate-anchor"?: "map" | "viewport"; } @@ -925,7 +925,7 @@ declare namespace mapboxgl { "circle-color"?: number | StyleFunction; "circle-blur"?: number | StyleFunction; "circle-opacity"?: number | StyleFunction; - "circle-translate"?: Array; + "circle-translate"?: number[]; "circle-translate-anchor"?: "map" | "viewport"; "circle-pitch-scale"?: "map" | "viewport"; } From a05e0e04092c9ee51f69e9b4b5e6a8c86d7dc109 Mon Sep 17 00:00:00 2001 From: Bryan Johnson Date: Thu, 22 Sep 2016 12:19:42 -0600 Subject: [PATCH 4/5] modify tests --- mapbox-gl/mapbox-gl-tests.ts | 166 ++++++++++------------------------- 1 file changed, 47 insertions(+), 119 deletions(-) diff --git a/mapbox-gl/mapbox-gl-tests.ts b/mapbox-gl/mapbox-gl-tests.ts index 90cb9ff580..6102b5c270 100644 --- a/mapbox-gl/mapbox-gl-tests.ts +++ b/mapbox-gl/mapbox-gl-tests.ts @@ -1,4 +1,3 @@ -// These examples are from Mapbox (https://www.mapbox.com/mapbox-gl-js/examples/) and therefore under the copyright of Mapbox Inc. /// /// @@ -12,51 +11,47 @@ mapboxgl.accessToken = 'foo'; * Display a Map */ let map = new mapboxgl.Map({ - container: 'map', // container id - style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location - center: [-74.50, 40], // starting position - zoom: 9 // starting zoom + container: 'map', + style: 'mapbox://styles/mapbox/streets-v8', + center: [-50, 50], + zoom: 10, + minZoom: 1, + maxZoom: 2, + interactive: true, + attributionControl: false, + bearingSnap: 7, + scrollZoom: true, + maxBounds: [[-100,-90],[100,90]], + boxZoom: true, + dragRotate: false, + dragPan: true, }); /** * Create and style marker clusters */ -map = new mapboxgl.Map({ - container: 'map', - style: 'mapbox://styles/mapbox/dark-v8', - center: [-103.59179687498357, 40.66995747013945], - zoom: 3, -}); - map.on('load', function(){ // Add a new source from our GeoJSON data and set the // 'cluster' option to true. - map.addSource("earthquakes", { + map.addSource("data", { type: "geojson", - // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes - // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program. - data: "/mapbox-gl-js/assets/earthquakes.geojson", + data: "/data.geojson", cluster: true, clusterMaxZoom: 14, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) }); - // Use the earthquakes source to create five layers: - // One for non-clustered markers, three for each cluster category, - // and one for cluster labels. map.addLayer({ - "id": "non-cluster-markers", + "id": "layer", "type": "symbol", - "source": "earthquakes", + "source": "data", "layout": { "icon-image": "marker-15" } }); - // Display the earthquake data in three layers, each filtered to a range of - // count values. Each range gets a different fill color. var layers = [ [150, '#f28cb1'], [20, '#f1f075'], @@ -67,7 +62,7 @@ map.on('load', function(){ map.addLayer({ "id": "cluster-" + i, "type": "circle", - "source": "earthquakes", + "source": "data", "paint": { "circle-color": layer[1], "circle-radius": 18 @@ -84,7 +79,7 @@ map.on('load', function(){ map.addLayer({ "id": "cluster-count", "type": "symbol", - "source": "earthquakes", + "source": "data", "layout": { "text-field": "{point_count}", "text-font": [ @@ -94,19 +89,10 @@ map.on('load', function(){ "text-size": 12 } }); -}); /** * Add a GeoJSON line */ -map = new mapboxgl.Map({ - container: 'map', - style: 'mapbox://styles/mapbox/streets-v8', - center: [-122.486052, 37.830348], - zoom: 15 -}); - -map.on('load', function () { map.addSource("route", { "type": "geojson", "data": { @@ -156,24 +142,13 @@ map.on('load', function () { }); }); -/** - * Display a Popup - */ - -map = new mapboxgl.Map({ - container: 'map', - style: 'mapbox://styles/mapbox/streets-v8', - center: [-96, 37.8], - zoom: 3 -}); - -map.flyTo({center: [0, 0], zoom: 9}); - +// FlyTo map.flyTo({ center: [0, 0], - zoom: 9, - speed: 0.2, + zoom: 10, + speed: 0.5, curve: 1, + screenSpeed: 1, easing: function(t: any) { return t; } @@ -190,10 +165,7 @@ var geoJSONSourceObj = new mapboxgl.GeoJSONSource({ "properties": null, "geometry": { "type": "Point", - "coordinates": [ - -76.53063297271729, - 39.18174077994108 - ] + "coordinates": [-50, 0] } }] } @@ -205,7 +177,7 @@ map.removeSource('some id'); // remove * ImageSource */ var imageSourceObj = new mapboxgl.ImageSource({ - url: 'https://www.mapbox.com/images/foo.png', + url: '/foo.png', coordinates: [ [-76.54335737228394, 39.18579907229748], [-76.52803659439087, 39.1838364847587], @@ -221,8 +193,8 @@ map.removeSource('some id'); // remove */ var videoSourceObj = new mapboxgl.VideoSource({ urls: [ - 'https://www.mapbox.com/videos/baltimore-smoke.mp4', - 'https://www.mapbox.com/videos/baltimore-smoke.webm' + '/blah.mp4', + '/blah.webm' ], coordinates: [ [-76.54335737228394, 39.18579907229748], @@ -235,10 +207,10 @@ map.addSource('some id', videoSourceObj); // add map.removeSource('some id'); // remove /** - * Tooltip + * Popup */ -var tooltip = new mapboxgl.Popup({closeOnClick: false}) - .setLngLat([-96, 37.8]) +var popup = new mapboxgl.Popup({closeOnClick: false, closeButton: true, anchor: 'top-right', offset: {'top': [0,0], 'bottom': [25,-50]} }) + .setLngLat([-50, 50]) .setHTML('

Hello World!

') .addTo(map); @@ -257,10 +229,10 @@ var mapStyle = { "type": "image", "url": "/mapbox-gl-js/assets/radar.gif", "coordinates": [ - [-80.425, 46.437], - [-71.516, 46.437], - [-71.516, 37.936], - [-80.425, 37.936] + [-50, 40], + [0, 40], + [0, 0], + [-50, 0] ] } }, @@ -334,18 +306,18 @@ var mapStyle = { map = new mapboxgl.Map({ container: 'map', - maxZoom: 5.99, - minZoom: 4, - zoom: 5, - center: [-75.789, 41.874], - style: mapStyle, + minZoom: 14, + zoom: 17, + center: [-122.514426, 37.562984], + bearing: -96, + style: videoStyle, hash: false }); /** * Add video */ -var videoStyle = { +var videoStyle: mapboxgl.Style = { "version": 8, "sources": { "satellite": { @@ -355,7 +327,7 @@ var videoStyle = { }, "video": { "type": "video", - "urls": ["https://www.mapbox.com/drone/video/drone.mp4", "https://www.mapbox.com/drone/video/drone.webm"], + "urls": ["drone.mp4", "drone.webm"], "coordinates": [ [-122.51596391201019, 37.56238816766053], [-122.51467645168304, 37.56410183312965], @@ -392,54 +364,10 @@ map = new mapboxgl.Map({ }); /** - * Add GeoJSON Markers + * Marker */ -map = new mapboxgl.Map({ - container: 'map', - style: 'mapbox://styles/mapbox/streets-v8', - center: [-96, 37.8], - zoom: 3 -}); +let marker = new mapboxgl.Marker(null,{offset: [10, 0]}) + .setLngLat([-50,50]) + .addTo(map); -map.on('load', function () { - map.addSource("markers", { - "type": "geojson", - "data": { - "type": "FeatureCollection", - "features": [{ - "type": "Feature", - "geometry": { - "type": "Point", - "coordinates": [-77.03238901390978, 38.913188059745586] - }, - "properties": { - "title": "Mapbox DC", - "marker-symbol": "monument" - } - }, { - "type": "Feature", - "geometry": { - "type": "Point", - "coordinates": [-122.414, 37.776] - }, - "properties": { - "title": "Mapbox SF", - "marker-symbol": "harbor" - } - }] - } - }); - - map.addLayer({ - "id": "markers", - "type": "symbol", - "source": "markers", - "layout": { - "icon-image": "{marker-symbol}-15", - "text-field": "{title}", - "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], - "text-offset": [0, 0.6], - "text-anchor": "top" - } - }); -}); \ No newline at end of file +marker.remove(); \ No newline at end of file From 5f5622fead1b6ca463529cab5d0e6844b3ff617a Mon Sep 17 00:00:00 2001 From: Bryan Johnson Date: Thu, 22 Sep 2016 14:10:29 -0600 Subject: [PATCH 5/5] include link to mapbox gl examples --- mapbox-gl/mapbox-gl-tests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/mapbox-gl/mapbox-gl-tests.ts b/mapbox-gl/mapbox-gl-tests.ts index 6102b5c270..f77a9f4af7 100644 --- a/mapbox-gl/mapbox-gl-tests.ts +++ b/mapbox-gl/mapbox-gl-tests.ts @@ -1,3 +1,4 @@ +// These examples adapted from Mapbox's examples (https://www.mapbox.com/mapbox-gl-js/examples) /// ///