Skip to content

Commit d104637

Browse files
author
Chris Vietor
committed
feat: added addImage + SymbolLayer support
1 parent 7a9bd38 commit d104637

File tree

18 files changed

+1740
-92
lines changed

18 files changed

+1740
-92
lines changed

‎demo/app/App_Resources/Android/src/main/res/drawable-hdpi/bee.png

20.5 KB
Loading

‎demo/app/App_Resources/Android/src/main/res/drawable-ldpi/bee.png

9.29 KB
Loading

‎demo/app/App_Resources/Android/src/main/res/drawable-mdpi/bee.png

13 KB
Loading

‎demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/bee.png

28.5 KB
Loading

‎demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/bee.png

46.5 KB
Loading

‎demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/bee.png

69.6 KB
Loading

‎demo/app/App_Resources/iOS/Assets.xcassets/bee.imageset/Contents.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"images" : [
3+
{
4+
"idiom" : "universal",
5+
"scale" : "1x",
6+
"filename" : "bee@1x.png"
7+
},
8+
{
9+
"idiom" : "universal",
10+
"scale" : "2x",
11+
"filename" : "bee@2x.png"
12+
},
13+
{
14+
"idiom" : "universal",
15+
"scale" : "3x",
16+
"filename" : "bee@3x.png"
17+
}
18+
],
19+
"info" : {
20+
"version" : 1,
21+
"author" : "xcode"
22+
}
23+
}

‎demo/app/App_Resources/iOS/Assets.xcassets/bee.imageset/bee@1x.png

18.6 KB
Loading

‎demo/app/App_Resources/iOS/Assets.xcassets/bee.imageset/bee@2x.png

41.9 KB
Loading

‎demo/app/App_Resources/iOS/Assets.xcassets/bee.imageset/bee@3x.png

69.8 KB
Loading

‎demo/app/assets/pizza-slice.png

2.15 KB
Loading

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

+139-87
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ContentView } from '@nativescript/core/ui/content-view';
44
import { AlertOptions, alert } from '@nativescript/core/ui/dialogs';
55
import { DownloadProgress, LatLng, MapStyle, Mapbox, MapboxMarker, MapboxView, OfflineRegion, Viewport } from '@nativescript-community/ui-mapbox';
66
import { SETTINGS } from '../../mapbox_config';
7+
import { AmsterdamHoneyBees } from './sample-data';
78

89
const isIOS = platform.Device.os === platform.platformNames.ios;
910

@@ -416,104 +417,151 @@ export class HelloWorldModel extends Observable {
416417
);
417418
}
418419

