Map | gme-api-client

Public API

Hierarchy

AbstractMap
- Map

Constructors

constructor

new Map(opts: IMapCreateOptions): Map

Point d'entrée de l'API

example


let map = new PlugGME.Map({
   container: 'map',
   nutsLevel: "nuts4", //default "nuts4" => commune
   selectionColor: "rgba(10, 230, 120, 0.8)",
   token: "..."
 });

Parameters

opts: IMapCreateOptions

Returns Map

Methods

addMarkerAt

addMarkerAt(geometry: { coordinates: [number, number]; type: "Point" }, opts?: { icon?: string; uid?: string }): Promise<Map>

- Defined in map.ts:598
Ajoute un marker aux coordonnées spécifiées
example
```
await map.addMarkerAt(
  geocodedAddrs.features[0].geometry,
  { icon: "pin" }
);
```
Parameters
- geometry: { coordinates: [number, number]; type: "Point" }
  
  au format geojson.
  - coordinates: [number, number]
  - type: "Point"
- opts: { icon?: string; uid?: string } = {}
  
  icon : nom de l'icon à utiliser pour le marker. Si aucun nom n'est fourni c'est l'icon par défaut qui est utilisé. uid : identifiant unique optionnel pour ce marker
  - Optional icon?: string
  - Optional uid?: string
Returns Promise<Map>

addPolygonGeoJSON

addPolygonGeoJSON(geometry: any, opts: { uid?: string } & IStrokeStyle & IFillStyle): Promise<Map>

Ajoute un polygon

example

await map.addPolygonGeoJSON(
  geocodedAddrs.features[0].geometry,
  { stroke: 2, strokeColor: "#00FF00", fill: "rgba(0, 0, 0, 0.1)" }
);

Parameters

geometry: any

au format geojson.
opts: { uid?: string } & IStrokeStyle & IFillStyle

Returns Promise<Map>

centerOnLngLat

centerOnLngLat(lngLat: LngLatLike, zoom?: 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18, animated?: boolean): Promise<Map>

- Defined in map.ts:296
Parameters
- lngLat: LngLatLike
- zoom: 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 = 10
- animated: boolean = false
Returns Promise<Map>

centerOnNuts

centerOnNuts(nuts: string[], animated?: boolean, padding?: Padding): Promise<Map>

- Defined in map.ts:324
Centrage de la carte sur les nuts passés en paramètres
example
```
map.centerOnNuts(["92002"]);
```
Parameters
- nuts: string[]
- animated: boolean = false
- Optional padding: Padding
Returns Promise<Map>

clearMarkers

clearMarkers(): Promise<Map>

- Defined in map.ts:637
Efface tous les markers ajoutés via la commande addMarkerAt

Returns Promise<Map>

geocodeAddress

geocodeAddress(options: { address: string }): Promise<{ features: any[]; type: "FeatureCollection" }>

- Defined in map.ts:752
Geocode l'adresse fournie en paramètre.
example
```
const geocodedAddrs = await map.geocodeAddress({address: "rue du pont, Neuilly"});
const feat0 = geocodedAddrs.features[0];
const geom0 = feat0.geometry;
const coordinates = geom0.coordinates;
```
Parameters
- options: { address: string }
  - address: string
Returns Promise<{ features: any[]; type: "FeatureCollection" }>
une liste de features avec les coordonnées de l'adresse géocodée

getCodegeosByTravelRequest

getCodegeosByTravelRequest(options: { center: [number, number]; distance?: number; time?: number; unit: string; vehicle: "car" | "foot" }): Promise<{ codegeos: string[]; geometry: any }>

- Defined in map.ts:722
Parameters
- options: { center: [number, number]; distance?: number; time?: number; unit: string; vehicle: "car" | "foot" }
  - center: [number, number]
  - Optional distance?: number
  - Optional time?: number
  - unit: string
  - vehicle: "car" | "foot"
Returns Promise<{ codegeos: string[]; geometry: any }>

getCodegeosIntersectingGeom

getCodegeosIntersectingGeom(geom: any): Promise<string>

- Defined in map.ts:701
Parameters
- geom: any
  
  GeoJSON
Returns Promise<string>

getCodegeosUnderTravelDistance

getCodegeosUnderTravelDistance(options: { center: [number, number]; distance: number; vehicle: "car" | "foot" }): Promise<{ codegeos: string[]; geometry: any }>

- Defined in map.ts:711
Retourne la liste des code géographiques (à la maille en cours) intersectant le polygone d'iso-distance

Parameters
- options: { center: [number, number]; distance: number; vehicle: "car" | "foot" }
  
  distance in km
  - center: [number, number]
  - distance: number
  - vehicle: "car" | "foot"
Returns Promise<{ codegeos: string[]; geometry: any }>

getCodegeosUnderTravelTime

getCodegeosUnderTravelTime(options: { center: [number, number]; time: number; vehicle: "car" | "foot" }): Promise<{ codegeos: string[]; geometry: any }>

