Skip to content

Commit 5865dae

Browse files
cvietorcvietor
committed
fix: addLinePoint and deprecated for next version
1 parent e9abd29 commit 5865dae

File tree

4 files changed

+116
-136
lines changed

4 files changed

+116
-136
lines changed

‎demo/app/main-view-model.ts‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Button, Color, Observable, Page } from '@nativescript/core';
1+
import { Button, Color, Observable, Page, ContentView } from '@nativescript/core';
2+
import { setInterval, clearInterval } from '@nativescript/core/timer';
23
import * as platform from '@nativescript/core/platform';
3-
import { ContentView } from '@nativescript/core/ui/content-view';
4+
45
import { AlertOptions, alert } from '@nativescript/core/ui/dialogs';
56
import { DownloadProgress, LatLng, MapStyle, Mapbox, MapboxMarker, MapboxView, OfflineRegion, Viewport } from '@nativescript-community/ui-mapbox';
67
import { SETTINGS } from '../../mapbox_config';
@@ -474,7 +475,7 @@ export class HelloWorldModel extends Observable {
474475
.queryRenderedFeatures({
475476
point: {
476477
lat: 52.3701494345567,
477-
lng: 4.823684692382513
478+
lng: 4.823684692382513,
478479
},
479480
layers: ['circle-with-source-object'],
480481
filter: ['all', ['==', '$id', '2']],
@@ -483,6 +484,38 @@ export class HelloWorldModel extends Observable {
483484
}, 3000);
484485
});
485486

