@maptiler/sdk 1.0.4 → 1.0.5
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/CHANGELOG.md +3 -0
- package/demos/maptiler-sdk.umd.js +1 -1
- package/demos/simple.html +1 -0
- package/dist/maptiler-sdk.min.mjs +1 -1
- package/dist/maptiler-sdk.mjs +1 -1
- package/dist/maptiler-sdk.mjs.map +1 -1
- package/dist/maptiler-sdk.umd.js +1 -1
- package/dist/maptiler-sdk.umd.js.map +1 -1
- package/dist/maptiler-sdk.umd.min.js +1 -1
- package/package.json +1 -1
- package/readme.md +22 -22
- package/src/defaults.ts +1 -1
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -215,19 +215,19 @@ It is sometimes handy to center map on the visitor's location, and there are mul
|
|
|
215
215
|
|
|
216
216
|
Here is how the map gets centered on the visitor's location:
|
|
217
217
|
```js
|
|
218
|
-
new
|
|
218
|
+
new maptilersdk.Map({
|
|
219
219
|
// ... other options
|
|
220
220
|
|
|
221
|
-
geolocate:
|
|
221
|
+
geolocate: maptilersdk.GeolocationType.POINT
|
|
222
222
|
})
|
|
223
223
|
```
|
|
224
224
|
|
|
225
225
|
Here is how the map fits the visitor's country bounds:
|
|
226
226
|
```js
|
|
227
|
-
new
|
|
227
|
+
new maptilersdk.Map({
|
|
228
228
|
// ... other options
|
|
229
229
|
|
|
230
|
-
geolocate:
|
|
230
|
+
geolocate: maptilersdk.GeolocationType.COUNTRY
|
|
231
231
|
})
|
|
232
232
|
```
|
|
233
233
|
|
|
@@ -358,7 +358,7 @@ Our map SDK is not only about maps! We also provide plenty of wrapper to our API
|
|
|
358
358
|
You want to know the longitude and latitude of a specific place, use the forward geocoding:
|
|
359
359
|
```ts
|
|
360
360
|
// in an async function, or as a 'thenable':
|
|
361
|
-
const result = await
|
|
361
|
+
const result = await maptilersdk.geocoding.forward('paris');
|
|
362
362
|
```
|
|
363
363
|
You can provide some options such as:
|
|
364
364
|
- the proximity, given a lon-lat position, to sort the results
|
|
@@ -371,7 +371,7 @@ Read more about forward geocoding on our [official documentation](https://docs.m
|
|
|
371
371
|
You wan to tknow the name of a place, given a longitude-latitude? Use the reverse geocoding:
|
|
372
372
|
```ts
|
|
373
373
|
// in an async function, or as a 'thenable':
|
|
374
|
-
const result = await
|
|
374
|
+
const result = await maptilersdk.geocoding.reverse([6.249638, 46.402056]);
|
|
375
375
|
```
|
|
376
376
|
The same option object as the forward geocoding can be provided.
|
|
377
377
|
|
|
@@ -381,7 +381,7 @@ Read more about reverse geocoding on our [official documentation](https://docs.m
|
|
|
381
381
|
For both *forward* and *reverse* geocoding, this library provides a list of supported languages as shorthands to [ISO language codes](https://en.wikipedia.org/wiki/ISO_639-1). The result will be provided in multiple languages if the `language` options is an array:
|
|
382
382
|
|
|
383
383
|
```ts
|
|
384
|
-
const result = await
|
|
384
|
+
const result = await maptilersdk.geocoding.forward('paris', {language: [maptilersdk.geocoding.languages.SPANISH, maptilersdk.geocoding.languages.KOREAN]})
|
|
385
385
|
```
|
|
386
386
|
|
|
387
387
|
The special language `AUTO` will detect the platform/browser preferred language.
|
|
@@ -394,7 +394,7 @@ The geolocation uses the IP address of a visitors to provide informations about
|
|
|
394
394
|
There is only a single function:
|
|
395
395
|
```ts
|
|
396
396
|
// in an async function, or as a 'thenable':
|
|
397
|
-
const result = await
|
|
397
|
+
const result = await maptilersdk.geolocation.info();
|
|
398
398
|
```
|
|
399
399
|
|
|
400
400
|
Read more about geolocation on our [official documentation](https://docs.maptiler.com/client-js/geolocation/).
|
|
@@ -406,10 +406,10 @@ If you are already familiar with [epsg.io](https://epsg.io/) (created by MapTile
|
|
|
406
406
|
The `search` lets you perform a query in a free form fashion. Here are some examples:
|
|
407
407
|
```ts
|
|
408
408
|
// in an async function, or as a 'thenable':
|
|
409
|
-
const resultA = await
|
|
410
|
-
const resultB = await
|
|
411
|
-
const resultC = await
|
|
412
|
-
const resultD = await
|
|
409
|
+
const resultA = await maptilersdk.coordinates.search('mercator');
|
|
410
|
+
const resultB = await maptilersdk.coordinates.search('plate carree');
|
|
411
|
+
const resultC = await maptilersdk.coordinates.search('france');
|
|
412
|
+
const resultD = await maptilersdk.coordinates.search('code:4326', {transformations: true}));
|
|
413
413
|
```
|
|
414
414
|
|
|
415
415
|
The `transformations` options retrieves a lot more details about the CRS that MapTiler API is able to transform to/from than just their IDs.
|
|
@@ -425,10 +425,10 @@ If not provided, both the source (`sourceCrs`) and the destination (`targetCrs`)
|
|
|
425
425
|
// in an async function, or as a 'thenable':
|
|
426
426
|
|
|
427
427
|
// Providing one coordinate to transform, with a target CRS being EPSG:9793 (RGF93 v2 / Lambert-93, France official CRS)
|
|
428
|
-
const resultA = await
|
|
428
|
+
const resultA = await maptilersdk.coordinates.transform([1, 45], {targetCrs: 9793})
|
|
429
429
|
|
|
430
430
|
// Using the same logic, we can pass up to 50 coordinates to be transformed
|
|
431
|
-
const resultB = await
|
|
431
|
+
const resultB = await maptilersdk.coordinates.transform([[10, 48], [1, 45]], {targetCrs: 9793})
|
|
432
432
|
```
|
|
433
433
|
|
|
434
434
|
Read more about transforming coordinates on our [official documentation](https://docs.maptiler.com/client-js/coordinates/#transform).
|
|
@@ -438,7 +438,7 @@ MapTiler Cloud give its users the possibility to [upload and create data](https:
|
|
|
438
438
|
|
|
439
439
|
```ts
|
|
440
440
|
// in an async function, or as a 'thenable':
|
|
441
|
-
const result = await
|
|
441
|
+
const result = await maptilersdk.data.get('my-dataset-unique-id')
|
|
442
442
|
```
|
|
443
443
|
|
|
444
444
|
Since the result is a GeoJSON, it can easily be added to a `map` with `.addSource()` and `.addLayer()`.
|
|
@@ -499,7 +499,7 @@ This type of map is centered on a longitude-latitude coordinate and the zoom lev
|
|
|
499
499
|
Note that if a path or markers are provided, the framing of the map will not automatically adapt to include those (use the `automatic` mode for that).
|
|
500
500
|
|
|
501
501
|
```ts
|
|
502
|
-
const imageLink =
|
|
502
|
+
const imageLink = maptilersdk.staticMaps.centered(
|
|
503
503
|
// center position (Boston)
|
|
504
504
|
[-71.06080, 42.362114],
|
|
505
505
|
|
|
@@ -516,7 +516,7 @@ const imageLink = maptilerClient.staticMaps.centered(
|
|
|
516
516
|
height: 1000,
|
|
517
517
|
|
|
518
518
|
// Map style
|
|
519
|
-
style:
|
|
519
|
+
style: maptilersdk.MapStyle.OUTDOOR,
|
|
520
520
|
});
|
|
521
521
|
```
|
|
522
522
|
|
|
@@ -527,7 +527,7 @@ Read more about centered static maps on our official [API documentation](https:/
|
|
|
527
527
|
This type of map requires a bounding box made of two points: the south-west bound and the north-east bound. The zoom level cannot be provided and is automatically deduced from the size of the bounding box.
|
|
528
528
|
|
|
529
529
|
```ts
|
|
530
|
-
const imageLink =
|
|
530
|
+
const imageLink = maptilersdk.staticMaps.bounded(
|
|
531
531
|
// The bounding box on Europe
|
|
532
532
|
[
|
|
533
533
|
-24, // west bound (min x)
|
|
@@ -541,7 +541,7 @@ const imageLink = maptilerClient.staticMaps.bounded(
|
|
|
541
541
|
hiDPI: true,
|
|
542
542
|
width: 2048,
|
|
543
543
|
height: 2048,
|
|
544
|
-
style:
|
|
544
|
+
style: maptilersdk.MapStyle.STREETS.DARK,
|
|
545
545
|
|
|
546
546
|
// Extra space that will add around the bounding box, in percentage
|
|
547
547
|
// (0.1 = 10% is actually the dafault)
|
|
@@ -572,13 +572,13 @@ In the following example, we are going to load a cycling track recorded by one o
|
|
|
572
572
|
|
|
573
573
|
```ts
|
|
574
574
|
// Fetching the GeoJSON
|
|
575
|
-
const bikeTrack = await
|
|
575
|
+
const bikeTrack = await maptilersdk.data.get('the-id-of-a-bike-track-in-montreal');
|
|
576
576
|
|
|
577
577
|
// Extracting the track points with the shape [[lng, lat], [lng, lat], ...]
|
|
578
578
|
const trackPoints = bikeTrack.features[0].geometry.coordinates[0]
|
|
579
579
|
.map(p => p.slice(0, 2));
|
|
580
580
|
|
|
581
|
-
const imageLink =
|
|
581
|
+
const imageLink = maptilersdk.staticMaps.automatic({
|
|
582
582
|
// hiDPI/Retina precision
|
|
583
583
|
hiDPI: true,
|
|
584
584
|
|
|
@@ -587,7 +587,7 @@ const imageLink = maptilerClient.staticMaps.automatic({
|
|
|
587
587
|
height: 1024 ,
|
|
588
588
|
|
|
589
589
|
// A grey style on which the track will pop!
|
|
590
|
-
style:
|
|
590
|
+
style: maptilersdk.MapStyle.STREETS.LIGHT,
|
|
591
591
|
|
|
592
592
|
// Draw a path with the trackpoints
|
|
593
593
|
path: trackPoints,
|
package/src/defaults.ts
CHANGED
|
@@ -11,7 +11,7 @@ const defaults = {
|
|
|
11
11
|
"https://cdn.maptiler.com/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.min.js",
|
|
12
12
|
primaryLanguage: Language.AUTO,
|
|
13
13
|
secondaryLanguage: Language.LOCAL,
|
|
14
|
-
terrainSourceURL: "https://api.maptiler.com/tiles/terrain-rgb/tiles.json",
|
|
14
|
+
terrainSourceURL: "https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json",
|
|
15
15
|
terrainSourceId: "maptiler-terrain",
|
|
16
16
|
};
|
|
17
17
|
|