- Defined in map.ts:719
Retourne la liste des code géographiques (à la maille en cours) intersectant le polygone d'isochrone

Parameters
- options: { center: [number, number]; time: number; vehicle: "car" | "foot" }
  
  time in minutes
  - center: [number, number]
  - time: number
  - vehicle: "car" | "foot"
Returns Promise<{ codegeos: string[]; geometry: any }>

getState

getState(): StateMutator

- Defined in map.ts:257
Returns StateMutator

onLoaded

onLoaded(cb: () => void): void

- Defined in map.ts:515
Parameters
- cb: () => void
  - - (): void
    - Returns void
Returns void

onNutsClicked

onNutsClicked(cb: (selectedNuts: string, state: StateMutator, nutsLevel: NutsLevel) => string): void

Ajout d'un callback appelé lorsque l'utilisateur sélectionne/déselectionne une entité géographique à l'écran. La fonction fournit prend comme paramètre l'entité cliquée ainsi qu'un state mutator.

example


map.onNutsClicked((nuts, state, nutsLevel) => {
  const nuts4Selectable = ["92002","92004","92007","92009","92012"];
  const nuts5Selectable = ["920020403","920020000","920020402","920020301","920020307"];
  const nutsSelectable = nutsLevel === "nuts4" ? nuts4Selectable : nuts5Selectable;
  switch (currentState) {
    case "selected":
      if (nutsSelectable.indexOf(nuts.codegeo) !== -1) {
        state.mut(nuts, null);
      }
    default:
      state.mut(nuts, "selected");
  }
});

Parameters

cb: (selectedNuts: string, state: StateMutator, nutsLevel: NutsLevel) => string
- - (selectedNuts: string, state: StateMutator, nutsLevel: NutsLevel): string
  - Parameters
    - selectedNuts: string
    - state: StateMutator
    - nutsLevel: NutsLevel
    Returns string

Returns void

onNutsFreehandSelection

onNutsFreehandSelection(cb: (selectedNuts: string[], state: StateMutator, nutsLevel: NutsLevel) => string): void

- Defined in map.ts:484
Ajout d'un callback appelé lorsque l'utilisateur sélectionne une ou plusieurs entités géographique à l'écran à l'aide de l'outil de dessin. La fonction fournit prend comme paramètre les entités cliquées ainsi qu'un state mutator.
example
```
map.onNutsPolygonSelection((nuts, state, nutsLevel) => {
  state.clear();
  nuts.forEach(function(n) { state.mut(n, "selected") });
});
```
Parameters
- cb: (selectedNuts: string[], state: StateMutator, nutsLevel: NutsLevel) => string
  - - (selectedNuts: string[], state: StateMutator, nutsLevel: NutsLevel): string
    - Parameters
      - selectedNuts: string[]
      - state: StateMutator
      - nutsLevel: NutsLevel
      Returns string
Returns void

onNutsStateChange

onNutsStateChange(cb: () => void): void

- Defined in map.ts:466
Ajout d'un callback appelé lorsque l'état d'une ou plusieurs entités géographiques a été modifié. Le callback n'est appelé que suite à une action de l'utilisateur. La fonction fournit prend comme paramètre un objet StateReader.
example
```
map.onNutsStateChange(
  state => console.log(state.getNutsWithState("selected"))
);
```
Parameters
- cb: () => void
  - - (): void
    - Returns void
Returns void

registerIcon

registerIcon(name: string, svg: string, opts: { offset?: [number, number]; scale?: any; size?: any; style?: any }): Promise<Map>

Enregistre un nouvel icon

example

await map.registerIcon(
  "circle",
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <circle cx="256" cy="256" r="256" fill="green"></circle>
   </svg>`,
  { offset: [0, 0], size: 36 } // point d'ancrage centré
);

await map.registerIcon(
  "circle2",
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
     <rect x="0" y="0" width="512" height="512" fill="green"></rect>
   </svg>`,
  { offset: [18, -18], size: 36 } // point d'ancrage en bas à gauche
);

Parameters

name: string
svg: string
opts: { offset?: [number, number]; scale?: any; size?: any; style?: any }

offset coordonnées du point d'ancrage utilisé pour le marker. Défini dans les coordonnées de l'icon à la taille spécifiée, [0, 0] représente le centre de l'icon.
- Optional offset?: [number, number]
- Optional scale?: any
- Optional size?: any
- Optional style?: any

Returns Promise<Map>

removeMarker

removeMarker(__namedParameters: { uid: string }): Promise<Map>

- Defined in map.ts:623
Efface le marker avec l'uid passé en paramètre

Parameters
- __namedParameters: { uid: string }
  - uid: string
Returns Promise<Map>

removePolygonGeoJSON

removePolygonGeoJSON(__namedParameters: { uid: string }): Promise<Map>

- Defined in map.ts:685
Efface le polygon avec l'uid passé en paramètre

Parameters
- __namedParameters: { uid: string }
  - uid: string
