@sportrizer/report-map-js NPM

SportRIZER.report map client library

Javascript library that displays the SportySKY map on the frontend

npm.io

Usage

Map creation

import Map from '@sportrizer/report-map-js';

const container = docuement.querySelectorAll('#map-container');
const map = new Map(container, {
  apiEndpoint: 'http://mywebsite/map-api',
});

Parameters :

domElement : The DOM Element you want to put the map in.
config : an object for the map configuration containing these attributes :
- apiEndpoint : string
  an authenticated proxy to the sportrizer.report api.
  default : /api/
- iconSize : integer
  the spots icon size in pixel.
  default : 40
- iconSizeTiny : integer
  the spots icon size in pixel on small devices.
  default : 20
- iconTinyBefore: integer
  the breakpoint in pixel for switching between tiny icons and normal icons.
  default : 1024
- textWeather: function(airTemperature)
  default : airTemperature => `${airTemperature} °c`
- textWind: function(windSpeed)
  default: windSpeed => `${windSpeed} Km/h`
- textWindGust: function(windGust)
  default: airTemperature => `<br><em>(Max. ${windGust})</em>`
- hoverSpot
  default: null
- clickSpot
  default: null
- hasAqData
  default: null

Example :

{
  apiEndpoint: 'http://mywebsite/map-api',
  iconSize: 42,
  textWind: windSpeed => `${windSpeed * 0.539957} nd`
}

Methods

displayCountry

Example :

map.displayCountry(new Date(), 'FR', function(spots) {
  console.log(spots);
});

Parameters

date : a Date object that will be use to return corresponding forecast data
displayIsoCode : a string of the region ISO Code
callback : a callback function that will be called after loading forecast data of the spots giving one argument :
- spots : the spots forecast data returned

displayRegion

Example :

map.displayRegion(new Date(), 'FR-BRE', function(spots) {
  console.log(spots);
});

Parameters

date : a Date object that will be use to return corresponding forecast data
regionIsoCode : a string of the region ISO Code
callback : a callback function that will be called after loading forecast data of the spots giving one argument :
- spots : the spots forecast data returned

displayDepartment

Example :

map.displayDepartment(new Date(), 'FR-29', function(spots) {
  console.log(spots);
});

Parameters

date : a Date object that will be use to return corresponding forecast data
regionIsoCode : a string of the department ISO Code
callback : a callback function that will be called after loading forecast data of the spots giving one argument :
- spots : the spots forecast data returned

getSpotForecast

Example :

map.getSpotForecast(
    new Date("2020-04-22")),
    new Date("2020-04-29"),
    '64678710-3c65-11ea-94b8-0242ac120008',
    function(spot, mapView) {
        console.log(spot);
    }
);

Parameters

startDate : a Date object that will be use to return corresponding forecast data
endDate : a Date object that will be use to return corresponding forecast data
spotUuid : a string of the spot id previously returned by the API
callback : a callback function that will be called after loading forecast data of the spot giving two arguments :
- spot : the spot forecast data returned
- mapView : the current view used ( department , region or country )