Module on

This event is triggered when the basemap changed.

example

// When the basemap is changed, display the new basemap id in the console
JMap.Event.Map.on.basemapChanged(
   "custom-basemap-changed",
   params => {
     console.log("currentActiveBasemapId:", params.currentActiveBasemapId)
     console.log("newActiveBasemapId:", params.newActiveBasemapId)
   }
)

This event is triggered when the mouse is clicked.

example

// When mouse clicked on the map, will display a message in the console
JMap.Event.Map.on.click(
   "custom-map-mouse-click",
   args => {
     const location = args.location
     console.log(
         `The mouse has been clicked at { x="${location.x}, y="${location.y}" }"`,
         args.map, args.mapEvent // mapEvent is the Mapbox event
     )
   }
)

This event is triggered when the map container is ready to use.

Triggered just before the first time the map is created, when JMap Core check if the map container exist or not (and create it if needed).

example

// When the map container is ready, will display a message in the console
JMap.Event.Map.on.containerReady(
   "custom-map-container-ready",
   params => console.log("Map container ready", params)
)

This event is triggered when the map container is resized.

example

// When the map container is resized, it will display a message in the console
JMap.Event.Map.on.containerResized(
   "custom-map-container-resized",
   params => console.log("Map container resized", params)
)

This event is triggered when the map is destroyed.

example

// Each time the map is destroyed, will display a message in the console
JMap.Event.Map.on.mapDestroy(
   "custom-map-destroyed",
   () => console.log(`The map has been destroyed`)
)

This event is triggered when a layer is deleted.

example

// Each time a map is created and ready, will display a message in the console
JMap.Event.Map.on.mapLoad(
   "custom-map-load",
   args => {
     console.log(`The map is ready, map instance = `, args.map)
   }
)

This event is triggered when the mouse enter over a layer feature on a specific layer.

When switching from one feature to another, this event is not called again if the features are joined or intersect. This event only works on vector layers

IMPORTANT! : This event currently only works when a JMap layer's "base style" is displayed on the map (non-thematic), and only works well with a base Style Rule with only one condition and one Style Map Scale on JMap Cloud

example

// When mouse is entering over layer id=2 feature(s), will display 2 messages
// in the console
JMap.Event.Map.on.mouseEnterOnLayer(
   "custom-map-mouse-enter",
   2,
   args => {
     console.log(
         `The mouse entered an element of layer id="${args.layerId}"`,
         args.map, args.mapEvent // mapEvent is the Mapbox event
     )
     console.log(
       `The mouse cursor is over ${args.features.length} features`,
       args.location
     )
   }
)

This event is triggered when the mouse leaves a layer feature, and is not over another feature.

IMPORTANT! : This event currently only works when a JMap layer's "base style" is displayed on the map (non-thematic), and only works well with a base Style Rule with only one condition and one Style Map Scale on JMap Cloud

example

// When mouse is leaving layer id=2, will display a message in the console
JMap.Event.Map.on.mouseLeaveOnLayer(
   "custom-map-mouse-leave",
   2,
   args => {
     console.log(
         `The mouse leaved the layer id="${args.layerId}"`, args.location,
         args.map, args.mapEvent // mapEvent is the Mapbox event
     )
   }
)

This event is triggered when the mouse is moving over the map (when user or library pan the map).

example

// When mouse is moving over the map, will display a message in the console
JMap.Event.Map.on.mouseMove(
   "custom-map-mouse-move",
   args => {
     console.log(
         `The mouse is moving on layer id="${args.layerId}"`, map.location,
         args.map, args.mapEvent // mapEvent is the Mapbox event
     )
   }
)

This event is triggered when the mouse is moving over a JMap Layer on the map.

IMPORTANT! : This event currently only works when a JMap layer's "base style" is displayed on the map (non-thematic), and only works well with a base Style Rule with only one condition and one Style Map Scale on JMap Cloud

example

