@byrdapp/byrd-map NPM

ByrdMap v0.2.2

Angular wrapper for Mapbox GL with enterprise-specific methods.

Install

npm install @byrdapp/byrd-map

Remember to include the following in app.module or wherever you need it.

NgxMapboxGLModule.withConfig({
      accessToken: 'TOKEN'
})

Inputs (All are dynamic - accepts binding)

mapCenter: Where the map should initially be placed. Accepts a Geo Location object shaped like { latitude: number, longditude: number } Required
zoom: A number between 0 and 20. Default is 5. More information about zoom levels here
marker: A boolean which determines whether or not a marker should be shown. If true, markerLocations should have at least one position.
markerLocations: Accepts an array of Geo Location objects shaped like { latitude: number, longditude: number }, ...
isInteractive: A boolean which determines whether the user can pan around the map. Zoom is still enabled.
setByClick: A boolean which allows the user to set a marker by clicking the map. Requires isInteractive to be true as well.
input: A boolean which allows showing an input field that uses Mapbox's geocoding to search locations from the input query.
hasRadius: A boolean which shows radius input. Default value of radius is 2 km.
currentRadius: A number which determines the initial value of radius. Requires hasRadius to be true.
showReporters: A boolean which determines whether reporters should be shown on the map.
reporters$: An Observable of shape { geolocation: { latitude: number, longditude: number }, id?: string, lastLocationTime?: number } to load custom reporters on map.
showPhotographerOnClick: A boolean which determines whether a popup show on click of reporter.
emitOnClick: A boolean which determines whether clicking on the map or adjusting radius should trigger output emit. Requires interactive to be true. Default value is true.

Output

(loaded): Listen to this event to check when the map has loaded, returns true when map is loaded.
(inputSelection): The EventEmitter that emits the output.

The shape of the output is as follows:

{
    currentLocation: {
        name: string, // This includes the address, if any, the city and country.
        id: string, // This has the format of "place_type.unique number"
        _geolocCenter: {
            longditude: number,
            latitude: number,
        }
    },
    radius: number or null //depending on whether radius is enabled and larger than 0
    locationType: "street" | "city" | "country"
}