@road-labs/map-sdk 0.0.28-rc.7 → 0.0.28-rc.9

package/README.md

@@ -31,7 +31,8 @@ The `App` component accepts the following props:
 | `height`                    | Yes      | Both       | Both    | Height of the map container in pixels.                                                                                                                                                                                              | `-`                     |
 | `gestureHandling`           | Yes      | Both       | Both    | Google Maps SDK parameter controlling how gestures (scroll, pinch, etc.) interact with the map. Allowed values: `greedy`, `cooperative`, `none`, `auto`. We suggest a default value of `greedy`.                                        | `-`                     |
 | `authorization`             | Yes      | v2         | Both    | The public map key. Besides granting access it decides what kind of map this is: its remote configuration carries the context (`cpo` or `msp`), the operators, publishing modes and Google Maps key. The context is never passed as a prop. On `cpo` maps the widget uses the `/1/map/cpo/*` endpoints, draws locations individually while the view holds at most 1000 of them, and colours pins and filters by the OCPP status the station reports (Faulted red, Unavailable amber, in-session blue, Available green, no report grey, a fault outranking everything else on a pin). `msp` maps keep the clustering, filters and colours the mobile apps use. | `-`                     |
-| `version`                   | No       | Both       | Both    | Which version of the map SDK do you wish to use.                                                                                                                                                                                     | `v1`                    |
+| `version`                   | No       | Both       | Both    | Which behaviour set the widget runs. `v1` is the legacy widget. `v2` authenticates with the map key, loads its remote configuration and shows the v2 details view. `v3` keeps everything in `v2` and draws the redesigned pins described under [Pins](#pins-v3); it also sends `version: v3` to the API, which then counts a bucket's statuses per EVSE (per connector on `cpo` maps) instead of per location and returns the cheapest current energy price per kWh for each bucket. | `v1`                    |
+| `currency`                  | No       | v3         | Both    | ISO 4217 code of the currency prices per kWh are shown in on the pins and filtered in. Sent as `currency` on every search and analytics request; a location publishing its tariff in another currency shows no price. A `currency` in the map key's remote configuration is used when the prop is not set. | `EUR`                   |
 | `language`                  | No       | Both       | Both    | Language of the widget. Supported values: `en`, `nl`, `de`, `fr`, `it`, `es` and their regional variants (e.g. `nl-NL`, `de-AT`), matched case-insensitively. Unsupported values fall back to `en`. If nothing is set, the browser language is used. | Browser language        |
 | `position {lat,lng}`        | No       | Both       | Both    | Initial latitude/longitude to center the map on load. If not provided, defaults to visitor's IP-based location.                                                                                                                      | Visitor IP location     |
 | `useBrowserLocation`        | No       | Both       | Both    | Use the browser location to center the map.                                                                                                                                                                                          | `false`                 |
@@ -51,7 +52,8 @@ The `App` component accepts the following props:
 | `showNoAdditionalFeeFilter` | No       | v2         | msp     | Used to configure whether we enable the user to filter out stations that come with additional fees.                                                                                                                                  | `false`                 |
 | `showPublishingModeFilter`  | No       | v2         | cpo     | Used to configure whether we enable the user to filter out public or private stations.                                                                                                                                               | `false`                 |
 | `showOperatorOnly`          | No       | v2         | both    | String value representing the operator name. Include a quick filter option to find a specific operator.                                                                                                                               | `-`                     |
-| `showAnalytics`             | No       | v2         | Both    | Shows status pills next to the filter toggle for the current view and filters: EVSEs by roaming status, and on `cpo` maps a second pill with connectors by the OCPP status the station reports. Clicking a status toggles the matching status filter (the OCPP pill on `cpo` maps, the roaming pill on `msp` maps) and the selected statuses are highlighted; the roaming pill on a `cpo` map is read-only because the CPO search filters on OCPP status. The counts ignore the status selection so every status in the view stays listed; all other filters apply. Fetched from `/1/map/analytics` (`/1/map/cpo/analytics` on `cpo` maps) whenever the view or filters change. Hidden on screens narrower than 768px. | `false`                 |
+| `showPriceFilter`           | No       | v3         | Both    | Shows a `Max. price per kWh` slider in the filters panel. While a limit is set the search sends `maxEnergyPrice` and only locations whose cheapest current energy price, including VAT, is at or below it are drawn; with `Fast Chargers` on, only DC connectors count towards that price. Locations the API has no price for are excluded while a limit is set, so enable this once the pricing backfill has run for the map's data. The `Any` step lifts the limit. | `false`                 |
+| `showAnalytics`             | No       | v2         | Both    | Shows a status pill next to the filter toggle for the current view and filters. On `msp` maps it lists EVSEs by roaming status. On `cpo` maps it defaults to connectors by the OCPP status the station reports, with an `EVSE Status \| Roaming Status` switch under the pill to flip to the roaming breakdown; only one shows at a time. Clicking a status toggles the matching status filter (the OCPP view on `cpo` maps, the roaming view on `msp` maps) and the selected statuses are highlighted; the roaming view on a `cpo` map is read-only because the CPO search filters on OCPP status. The counts ignore the status selection so every status in the view stays listed; all other filters apply. Fetched from `/1/map/analytics` (`/1/map/cpo/analytics` on `cpo` maps) whenever the view or filters change. Hidden on screens narrower than 768px. | `false`                 |
 | `onMarkerClicked`           | No       | Both       | Both    | Callback function that is called when a marker is clicked. Receives an object with `ids` property containing the location IDs.                                                                                                       | `-`                     |
 
 ### Example
@@ -84,6 +86,27 @@ function MyMap() {
 
 **Note**: The `height`, `gestureHandling` and `authorization` props are required. All other props are optional. The map context (`cpo` or `msp`) is not a prop; it comes from the map key's remote configuration.
 
+### Pins (v3)
+
+With `version: "v3"` every location is a white teardrop anchored on its tail tip. Colour carries availability only and every state also has its own glyph, so the map still reads in greyscale:
+
+| Pin | `msp` maps (EVSEs) | `cpo` maps (connectors) |
+| :-- | :-- | :-- |
+| Green ring, bolt | every EVSE free | every connector free |
+| Green ring, `free/total` | some free, the rest out of order | some free, the rest unknown |
+| Any ring, `free/total` | whatever else is going on, a free unit is always shown as a count | same |
+| Amber ring, `free/total` | a session is running on at least one EVSE; the digits say how many are still free | at least one connector is taken out of service (`Unavailable`) |
+| Blue ring, `free/total` | not used | a session is running (`Preparing`, `Charging`, `Suspended`, `Finishing`, `Reserved`) |
+| Red ring, `free/total` or `!` | not used | at least one connector reports `Faulted`; the digits stay while anything is free, the `!` shows when nothing is |
+| Grey ring, dash | nothing usable (`Inoperative`, `Out of order`, `Blocked`, `Closed`) or nothing reported | nothing reported |
+| Dashed grey, `+` | every EVSE is `Planned` | not used |
+
+Every single-location pin that shows a glyph (zoom 12 and up) also carries a price tag under its tail tip: white digits on a dark grey tag, e.g. `€0.42`, the current price per kWh including VAT in the map `currency`. When the API has no price for the location, or the price is zero because the tariff charges by time or session rather than energy, the tag reads `…` instead, so a pin never claims to be free. The pin above it is unchanged, so colour still carries availability only and the price is text, never a colour. The tag stays put when the pin grows on selection. Clusters and the dots below zoom 12 carry no tag.
+
+The pin of the location open in the sidebar grows to 52px with a halo; the tail tip stays put. Below zoom 12 single pins shrink to a 26px dot without a glyph. Clusters of up to nine locations are a pin with two ghost pins behind it and the count as glyph; larger clusters are a circle with the count and a caption. A cluster whose locations are not all in the same state gets a ring split by that state, in proportion. On `msp` maps a cluster is green as soon as anything inside it is free; on `cpo` maps the operator priority above applies (fault, unavailable, in session, free).
+
+The status pills and the status filter use the same colours as the pins on a `v3` map. With `showPriceFilter` the filters panel gains the price slider described in the props table. Clustering and the sidebar are unchanged.
+
 ### Theming with Shadow DOM
 
 The theming options (`brandColor`, `backgroundColor`, `textColor`, `borderColor`, `fontFamily`) require the SDK to be rendered within a Shadow DOM context. This provides style encapsulation, preventing the map's styles from conflicting with your application's styles and vice versa.

package/dist/components/Pin/Pin.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { GeohashItem, MapKind } from '../../types';
+export declare const pinStylesheet = "\n.roadmap-pin {\n  position: absolute;\n  left: 0;\n  top: 0;\n  display: block;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font-family: var(--roadmap-font-family, Inter), system-ui, -apple-system, sans-serif;\n  animation: roadmap-pin-in 0.18s ease-out both;\n}\n.roadmap-pin:focus-visible {\n  outline: none;\n}\n.roadmap-pin-body {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: 50% 50% 50% 0;\n  border: 3px solid currentColor;\n  background: #fff;\n  transform: rotate(-45deg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.12s ease, box-shadow 0.12s ease;\n}\n.roadmap-pin:hover .roadmap-pin-body {\n  transform: rotate(-45deg) scale(1.06);\n}\n.roadmap-pin-ghost {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 50% 50% 50% 0;\n  border: 2px solid;\n  transform: rotate(-45deg);\n}\n.roadmap-pin-glyph {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transform: rotate(45deg);\n  line-height: 1;\n  white-space: nowrap;\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-weight: 500;\n}\n.roadmap-pin-circle,\n.roadmap-pin-ring {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: 50%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  transition: transform 0.12s ease;\n}\n.roadmap-pin-circle {\n  background: #fff;\n  border: 3px solid currentColor;\n}\n.roadmap-pin:hover .roadmap-pin-circle,\n.roadmap-pin:hover .roadmap-pin-ring {\n  transform: scale(1.06);\n}\n.roadmap-pin-ring-inner {\n  width: calc(100% - 12px);\n  height: calc(100% - 12px);\n  border-radius: 50%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.roadmap-pin-count {\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-weight: 500;\n  line-height: 1;\n}\n.roadmap-pin-label {\n  margin-top: 2px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  line-height: 1;\n}\n.roadmap-pin-tag {\n  position: absolute;\n  transform: translateX(-50%);\n  box-sizing: border-box;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: #383c43;\n  color: #fdfcf9;\n  font-family: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 13px;\n  white-space: nowrap;\n  pointer-events: none;\n}\n@keyframes roadmap-pin-in {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n";
+export declare function PinStyles(): import("react/jsx-runtime").JSX.Element;
+interface Props {
+    data: GeohashItem;
+    map?: google.maps.Map;
+    kind: MapKind;
+    onClick: (payload: GeohashItem) => void;
+    selected?: boolean;
+    compact?: boolean;
+    price?: string;
+    priceLabel?: string;
+    sitesLabel: string;
+}
+declare const Pin: React.FC<Props>;
+export default Pin;

package/dist/contexts/Map.d.ts

@@ -26,6 +26,7 @@ export type MapContextType = {
     searchBounds?: SearchBounds;
     setSearchBounds?: (bounds: SearchBounds) => void;
     mapKind: MapKind;
+    currency: string;
     fetchLocations?: ({ ids }: {
         ids: any;
     }) => Promise<any>;
@@ -52,6 +53,7 @@ export type MapContextType = {
     isSearching?: boolean;
     setIsSearching?: (isSearching: boolean) => void;
 };
+export declare const defaultCurrency = "EUR";
 export declare const MapContext: React.Context<MapContextType>;
 interface Props {
     children: React.ReactNode;

package/dist/i18n.d.ts

@@ -55,8 +55,12 @@ export type LabelsType = {
     "ocpp.statusSuspendedEv": string;
     "ocpp.statusFinishing": string;
     "ocpp.statusFaulted": string;
-    "analytics.roaming": string;
-    "analytics.ocpp": string;
+    "analytics.evseStatus": string;
+    "analytics.roamingStatus": string;
+    "pin.sites": string;
+    "filters.maxEnergyPrice": string;
+    "filters.anyPrice": string;
+    "pin.pricePerKwh": string;
     "filters.chargingAccessibility": string;
     "filters.accessibilityAll": string;
     "filters.accessibilityTesla": string;