419-
public doAddLayerAndSource(): void {
420+
public async doAddLayerAndSource(): Promise<void> {
420421
try {
421-
422-
this.mapbox
423-
.addLayer({
424-
id: 'circle-with-source-object',
425-
type: 'circle',
426-
source: {
427-
type: 'geojson',
428-
data: {
429-
type: 'Feature',
430-
properties: {},
431-
geometry: {
432-
type: 'Point',
433-
coordinates: [4.823684692382513, 52.3701494345567],
422+
this.mapbox
423+
.addLayer({
424+
id: 'circle-with-source-object',
425+
type: 'circle',
426+
source: {
427+
type: 'geojson',
428+
data: {
429+
type: 'Feature',
430+
properties: {},
431+
geometry: {
432+
type: 'Point',
433+
coordinates: [4.823684692382513, 52.3701494345567],
434+
},
434435
},
435436
},
436-
},
437-
paint: {
438-
'circle-blur': 0.2,
439-
'circle-radius': 10,
440-
'circle-opacity': 0.65,
441-
'circle-color': '#ed6498',
442-
'circle-stroke-width': 4,
443-
'circle-stroke-color': '#3b0619',
444-
'circle-stroke-opacity': 0.75,
445-
},
446-
})
447-
.then(() => console.log('circle-with-source-object added'));
437+
paint: {
438+
'circle-blur': 0.2,
439+
'circle-radius': 10,
440+
'circle-opacity': 0.65,
441+
'circle-color': '#ed6498',
442+
'circle-stroke-width': 4,
443+
'circle-stroke-color': '#3b0619',
444+
'circle-stroke-opacity': 0.75,
445+
},
446+
})
447+
.then(() => console.log('circle-with-source-object added'));
448448

449-
this.mapbox
450-
.addLayer({
451-
id: 'line-with-source-object',
452-
type: 'line',
453-
source: {
454-
type: 'geojson',
455-
data: {
456-
type: 'Feature',
457-
properties: {},
458-
geometry: {
459-
type: 'LineString',
460-
coordinates: [
461-
[4.80926513671875, 52.27403984182285],
462-
[4.9383544921875, 52.30931825948968],
463-
],
449+
this.mapbox
450+
.addLayer({
451+
id: 'line-with-source-object',
452+
type: 'line',
453+
source: {
454+
type: 'geojson',
455+
data: {
456+
type: 'Feature',
457+
properties: {},
458+
geometry: {
459+
type: 'LineString',
460+
coordinates: [
461+
[4.80926513671875, 52.27403984182285],
462+
[4.9383544921875, 52.30931825948968],
463+
],
464+
},
464465
},
465466
},
466-
},
467-
layout: {
468-
'line-cap': 'round',
469-
'line-join': 'round',
470-
'line-blur': 0.2,
471-
},
472-
paint: {
473-
'line-color': '#ab111b',
474-
'line-width': 5,
475-
'line-opacity': 0.7,
476-
'line-dash-array': [1, 1, 1, 1],
477-
},
478-
})
479-
.then(() => console.log('line-with-source-object added'));
480-
481-
this.mapbox.addLayer({
482-
id: 'fill-with-source-object',
483-
type: 'fill',
484-
source: {
485-
type: 'geojson',
486-
data: {
487-
type: 'Feature',
488-
properties: {},
489-
geometry: {
490-
type: 'Polygon',
491-
coordinates: [
492-
[
493-
[4.864797592163086, 52.346980527061895],
494-
[4.923677444458008, 52.346980527061895],
495-
[4.923677444458008, 52.36742431104005],
496-
[4.864797592163086, 52.36742431104005],
497-
[4.864797592163086, 52.346980527061895],
467+
layout: {
468+
'line-cap': 'round',
469+
'line-join': 'round',
470+
'line-blur': 0.2,
471+
},
472+
paint: {
473+
'line-color': '#ab111b',
474+
'line-width': 5,
475+
'line-opacity': 0.7,
476+
'line-dash-array': [1, 1, 1, 1],
477+
},
478+
})
479+
.then(() => console.log('line-with-source-object added'));
480+
481+
this.mapbox
482+
.addLayer({
483+
id: 'fill-with-source-object',
484+
type: 'fill',
485+
source: {
486+
type: 'geojson',
487+
data: {
488+
type: 'Feature',
489+
properties: {},
490+
geometry: {
491+
type: 'Polygon',
492+
coordinates: [
493+
[
494+
[4.864797592163086, 52.346980527061895],
495+
[4.923677444458008, 52.346980527061895],
496+
[4.923677444458008, 52.36742431104005],
497+
[4.864797592163086, 52.36742431104005],
498+
[4.864797592163086, 52.346980527061895],
499+
],
498500
],
499-
],
501+
},
500502
},
501503
},
502-
},
503-
paint: {
504-
'fill-antialias': 'true',
505-
'fill-color': '#5dbcd2',
506-
'fill-opacity': 0.65,
507-
'fill-outline-color': '#23474f',
508-
'fill-translate': [0, 0],
509-
'fill-translate-anchor': 'map',
510-
},
511-
})
512-
.then(() => console.log('fill-with-source-object added'));
504+
paint: {
505+
'fill-antialias': 'true',
506+
'fill-color': '#5dbcd2',
507+
'fill-opacity': 0.65,
508+
'fill-outline-color': '#23474f',
509+
'fill-translate': [0, 0],
510+
'fill-translate-anchor': 'map',
511+
},
512+
})
513+
.then(() => console.log('fill-with-source-object added'));
514+
515+
await this.mapbox.addImage('bee', 'res://bee');
516+
await this.mapbox.addImage('pizza', '~/assets/pizza-slice.png');
517+
518+
this.mapbox
519+
.addLayer({
520+
id: 'symbol-with-source-object',
521+
type: 'symbol',
522+
source: {
523+
type: 'geojson',
524+
data: AmsterdamHoneyBees,
525+
},
526+
layout: {
527+
'text-field': 'Honey',
528+
'icon-size': 0.2,
529+
'icon-image': 'bee',
530+
},
531+
paint: {
532+
'text-color': '#d6c80d',
533+
},
534+
})
535+
.then(() => console.log('symbol-with-source-object added'));
513536

537+
this.mapbox
538+
.addLayer({
539+
id: 'symbol-with-source-object2',
540+
type: 'symbol',
541+
source: {
542+
type: 'geojson',
543+
data: {
544+
type: 'Feature',
545+
properties: {},
546+
geometry: {
547+
type: 'Point',
548+
coordinates: [4.8916793, 52.3690958]
549+
},
550+
},
551+
},
552+
layout: {
553+
'text-field': 'New York Pizza',
554+
'icon-size': 0.99,
555+
'icon-image': 'pizza',
556+
'icon-rotate': 180
557+
},
558+
paint: {
559+
'text-color': '#d6c80d'
560+
}
561+
})
562+
.then(() => console.log('symbol-with-source-object2 added'));
514563
} catch (error) {
515564
console.error('Mapbox doAddLayerAndSource error :', error);
516-
517565
}
518566
}
519567

@@ -522,14 +570,18 @@ export class HelloWorldModel extends Observable {
522570
this.mapbox.removeLayer('circle-with-source-object'),
523571
this.mapbox.removeLayer('line-with-source-object'),
524572
this.mapbox.removeLayer('fill-with-source-object'),
573+
this.mapbox.removeLayer('symbol-with-source-object'),
574+
this.mapbox.removeLayer('symbol-with-source-object2'),
525575
]).then(() => {
526576
return Promise.all([
527577
this.mapbox.removeSource('custom-collection-1'),
528578
this.mapbox.removeSource('line-with-source-object_source'),
529579
this.mapbox.removeSource('circle-with-source-object_source'),
530580
this.mapbox.removeSource('fill-with-source-object_source'),
581+
this.mapbox.removeSource('symbol-with-source-object_source'),
582+
this.mapbox.removeSource('symbol-with-source-object2_source'),
531583
]);
532-
})
584+
});
533585
}
534586

535587
public doListOfflineRegions(): void {

0 commit comments

Comments
 (0)