@arenarium/maps 1.0.200 → 1.0.205

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.
package/README.md CHANGED
@@ -41,7 +41,7 @@ const mapManager = new arenarium.MapManager(...);
41
41
 
42
42
  ## Initialization
43
43
 
44
- 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:
44
+ To initialize the map, first add a container element to your HTML where the map will be rendered. Then go to the [API Keys](https://arenarium.dev/keys) page and create a new API key. Then depending on the map library used there are different instructions:
45
45
 
46
46
  ```html
47
47
  <div id="map"></div>
@@ -55,7 +55,7 @@ First, install the `maplibre-gl` library:
55
55
  npm install maplibre-gl
56
56
  ```
57
57
 
58
- Next, use the `MapManager` class which requires a `maplibre.Map` class, a `maplibre.Marker` class and a `MapOptions` object.
58
+ Next, create a `MapLibreProvider` instance which requires a `maplibre.Map` class, a `maplibre.Marker` class and a `maplibre.MapOptions` object. Use the `MapLibreProvider` instance, along with the API key, to initialize the map manager.
59
59
 
60
60
  ```js
61
61
  import maplibregl from 'maplibre-gl';
@@ -72,7 +72,7 @@ const maplibreProvider = new MapLibreProvider(maplibregl.Map, maplibregl.Marker,
72
72
  });
73
73
 
74
74
  // Initialize the map manager with the provider
75
- const mapManager = new MapManager(maplibreProvider);
75
+ const mapManager = new MapManager("YOUR_API_KEY", maplibreProvider);
76
76
 
77
77
  // Access the maplibre instance for direct map interactions
78
78
  const maplibreMap = mapLibreProvider.getMap();
@@ -100,7 +100,7 @@ First, install the `mapbox-gl` library:
100
100
  npm install mapbox-gl
101
101
  ```
102
102
 
103
- Next, use the `MapManager` class which requires a `mapbox.Map` class, a `mapbox.Marker` class and a `MapOptions` object.
103
+ Next, create a `MapboxProvider` instance which requires a `mapbox.Map` class, a `mapbox.Marker` class and a `mapbox.MapOptions` object. Use the `MapboxProvider` instance, along with the API key, to initialize the map manager.
104
104
 
105
105
  ```js
106
106
  import mapbox from 'mapbox-gl';
@@ -117,7 +117,7 @@ const mapboxProvider = new MapboxProvider(mapbox.Map, mapbox.Marker, {
117
117
  });
118
118
 
119
119
  // Initialize the map manager with the provider
120
- const mapManager = new MapManager(mapboxProvider);
120
+ const mapManager = new MapManager("YOUR_API_KEY", mapboxProvider);
121
121
 
122
122
  // Access the mapbox instance for direct map interactions
123
123
  const mapboxMap = mapboxProvider.getMap();
@@ -131,7 +131,7 @@ First, install the `@googlemaps/js-api-loader` library:
131
131
  npm install @googlemaps/js-api-loader
132
132
  ```
133
133
 
134
- To use Google Maps, you'll need to load the Google Maps JavaScript API and create a Google Maps provider instance.
134
+ To use Google Maps, you'll need to load the Google Maps JavaScript API and create a Google Maps provider instance. Next, create a `GoogleMapsProvider` instance which requires a `google.maps.Map` class, a `google.maps.Marker.AdvancedMarkerElement` class, and a `google.maps.MapOptions`. Use the `GoogleMapsProvider` instance, along with the API key, to initialize the map manager.
135
135
 
136
136
  ```js
137
137
  import { Loader } from '@googlemaps/js-api-loader';
@@ -158,7 +158,7 @@ const mapGoogleProvider = new GoogleMapsProvider(mapsLibrary.Map, markerLibrary.
158
158
  });
159
159
 
160
160
  // Initialize the map manager with the provider
161
- const mapManager = new MapManager(mapGoogleProvider);
161
+ const mapManager = new MapManager("YOUR_API_KEY", mapGoogleProvider);
162
162
 
163
163
  // Access the Google Maps instance for direct map interactions
164
164
  const mapGoogle = mapGoogleProvider.getMap();
@@ -279,38 +279,20 @@ You can change the markers style by using the predefined CSS variables:
279
279
  --arenarium-maps-tooltip-shadow-hover: ...;
280
280
  ```
281
281
 
282
- ## Logs
282
+ # API
283
283
 
284
- Some events and errors are logged to via the api. These logs are used for debugging and monitoring purposes in order to improve the library. To enable or disable logging, set the `api.log.enabled` property to `true` or `false` in the map configuration. By default, logging is disabled for development environments.
285
-
286
- ```js
287
- const mapManager = new MapManager(mapProvider, {
288
- api: {
289
- log: {
290
- enabled: false
291
- }
292
- }
293
- });
294
- ```
295
-
296
- ## API
297
-
298
- While the library works out of the box, it is recommended to use the API for calculating the marker states. The calculations can be compute intensive and api could offer a more standerdized performance, and benefits from caching.
299
-
300
- To use the API, create an API key at https://arenarium.dev/keys, use the domains field to whitelist the domains you want to use the API for. Then when initializing the map manager, provide the api key:
284
+ You can provide a your own backend URL to the map manager to use the API for calculating the marker states. For more information about the API, please feel free to reach out.
301
285
 
302
286
  ```js
303
287
  const mapManager = new MapManager(mapProvider, {
304
288
  api: {
305
289
  states: {
306
- key: 'YOUR_API_KEY'
290
+ url: 'YOUR_BACKEND_URL'
307
291
  }
308
292
  }
309
293
  });
310
294
  ```
311
295
 
312
- For more information about the API, please feel free to reach out.
313
-
314
296
  # Examples
315
297
 
316
298
  [https://github.com/arenarium-dev/arenarium-maps-svelte-kit-example](https://github.com/arenarium-dev/arenarium-maps-svelte-kit-example)
package/dist/index.d.ts CHANGED
@@ -37,23 +37,18 @@ declare const mapConfigurationSchema: z.ZodObject<{
37
37
  api: z.ZodOptional<z.ZodObject<{
38
38
  states: z.ZodOptional<z.ZodObject<{
39
39
  url: z.ZodString;
40
- singleRequest: z.ZodOptional<z.ZodBoolean>;
41
40
  }, "strip", z.ZodTypeAny, {
42
41
  url: string;
43
- singleRequest?: boolean | undefined;
44
42
  }, {
45
43
  url: string;
46
- singleRequest?: boolean | undefined;
47
44
  }>>;
48
45
  }, "strip", z.ZodTypeAny, {
49
46
  states?: {
50
47
  url: string;
51
- singleRequest?: boolean | undefined;
52
48
  } | undefined;
53
49
  }, {
54
50
  states?: {
55
51
  url: string;
56
- singleRequest?: boolean | undefined;
57
52
  } | undefined;
58
53
  }>>;
59
54
  }, "strip", z.ZodTypeAny, {
@@ -70,7 +65,6 @@ declare const mapConfigurationSchema: z.ZodObject<{
70
65
  api?: {
71
66
  states?: {
72
67
  url: string;
73
- singleRequest?: boolean | undefined;
74
68
  } | undefined;
75
69
  } | undefined;
76
70
  }, {
@@ -87,7 +81,6 @@ declare const mapConfigurationSchema: z.ZodObject<{
87
81
  api?: {
88
82
  states?: {
89
83
  url: string;
90
- singleRequest?: boolean | undefined;
91
84
  } | undefined;
92
85
  } | undefined;
93
86
  }>;
@@ -515,7 +508,6 @@ export type MapMarker = z.infer<typeof mapMarkerSchema>;
515
508
  export declare class MapManager {
516
509
  private apiKey;
517
510
  private apiStatesUrl;
518
- private apiStatesSingleRequest;
519
511
  private mapProvider;
520
512
  private markerDataArray;
521
513
  private markerDataMap;