@byrdapp/byrd-map
v0.2.2
Published
Angular wrapper for Mapbox GL with enterprise-specific methods.
Downloads
69
Readme
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"
}
New in 0.2.0
Map only loads photographers that exists in the viewport, greatly reducing the loadtime.