Add panoramic 360° images to the map

[SaraEL_MALKI]

Hi guys,

I wanna add some panoramic images to some specific locations on the map using the arcgis API for JavaScript, any guidelines ? 

EDIT: I'll be using Mapillary 

Crowdsourced Street-level Photos 

Thomas Solow‌

Robert Scheitlin, GISP‌

Rebecca Strauch‌

John Zhang‌

Story Maps‌

[EvelynHernandez]

Make a point feature layer with the images loaded in the service and reference them in a popup or something when u click them on the map.

[SaraEL_MALKI]

so nothing is special when using 360° images ? Have you already integrated one ?

[EvelynHernandez]

Well i just add them as points in a featurelayer (cuz its an image after all) and then when i wanted to show them i used an special canvas in my web app to make the effect for 360.

[ThomasSolow]

You could use a PictureMarkerSymbol and pass the path to your image as the URL for the symbol, for example:

var pictureMarkerSymbol = new PictureMarkerSymbol('/images/my-image.jpg', 25,25);

(The last two parameters are width and height in pixels, don't pass in anything to use the default pixels of the image).

You'd then decide where you want to place the symbol, probably you'd make a point geometry at that location, and then create a new graphic with the symbol and geometry and add it to your map or a layer on your map.

This method requires you to host the image if you want other people to be able to view your app.  Alternatively, you could upload the image to some hosting site and pass the URL to the image instead of the path to the file.

This will be a "dumb" image.  If you want to do something special with the image, you could try to play around with using an image service to host the image.  I'm not knowledgeable about how this stuff works, but the 3.XX API has a widget to help with oblique image viewing: ObliqueViewer | API Reference | ArcGIS API for JavaScript 3.20.  The key there is that the image must be published as a mosiac dataset and presumably there has to be some frame of reference for translating between image coordinates and map coordinates.  This would all require software other than the JS API to set up.

[SaraEL_MALKI]

so i need to use something like this :

    picSymbol = new PictureMarkerSymbol('......png', 60, 60);

var geometryPoint = new Point(jsonString.longitude, jsonString.latitude, new SpatialReference(4326));

   map.graphics.add(new Graphic(geometryPoint, picSymbol));

so the image will appear when I click on the point or It will be shown automatically over the point ?

[ThomasSolow]

Yep, that looks right to me.

The image will always be there if you use a Picture Marker symbol.  If you want to have the image only show up when you click it, you could change the symbol when the point is clicked, or you could place the image inside the pop-up when the point is clicked.

[SaraEL_MALKI]

I found a site hosting panoramic images and it's called Mapillary and it works with arcgis online, I am reading NOW its documentation to see how to implement their images in my maps.

[ThomasSolow]

Nice, that looks cool.  Please let us know how it turns out.