Returns Promise<Map>

reverseGeocodeAddress

reverseGeocodeAddress(options: { coordinates: [number, number] }): Promise<any>

- Defined in map.ts:763
Parameters
- options: { coordinates: [number, number] }
  - coordinates: [number, number]
Returns Promise<any>

setBoundingPolygonGeojson

setBoundingPolygonGeojson(geom: any, __namedParameters?: IStrokeStyle): Promise<Map>

- Defined in map.ts:439
Affichage du polygon d'emprise en geojson
example
```
map.setBoundingPolygonGeojson(geom);
```
Parameters
- geom: any
- __namedParameters: IStrokeStyle = {}
Returns Promise<Map>

setDisplayedNutsLevel

setDisplayedNutsLevel(nutsLevel: NutsLevel): Promise<Map>

- Defined in map.ts:282
Choix du niveau de nuts
```
nuts4 => commune
nuts5 => iris
```
example
```
map.setDisplayedNutsLevel("nuts5");
//-> fond de carte iris
```
Parameters
- nutsLevel: NutsLevel
Returns Promise<Map>

setFreehandSelectionEnabled

setFreehandSelectionEnabled(enabled: boolean): Promise<Map>

- Defined in map.ts:531
Parameters
- enabled: boolean
Returns Promise<Map>

setNutsBoundingPolygon

setNutsBoundingPolygon(nuts: string[], __namedParameters?: IStrokeStyle): Promise<Map>

- Defined in map.ts:408
Affichage du polygone d'emprise des nuts passés en paramètres
example
```
map.setNutsBondingPolygon(["92002"]);
```
Parameters
- nuts: string[]
- __namedParameters: IStrokeStyle = {}
Returns Promise<Map>

setNutsLayerOpacity

setNutsLayerOpacity(opacity: number): Promise<Map>

- Defined in map.ts:525
Change l'opacité de remplissage du calque des entités géographiques sélectionnées

Parameters
- opacity: number
Returns Promise<Map>

setNutsStyleState

setNutsStyleState(style: IMapFillStates): Promise<any>

- Defined in map.ts:381
Parameters
- style: IMapFillStates
Returns Promise<any>

setRadiusSelectionEnabled

setRadiusSelectionEnabled(enabled: boolean): Promise<Map>

- Defined in map.ts:538
Parameters
- enabled: boolean
Returns Promise<Map>

updateNutsState

updateNutsState(state: string, nuts: string[], __namedParameters?: IStateUpdateOptions): Promise<Map>

- Defined in map.ts:352
Assigne un state aux nuts passés en paramètre. Centrage (optionnel) de la carte.
example
```
map.updateNutsState("selected", ["92002"]);
```
Parameters
- state: string
- nuts: string[]
- __namedParameters: IStateUpdateOptions = {}
Returns Promise<Map>

Hierarchy

Index

Constructors

Methods

Constructors

constructor

Parameters

opts: IMapCreateOptions

Returns Map

Methods

addMarkerAt

Parameters

geometry: { coordinates: [number, number]; type: "Point" }

coordinates: [number, number]

type: "Point"

opts: { icon?: string; uid?: string } = {}

Optional icon?: string

Optional uid?: string

Returns Promise<Map>

addPolygonGeoJSON

Parameters

geometry: any

opts: { uid?: string } & IStrokeStyle & IFillStyle

Returns Promise<Map>

centerOnLngLat

Parameters

lngLat: LngLatLike

zoom: 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 = 10

animated: boolean = false

Returns Promise<Map>

centerOnNuts

Parameters

nuts: string[]

animated: boolean = false

Optional padding: Padding

Returns Promise<Map>

clearMarkers

Returns Promise<Map>

geocodeAddress

Parameters

options: { address: string }

address: string

Returns Promise<{ features: any[]; type: "FeatureCollection" }>

getCodegeosByTravelRequest

Parameters

options: { center: [number, number]; distance?: number; time?: number; unit: string; vehicle: "car" | "foot" }

center: [number, number]

Optional distance?: number

Optional time?: number

unit: string

vehicle: "car" | "foot"

Returns Promise<{ codegeos: string[]; geometry: any }>

getCodegeosIntersectingGeom

Parameters

geom: any

Returns Promise<string>

getCodegeosUnderTravelDistance

Parameters

options: { center: [number, number]; distance: number; vehicle: "car" | "foot" }

center: [number, number]

distance: number

vehicle: "car" | "foot"

Returns Promise<{ codegeos: string[]; geometry: any }>

getCodegeosUnderTravelTime

Parameters

options: { center: [number, number]; time: number; vehicle: "car" | "foot" }

center: [number, number]

time: number

vehicle: "car" | "foot"

Returns Promise<{ codegeos: string[]; geometry: any }>

getState

Returns StateMutator

onLoaded

Parameters

cb: () => void

Returns void

Returns void

onNutsClicked

Parameters

cb: (selectedNuts: string, state: StateMutator, nutsLevel: NutsLevel) => string