how use MarkersPlugin in photo-sphere-viewer4.0.1

[w8w8w8]

my project is angular9.0 some code like this :

import * as THREE from 'three'; import { Viewer, PhotoSphereViewer, MarkersPlugin } from 'photo-sphere-viewer';

public ngOnInit(): void { const viewer = new Viewer({ container: document.querySelector('#viewer'), panorama: 'assets/images/1.jpg',

    plugins: [
      /************ MarkersPlugin************/
      [MarkersPlugin, {
        markers: [ 
          {
            id: 'newmarker2',
            longitude: '45deg',
            latitude: '0deg',
            image: 'assets/images/pin-blue.png',
          },
        ],
      }],

    ],
});

/****  */
const markersPlugin = viewer.getPlugin(MarkersPlugin);

console.log(markersPlugin);

}

the "markersPlugin " is undefined .

[mistic100]

Import MarkersPlugin from photo-sphere-viewer/dist/plugins/markers;

This is indicated on top of the plugin page. Note : it is a defaults export, no mustaches

Sent from MailDroid

-----Original Message----- From: w8w8w8 notifications@github.com To: mistic100/Photo-Sphere-Viewer Photo-Sphere-Viewer@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Sent: mar., 28 avr. 2020 8:24 Subject: [mistic100/Photo-Sphere-Viewer] how use MarkersPlugin in photo-sphere-viewer4.0.1 (#368)

my project is angular9.0 some code like this :

import * as THREE from 'three'; import { Viewer, PhotoSphereViewer, MarkersPlugin } from 'photo-sphere-viewer';

public ngOnInit(): void { const viewer = new Viewer({ container: document.querySelector('#viewer'), panorama: 'assets/images/1.jpg',

    plugins: [
      /************ MarkersPlugin************/
      [MarkersPlugin, {
        markers: [ 
          {
            id: 'newmarker2',
            longitude: '45deg',
            latitude: '0deg',
            image: 'assets/images/pin-blue.png',
          },
        ],
      }],

    ],
});

/****  */
const markersPlugin = viewer.getPlugin(MarkersPlugin);

console.log(markersPlugin);

}

the "markersPlugin " is undefined .

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/mistic100/Photo-Sphere-Viewer/issues/368

[w8w8w8]

@mistic100 thanks for your replay.

I am a junior coder , and I write this code:

import { Viewer, PhotoSphereViewer } from 'photo-sphere-viewer';
import {MarkersPlugin} from 'photo-sphere-viewer/dist/plugins/markers';

public ngOnInit(): void {
const viewer = new Viewer({
container: document.querySelector('#viewer'),
panorama: 'assets/images/1.jpg',

    plugins: [
      /************ MarkersPlugin************/
      [MarkersPlugin, {
        markers: [ 
          {
            id: 'newmarker2',
            longitude: '45deg',
            latitude: '0deg',
            image: 'assets/images/pin-blue.png',
          },
        ],
      }],

    ],
});

/****  */
const markersPlugin = viewer.getPlugin(MarkersPlugin);

console.log(markersPlugin);
}

but it does not work . how to write the code ? thanks again

[mistic100]

As a junior developper do not say "it does no work", explain what is not working.

---

As I said it is a default export so you must not use mustaches in the import

import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers';

I don't kwow what tools your are using but I am certain Webpack and Rollup complain about the the file not having an export named "MarkersPlugin".

[w8w8w8]

@mistic100 hi, my english so poor, i can not understand 'you must not use mustaches in the import'. could you write an example for me ?

my code like this:

import { Viewer, MarkersPlugin } from 'photo-sphere-viewer'; init() { const viewer2 = new Viewer({ container: document.querySelector('#viewer'), panorama: 'assets/images/Bryce-Canyon-National-Park-Mark-Doliner.jpg', defaultZoomLvl:50, plugins: [ [MarkersPlugin, { markers: [ { id: 'new-marker', longitude: '45deg', latitude: '0deg', image: 'assets/images/pin-red.png', }, ], }], ], }); }

but the MarkersPlugin not work

I use the vs code tool, and if I copy code from your websit https://photo-sphere-viewer.js.org/plugins/plugin-markers.html#usage , the new PhotoSphereViewer.Viewer error.

thank you again!

[mistic100]

I wrote an example in my previous message !

Sent from MailDroid

-----Original Message----- From: w8w8w8 notifications@github.com To: mistic100/Photo-Sphere-Viewer Photo-Sphere-Viewer@noreply.github.com Cc: Damien Sorel contact@git.strangeplanet.fr, Mention mention@noreply.github.com Sent: jeu., 30 avr. 2020 5:20 Subject: Re: [mistic100/Photo-Sphere-Viewer] how use MarkersPlugin in photo-sphere-viewer4.0.1 (#368)

@mistic100 hi, my english so poor, i can not understand 'you must not use mustaches in the import'. could you write an example for me ?

my code like this:

import { Viewer, MarkersPlugin } from 'photo-sphere-viewer'; init() { const viewer2 = new Viewer({ container: document.querySelector('#viewer'), panorama: 'assets/images/Bryce-Canyon-National-Park-Mark-Doliner.jpg', defaultZoomLvl:50, plugins: [ [MarkersPlugin, { markers: [ { id: 'new-marker', longitude: '45deg', latitude: '0deg', image: 'assets/images/pin-red.png', }, ], }], ], }); }

but the MarkersPlugin not work

thank you again!

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/mistic100/Photo-Sphere-Viewer/issues/368#issuecomment-621588808

[w8w8w8]

@mistic100 i will try it again, thank you.