Journey visualizer and Leaflet file

[makbn]

A yaml format file to define a journey with timeline and is parsable by JL Map

Features:

• Ability to define steps with duration (e.g. moving a JL Marker from London to Paris in 5 second following a JL Poly line curve path)
• Ability to add remove, move JL Objects to/from map in each step (e.g. move a JL object, changing/updating other parameters, removing from map)
• Ability to control the callbacks (e.g. do a transition on a callback or move to the next step)
• Ability to change the state of the map and objects based on the step, timeline, condition of other objects conditions (e.g. if a JL Marker position reached a specific lat-lng, and Map Zoom is reached to level 3, let's add a JL pop-up)

This feature will be part of v2.0.0 release experimental package and might be added to the stable package in v2 later or v3.

[makbn]

A draft for leafltet file in yaml format that allows to define steps and transitions:

# Generic YAML schema for JL-Map journeys
# Supports any JL object type with full options

title: "Generic Journey Example"
description: "Demonstrates full flexibility with JL objects and options"

map:
  provider: "MAPTILER"
  center:
    lat: 45.5017
    lng: -73.5673
  zoom: 4

steps:
  # MOVE step with marker and full options
  - type: "MOVE"
    from:
      lat: 36.5659
      lng: 53.0586
      name: "Start Location"
    to:
      lat: 35.6892
      lng: 51.3890
      name: "End Location"
    object:
      type: "marker"
      id: "moving-marker-1"
      icon:
        iconUrl: "https://cdn-icons-png.flaticon.com/512/3097/3097220.png"
        iconSize: [64, 64]
        iconAnchor: [32, 32]
        popupAnchor: [0, -32]
        shadowUrl: "https://example.com/shadow.png"
        shadowSize: [64, 64]
      options:
        draggable: false
        opacity: 1.0
    path:
      type: "polyline"
      style: "CURVED"
      options:
        color: "#2196F3"
        weight: 3
        opacity: 0.8
        stroke: true
        fill: false
        smoothFactor: 1.0
      showPath: true
    duration: 5000
    smoothness: 300
    messages:
      start: "Starting journey"
      end: "Arrived at destination"

  # TRANSITION step - change object at location
  - type: "TRANSITION"
    location:
      lat: 35.6892
      lng: 51.3890
      name: "Transition Point"
    object:
      type: "marker"
      icon:
        iconUrl: "https://cdn-icons-png.flaticon.com/512/2906/2906274.png"
        iconSize: [48, 48]
        iconAnchor: [24, 24]
    duration: 1500
    message: "Changing to new icon"

  # ADD_OBJECT step - add a circle
  - type: "ADD_OBJECT"
    object:
      type: "circle"
      id: "area-circle-1"
      coordinates:
        lat: 35.6892
        lng: 51.3890
      radius: 50000  # meters
      options:
        color: "#FF5722"
        fillColor: "#FF5722"
        fillOpacity: 0.3
        weight: 2
        stroke: true
        fill: true
    message: "Adding coverage area"
    delay: 500

  # ADD_OBJECT step - add a polygon
  - type: "ADD_OBJECT"
    object:
      type: "polygon"
      id: "zone-polygon-1"
      coordinates:
        - lat: 35.6
          lng: 51.3
        - lat: 35.7
          lng: 51.3
        - lat: 35.7
          lng: 51.4
        - lat: 35.6
          lng: 51.4
      options:
        color: "#4CAF50"
        fillColor: "#4CAF50"
        fillOpacity: 0.2
        weight: 2
    message: "Adding restricted zone"

  # ADD_OBJECT step - add a polyline (route)
  - type: "ADD_OBJECT"
    object:
      type: "polyline"
      id: "route-line-1"
      coordinates:
        - lat: 35.6892
          lng: 51.3890
        - lat: 35.7
          lng: 51.4
        - lat: 35.75
          lng: 51.45
      options:
        color: "#9C27B0"
        weight: 4
        opacity: 0.7
        stroke: true
    message: "Drawing route"

  # MOVE with circle object
  - type: "MOVE"
    from:
      lat: 45.5017
      lng: -73.5673
      name: "Montreal"
    to:
      lat: 51.0447
      lng: -114.0719
      name: "Calgary"
    object:
      type: "marker"
      icon:
        iconUrl: "https://cdn-icons-png.flaticon.com/512/3182/3182857.png"
        iconSize: [64, 64]
        iconAnchor: [32, 32]
    path:
      type: "polyline"
      style: "STRAIGHT"
      options:
        color: "#F44336"
        weight: 5
        opacity: 1.0
        dashArray: "10, 10"  # Dashed line
      showPath: true
    duration: 4000

  # MESSAGE step
  - type: "MESSAGE"
    message: "Journey complete!"
    delay: 1000

  # REMOVE_OBJECT step
  - type: "REMOVE_OBJECT"
    object:
      id: "area-circle-1"
    message: "Removing coverage area"
    delay: 500