// When mouse is moving on the map over JMap layer id=2, will display messages in the console
JMap.Event.Map.on.mouseMoveOnLayer(
   "custom-map-mouse-move-on-layer",
   2,
   args => {
     console.log(
         `The mouse is moving on layer id="${args.layerId}"`,
         args.map, args.mapEvent // the mapEvent is the Mapbox event
     )
     console.log(
       `The mouse cursor is over ${args.features.length} features`,
       args.location
     )
   }
)

This event is triggered when the map is moving (when user or library pan the map).

example

// Will map is moving, will display a message in the console
JMap.Event.Map.on.move(
   "custom-map-move",
   args => {
     console.log(`The map is moving`, args.map, args.mapEvent)
     // mapEvent is the Mapbox event
   }
)

This event is triggered when the map end moving (when user or library pan the map).

example

// Each time the map stop moving, will display a message in the console
JMap.Event.Map.on.moveEnd(
   "custom-map-move-end",
   args => {
     console.log(`The map stop moving`, args.map, args.mapEvent)
     // mapEvent is the Mapbox event
   }
)

This event is triggered when the map start moving (when user or library pan the map).

example

// Each time the map start moving, will display a message in the console
JMap.Event.Map.on.moveStart(
   "custom-map-move-start",
   args => {
     console.log(`The map start moving`, args.map, args.mapEvent)
     // mapEvent is the Mapbox event
   }
)

This event is triggered when pitch on the map start.

example

// When the map is pitching, it will display a message in the console
JMap.Event.Map.on.pitch(
   "custom-map-pitch",
   args => console.log(`The map is pitching (pitch="${args.pitch})")`
)

This event is triggered when pitch on the map end.

example

// When the pitch on the map end, it will display a message in the console
JMap.Event.Map.on.pitch(
   "custom-map-pitch-end",
   args => console.log(`The map is pitching (pitch="${args.pitch})")`
)

This event is triggered when pitch on the map start.

example

// When the pitch of the map start, it will display a message in the console
JMap.Event.Map.on.pitchStart(
   "custom-map-pitch-start",
   args => console.log(`The pitch is starting (pitch="${args.pitch})")`
)

This event is triggered when the map is rotating

example

// When the rotation of the map change, it will display a message in the console
JMap.Event.Map.on.rotate(
   "custom-map-rotate",
   args => console.log(`The rotation has changed (rotation="${args.bearing})")`
)

This event is triggered when rotation on the map start.

example

// When the rotation of the map start, it will display a message in the console
JMap.Event.Map.on.rotateStart(
   "custom-map-rotate-start",
   args => console.log(`The rotation is starting (rotation="${args.bearing})")`
)

This event is triggered when rotation on the map stop.

example

// When the rotation of the map stop, it will display a message in the console
JMap.Event.Map.on.rotateStop(
   "custom-map-rotate-stop",
   args => console.log(`The rotation is finished (rotation="${args.bearing})")`
)

This event is triggered when the map selection has changed.

example

// When the selection changed, will display old and new selections in the console
JMap.Event.Map.on.selectionChanged(
   "custom-selection-changed",
   params => {
     console.log("Old selection:", params.oldSelection)
     console.log("New selection:", params.newSelection)
   }
)

This event is triggered when zooming on map

example

// When the map zoom change, it will display a message in the console
JMap.Event.Map.on.zoom(
   "custom-map-zoom",
   args => console.log(`The map zoom changed (zoom="${args.zoom}")`)
)

This event is triggered when zoom end.

example

// When the map zoom end, it will display a message in the console
JMap.Event.Map.on.zoomEnd(
   "custom-map-zoom-end",
   args => console.log(`The zoom is finished (zoom="${args.zoom}")`)
)

This event is triggered when zoom start.

example

// When the map zoom start, it will display a message in the console
JMap.Event.Map.on.zoomStart(
   "custom-map-zoom-start",
   args => console.log(`The zoom is starting (zoom="${args.zoom}")`)
)