npm - @arenarium/maps - Versions diffs - 1.0.174 → 1.0.176 - Mend

@arenarium/maps 1.0.174 → 1.0.176

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -6,39 +6,35 @@ To install the `@aranarium/maps` library using npm, run the following command in
 ```
 npm install @arenarium/maps
 ```
 Import the necessary module and CSS file into your project to begin using the map:
-```
+```js
 import { MapManager } from '@arenarium/maps';
 import '@arenarium/maps/dist/style.css';
 // Initialize and mount the map manager (further configuration details follow)
 const mapManager = new MapManager(...);
 ```
 ## CDN
 To include `@aranarium/maps` directly in your HTML via a Content Delivery Network (CDN), add these script and stylesheet tags to the `<head>` or `<body>` of your HTML document:
-```
+```html
 <script src="https://unpkg.com/maplibre-gl@^5.6.0/dist/maplibre-gl.js"></script>
 <link href="https://unpkg.com/maplibre-gl@^5.6.0/dist/maplibre-gl.css" rel="stylesheet" />
 <script src="https://unpkg.com/@arenarium/maps@^1.0.124/dist/index.js"></script>
 <link href="https://unpkg.com/@arenarium/maps@^1.0.124/dist/style.css" rel="stylesheet" />
 ```
 Once included, you can access the library's functions through the global `arenarium` object to mount the map:
-```
+```js
 // Initialize and mount the map manager (further configuration details follow)
 const mapManager = new arenarium.MapManager(...);
 ```
 # Usage
@@ -47,9 +43,8 @@ const mapManager = new arenarium.MapManager(...);
 To initialize the map, first add a container element to your HTML where the map will be rendered. Then depending on the map library used there are different instructions:
-```
+```html
 <div id="map"></div>
 ```
 ## Maplibre GL
@@ -58,12 +53,11 @@ First, install the `maplibre-gl` library:
 ```
 npm install maplibre-gl
 ```
 Next, use the `MapManager` class which requires a `maplibre.Map` class, a `maplibre.Marker` class and a `MapOptions` object.
-```
+```js
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -82,23 +76,20 @@ const mapManager = new MapManager(maplibreProvider);
 // Access the maplibre instance for direct map interactions
 const maplibreMap = mapLibreProvider.getMap();
 ```
 You can change the map's visual appearance by setting a predefined dark or light theme:
-```
+```js
 import { MaplibreDarkStyle, MaplibreLightStyle } from '@arenarium/maps/maplibre';
 maplibreMap.setStyle(MaplibreDarkStyle); // or MaplibreLightStyle
 ```
 Alternatively, you can apply a custom map style by providing a URL to a JSON file that adheres to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/). You can also override specific color properties within a custom style.
-```
+```js
 mapLibre.setStyle('https://tiles.openfreemap.org/styles/liberty.json');
 ```
 ## Mapbox GL
@@ -107,12 +98,11 @@ First, install the `mapbox-gl` library:
 ```
 npm install mapbox-gl
 ```
 Next, use the `MapManager` class which requires a `mapbox.Map` class, a `mapbox.Marker` class and a `MapOptions` object.
-```
+```js
 import mapbox from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -131,7 +121,6 @@ const mapManager = new MapManager(mapboxProvider);
 // Access the mapbox instance for direct map interactions
 const mapboxMap = mapboxProvider.getMap();
 ```
 ## Google Maps
@@ -140,12 +129,11 @@ First, install the `@googlemaps/js-api-loader` library:
 ```
 npm install @googlemaps/js-api-loader
 ```
 To use Google Maps, you'll need to load the Google Maps JavaScript API and create a Google Maps provider instance.
-```
+```js
 import { Loader } from '@googlemaps/js-api-loader';
 import { MapManager } from '@arenarium/maps';
@@ -174,12 +162,11 @@ const mapManager = new MapManager(mapGoogleProvider);
 // Access the Google Maps instance for direct map interactions
 const mapGoogle = mapGoogleProvider.getMap();
 ```
 You can change the map's visual appearance by using the predefined styles in combination with custom `StyledMapType`:
-```
+```js
 import { GoogleMapsDarkStyle, GoogleMapsLightStyle } from '@arenarium/maps/google';
 const mapTypeLight = new google.maps.StyledMapType(GoogleMapsLightStyle, { name: 'Light Map' });
@@ -189,7 +176,6 @@ mapGoogle.mapTypes.set("light-id", mapTypeLight);
 mapGoogle.mapTypes.set("dark-id", mapTypeDark);
 mapGoogle.setMapTypeId("light-id"); // or "dark-id" for dark theme
 ```
 ## Markers