487+
const longLineCoordinates = [
488+
[4.825401306152344, 52.29105258647392],
489+
[4.833984374999999, 52.293992398835414],
490+
[4.843597412109375, 52.29147257161407],
491+
[4.8566436767578125, 52.29105258647392],
492+
[4.862480163574219, 52.29084259241063],
493+
[4.866600036621093, 52.29630211452998],
494+
[4.871406555175781, 52.30302060261101],
495+
[4.872779846191406, 52.31057768336975],
496+
[4.870719909667969, 52.31645452105213],
497+
[4.8690032958984375, 52.32065178453125],
498+
[4.868316650390625, 52.327996037736995],
499+
[4.867973327636719, 52.3342901416433],
500+
[4.867973327636719, 52.342051636387865],
501+
[4.865913391113281, 52.34645620310868],
502+
[4.856300354003906, 52.3447783246691],
503+
[4.857673645019531, 52.348972901370985],
504+
[4.854240417480469, 52.35757053943562],
505+
[4.845657348632812, 52.35840924385213],
506+
[4.829521179199219, 52.35819956924031],
507+
[4.8113250732421875, 52.35715118125809],
508+
[4.810638427734375, 52.354005868078445],
509+
[4.791755676269531, 52.350440909192635],
510+
[4.785919189453125, 52.348763181988105],
511+
[4.77081298828125, 52.35442525610276],
512+
[4.775276184082031, 52.35694150067703],
513+
[4.7783660888671875, 52.357360860844295],
514+
[4.7824859619140625, 52.36176390234046],
515+
[4.814414978027344, 52.36910132990146],
516+
[4.8175048828125, 52.373083994540266],
517+
[4.820594787597656, 52.380629111184575],
518+
];
486519
this.mapbox
487520
.addLayer({
488521
id: 'line-with-source-object',
@@ -495,8 +528,8 @@ export class HelloWorldModel extends Observable {
495528
geometry: {
496529
type: 'LineString',
497530
coordinates: [
498-
[4.80926513671875, 52.27403984182285],
499-
[4.9383544921875, 52.30931825948968],
531+
[4.8209381103515625, 52.28769256200232],
532+
[4.8085784912109375, 52.27572040360819]
500533
],
501534
},
502535
},
@@ -518,6 +551,21 @@ export class HelloWorldModel extends Observable {
518551
this.mapbox.onMapEvent('click', 'line-with-source-object', (features) => {
519552
console.log('clicked', 'line-with-source-object', features);
520553
});
554+
555+
let i = 0;
556+
const intervalId = setInterval(async () => {
557+
if (i < longLineCoordinates.length) {
558+
const element = longLineCoordinates[i];
559+
try {
560+
await this.mapbox.addLinePoint('line-with-source-object', element);
561+
} catch (error) {
562+
console.log('error :', error);
563+
}
564+
i++;
565+
} else {
566+
clearInterval(intervalId);
567+
}
568+
}, 1000);
521569
});
522570

523571
this.mapbox
@@ -597,19 +645,19 @@ export class HelloWorldModel extends Observable {
597645
properties: {},
598646
geometry: {
599647
type: 'Point',
600-
coordinates: [4.8916793, 52.3690958]
648+
coordinates: [4.8916793, 52.3690958],
601649
},
602650
},
603651
},
604652
layout: {
605653
'text-field': 'New York Pizza',
606654
'icon-size': 0.99,
607655
'icon-image': 'pizza',
608-
'icon-rotate': 180
656+
'icon-rotate': 180,
609657
},
610658
paint: {
611-
'text-color': '#d6c80d'
612-
}
659+
'text-color': '#d6c80d',
660+
},
613661
})
614662
.then(() => console.log('symbol-with-source-object2 added'));
615663
} catch (error) {
@@ -1014,8 +1062,8 @@ export class HelloWorldModel extends Observable {
10141062
source: {
10151063
type: 'raster',
10161064
tiles: ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
1017-
tileSize: 256
1018-
}
1065+
tileSize: 256,
1066+
},
10191067
})
10201068
.then(() => {
10211069
console.log('raster layer added');

‎src/mapbox.android.ts‎

Lines changed: 23 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2402,6 +2402,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
24022402
}
24032403

24042404
/**
2405+
* @deprecated
24052406
* Add a point to a line
24062407
*
24072408
* This method appends a point to a line and is useful for drawing a users track.
@@ -2412,72 +2413,32 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
24122413
* @link https://github.com/mapbox/mapbox-gl-native/issues/13983
24132414
* @link https://docs.mapbox.com/android/api/mapbox-java/libjava-geojson/3.0.1/com/mapbox/geojson/Feature.html#Feature--
24142415
* @link https://docs.oracle.com/javase/8/docs/api/java/util/List.html
2415-
*
2416-
* @todo this does not update the invisible clickable overlay.
24172416
*/
2418-
public addLinePoint(id: string, lnglat, nativeMapView?): Promise<void> {
2419-
return new Promise((resolve, reject) => {
2420-
try {
2421-
// This only works for GeoJSON features.
2422-
//
2423-
// The original thought was to query the source to get the points that make up the line
2424-
// and then add a point to it. Unfortunately, it seems that the points in the source
2425-
// are modified and do not match the original set of points that make up the map. I kept
2426-
// adding a LineString and after querying it it would be returned as a MultiLineString
2427-
// with more points.
2428-
//
2429-
// As a result of this, we keep the original feature in the lines list and use that
2430-
// as the data source for the line. As each point is added, we append it to the
2431-
// feature and reset the json source for the displayed line.
2432-
2433-
const lineEntry = this.lines.find((entry) => entry.id === id);
2434-
2435-
if (!lineEntry) {
2436-
reject("No such line layer '" + id + "'");
2437-
return;
2438-
}
2439-
2440-
const geometry = lineEntry.feature.geometry();
2441-
2442-
// const coordinates = geometry.coordinates();
2443-
2444-
if (Trace.isEnabled()) {
2445-
CLog(CLogTypes.info, 'Mapbox:addLinePoint(): adding point:', lnglat);
2446-
}
2447-
2448-
// see https://docs.oracle.com/javase/8/docs/api/java/util/List.html
2449-
2450-
const newPoint = com.mapbox.geojson.Point.fromLngLat(lnglat[0], lnglat[1]);
2451-
2452-
if (Trace.isEnabled()) {
2453-
CLog(CLogTypes.info, 'Mapbox:addLinePoint(): newPoint is:', newPoint);
2454-
}
2455-
2456-
geometry.coordinates().add(newPoint);
2457-
2458-
// sadly it appears we have to recreate the feature. The old feature should get
2459-
// culled by garbage collection.
2460-
2461-
lineEntry.feature = com.mapbox.geojson.Feature.fromGeometry(geometry);
2462-
2463-
// now reset the source
2464-
2465-
const lineSource = this._mapboxMapInstance.getStyle().getSource(id + '_source') as com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
2417+
public async addLinePoint(id: string, lnglat, sourceId?: string, nativeMapView?): Promise<void> {
2418+
try {
2419+
const sId = !!sourceId ? sourceId : id + '_source';
2420+
const lineSource = this._mapboxMapInstance.getStyle().getSource(sId) as com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
2421+
2422+
if (!lineSource) {
2423+
throw new Error(`no source found with id: ${sId}`);
2424+
}
24662425

2467-
lineSource.setGeoJson(lineEntry.feature);
2426+
const lineFeatures = lineSource.querySourceFeatures(FilterParser.parseJson(['==', '$type', 'LineString']));
2427+
2428+
if (lineFeatures.size() === 0) {
2429+
throw new Error("no line string feature found");
2430+
}
2431+
2432+
const feature = lineFeatures.get(0);
24682433

2469-
if (Trace.isEnabled()) {
2470-
CLog(CLogTypes.info, 'Mapbox:addLinePoint(): after updating lineSource feature');
2471-
}
2434+
const newPoints = new java.util.ArrayList<com.mapbox.geojson.Point>(feature.geometry().coordinates());
2435+
newPoints.add(com.mapbox.geojson.Point.fromLngLat(lnglat[0], lnglat[1]));
24722436

2473-
resolve();
2474-
} catch (ex) {
2475-
if (Trace.isEnabled()) {
2476-
CLog(CLogTypes.info, 'Mapbox:addLinePoint() Error : ' + ex);
2477-
}
2478-
reject(ex);
2479-
}
2480-
});
2437+
const newFeature = com.mapbox.geojson.LineString.fromLngLats(newPoints);
2438+
lineSource.setGeoJson(newFeature);
2439+
} catch (error) {
2440+
return error;
2441+
}
24812442
}
24822443

24832444
addGeoJsonClustered(options: AddGeoJsonClusteredOptions, nativeMap?): Promise<void> {

‎src/mapbox.common.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -611,7 +611,7 @@ export interface MapboxApi {
611611

612612
removeLayer(id: string, nativeMap?: any): Promise<any>;
613613

614-
addLinePoint(id: string, point, nativeMapView?: any): Promise<any>;
614+
addLinePoint(id: string, point, sourceId?, nativeMapView?: any): Promise<any>;
615615

616616
queryRenderedFeatures(options: QueryRenderedFeaturesOptions, nativeMap?: any): Promise<Feature[]>;
617617

@@ -790,7 +790,7 @@ export interface MapboxViewApi {
790790

791791
removeLayer(id: string): Promise<any>;
792792

793-
addLinePoint(id: string, point): Promise<any>;
793+
addLinePoint(id: string, point, sourceId?): Promise<any>;
794794

795795
addPolygon(options: AddPolygonOptions): Promise<any>;
796796

@@ -943,8 +943,8 @@ export abstract class MapboxViewCommonBase extends ContentView implements Mapbox
943943
removeLayer(id: string): Promise<any> {
944944
return this.mapbox.removeLayer(id, this.getNativeMapView());
945945
}
946-
addLinePoint(id: string, point): Promise<any> {
947-
return this.mapbox.addLinePoint(id, point, this.getNativeMapView());
946+
addLinePoint(id: string, point, sourceId?): Promise<any> {
947+
return this.mapbox.addLinePoint(id, point, sourceId, this.getNativeMapView());
948948
}
949949
queryRenderedFeatures(options: QueryRenderedFeaturesOptions): Promise<Feature[]> {
950950
return this.mapbox.queryRenderedFeatures(options, this.getNativeMapView());

‎src/mapbox.ios.ts‎

Lines changed: 30 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2294,6 +2294,7 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
22942294
}
22952295

22962296
/**
2297+
* @deprecated
22972298
* Add a point to a line
22982299
*
22992300
* This method appends a point to a line and is useful for drawing a users track.
@@ -2306,68 +2307,38 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
23062307
*
23072308
* @link https://github.com/mapbox/mapbox-gl-native/issues/13983
23082309
* @link https://docs.mapbox.com/ios/maps/examples/runtime-animate-line/
2309-
*
2310-
* @todo this does not update the invisible clickable overlay.
23112310
*/
2311+
public async addLinePoint(id: string, lnglat, sourceId?: string, nativeMapView?): Promise<void> {
2312+
const theMap: MGLMapView = nativeMapView || this._mapboxViewInstance;
2313+
2314+
const sId = !!sourceId ? sourceId : id + '_source';
2315+
const lineSource = theMap.style.sourceWithIdentifier(sId) as MGLShapeSource;
2316+
2317+
if (!lineSource) {
2318+
throw new Error(`no source found with id: ${sId}`);
2319+
}
23122320

2313-
public addLinePoint(id: string, lnglat, nativeMapView?): Promise<void> {
2314-
return new Promise((resolve, reject) => {
2315-
try {
2316-
// The original thought was to query the source to get the points that make up the line
2317-
// and then add a point to it. Unfortunately, it seems that the points in the source
2318-
// are modified and do not match the original set of points that make up the map. I kept
2319-
// adding a LineString and after querying it it would be returned as a MultiLineString
2320-
// with more points.
2321-
//
2322-
// As a result of this, we keep the original feature in the lines list and use that
2323-
// as the data source for the line. As each point is added, we append it to the
2324-
// feature and reset the json source for the displayed line.
2325-
2326-
const lineEntry = this.lines.find((entry) => entry.id === id);
2327-
2328-
if (!lineEntry) {
2329-
reject("No such line layer '" + id + "'");
2330-
return;
2331-
}
2332-
2333-
// we carry a pointer to the raw buffer of CLLocationCoordinate2D structures.
2334-
// since we are managing the buffer ourselves we need to allocate space for
2335-
// the new location entry.
2336-
//
2337-
// I originally tried realloc here but as soon as I try to add an entry an exception is thrown
2338-
// indicating it's a read only property; hence the alloc, copy, and free here.
2339-
2340-
const bytes = lineEntry.numCoords * 2 * interop.sizeof(interop.types.double);
2341-
2342-
const buffer = malloc(bytes + 2 * interop.sizeof(interop.types.double));
2343-
const newCoordsArray = new interop.Reference(CLLocationCoordinate2D, buffer);
2344-
2345-
for (let i = 0; i < lineEntry.numCoords; i++) {
2346-
newCoordsArray[i] = lineEntry.clCoordsArray[i];
2347-
}
2348-
2349-
lineEntry.numCoords++;
2350-
2351-
newCoordsArray[lineEntry.numCoords - 1] = CLLocationCoordinate2DMake(lnglat[1], lnglat[0]);
2352-
2353-
free(lineEntry.clCoordsArray);
2354-
2355-
const polyline = MGLPolylineFeature.polylineWithCoordinatesCount(new interop.Reference(CLLocationCoordinate2D, newCoordsArray), lineEntry.numCoords);
2356-
2357-
lineEntry.clCoordsArray = newCoordsArray;
2358-
2359-
// now update the source
2360-
2361-
lineEntry.source.shape = polyline;
2362-
2363-
resolve();
2364-
} catch (ex) {
2365-
if (Trace.isEnabled()) {
2366-
CLog(CLogTypes.info, 'Mapbox:addLinePoint() Error : ' + ex);
2367-
}
2368-
reject(ex);
2321+
try {
2322+
const lineFeatures = lineSource.featuresMatchingPredicate(
2323+
FilterParser.parseJson(['==', '$type', 'LineString'])
2324+
);
2325+
2326+
if (lineFeatures.count === 0) {
2327+
throw new Error("no line string feature found");
23692328
}
2370-
});
2329+
2330+
const lineFeature = lineFeatures.objectAtIndex(0) as MGLPolylineFeature;
2331+
2332+
const newCoord = CLLocationCoordinate2DMake(lnglat[1], lnglat[0]);
2333+
const newCoordPointer = new interop.Reference(newCoord);
2334+
2335+
lineFeature.appendCoordinatesCount(newCoordPointer, 1);
2336+
lineSource.shape = lineFeature;
2337+
} catch (error) {
2338+
console.log(error);
2339+
throw error;
2340+
}
2341+
23712342
}
23722343

23732344
addGeoJsonClustered(options: AddGeoJsonClusteredOptions, nativeMapViewInstance?): Promise<void> {

0 commit comments

Comments
 (0)