@@ -202,7 +188,7 @@ To add markers to the map, you first need to define an array of `MapMarker` obje
 Use the `updateMarkers` method on the map manager to display or update update the markers. This method adds new markers and updates existing ones based on their IDs. Markers not present in the provided array will remain on the map. This approach is designed for continuous updates of map markers.
-```
+```js
 import { type MapMarker } from '@arenarium/maps';
 const markers: MapMarker[] = [];
@@ -223,7 +209,7 @@ for (let i = 0; i < count; i++) {
                 // The desired height of the marker's tooltip area
                 height: ...,
                 // The desired width of the marker's tooltip area
-                width: ...
+                width: ...,
                 // The desired margin of the marker's tooltip area
                 margin: ...,
                 // The desired radius of the marker's tooltip area
@@ -238,7 +224,7 @@ for (let i = 0; i < count; i++) {
                 // The desired height of the marker's pin area
                 height: ...,
                 // The desired width of the marker's pin area
-                width: ...
+                width: ...,
                 // The desired radius of the marker's pin area
                 radius: ...,
             },
@@ -251,7 +237,7 @@ for (let i = 0; i < count; i++) {
                 // The desired height of the marker's popup area
                 height: ...,
                 // The desired width of the marker's popup area
-                width: ...
+                width: ...,
                 // The desired margin of the marker's popup area
                 margin: ...,
                 // The desired radius of the marker's popup area
@@ -264,29 +250,26 @@ for (let i = 0; i < count; i++) {
 }
 await mapManager.updateMarkers(markers);
 ```
 To remove all markers from the map, use the `removeMarkers` method:
-```
+```js
 mapManager.removeMarkers();
 ```
 To toggle the popup of a marker, use the `showPopup` and `hidePopup` methods:
-```
+```js
 mapManager.showPopup(id);
 mapManager.hidePopup(id);
 ```
 ## Style
 You can change the markers style by using the predefined CSS variables:
-```
+```scss
 --arenarium-maps-pin-background: ...;
 --arenarium-maps-pin-border: ...;
 --arenarium-maps-pin-shadow: ...;
@@ -294,7 +277,6 @@ You can change the markers style by using the predefined CSS variables:
 --arenarium-maps-tooltip-background: ...;
 --arenarium-maps-tooltip-shadow: ...;
 --arenarium-maps-tooltip-shadow-hover: ...;
 ```
 # Examples

package/dist/index.d.ts CHANGED Viewed

@@ -495,6 +495,40 @@ declare const mapMarkerSchema: z.ZodObject<{
 	} | undefined;
 }>;
 export type MapMarker = z.infer<typeof mapMarkerSchema>;
+declare const mapTooltipStateSchema: z.ZodTuple<[
+	z.ZodNumber,
+	z.ZodArray<z.ZodTuple<[
+		z.ZodNumber,
+		z.ZodNumber
+	], null>, "many">
+], null>;
+declare const mapTooltipStateInputSchema: z.ZodObject<{
+	id: z.ZodString;
+	rank: z.ZodNumber;
+	lat: z.ZodNumber;
+	lng: z.ZodNumber;
+	width: z.ZodNumber;
+	height: z.ZodNumber;
+	margin: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+	lat: number;
+	lng: number;
+	id: string;
+	rank: number;
+	width: number;
+	height: number;
+	margin: number;
+}, {
+	lat: number;
+	lng: number;
+	id: string;
+	rank: number;
+	width: number;
+	height: number;
+	margin: number;
+}>;
+export type MapTooltipState = z.infer<typeof mapTooltipStateSchema>;
+export type MapTooltipStateInput = z.infer<typeof mapTooltipStateInputSchema>;
 export declare class MapManager {
 	private provider;
 	private statesApiUrl;
@@ -632,6 +666,8 @@ export declare const GoogleMapDarkStyle: ({
 		lightness: number;
 	}[];
 })[];
+export declare function getStates(parameters: MapProviderParameters, data: Array<MapTooltipStateInput>): MapTooltipState[];
+export declare function testStates(parameters: MapProviderParameters, inputs: MapTooltipStateInput[], states: MapTooltipState[]): void;
 export as namespace arenarium;