Placing Pictures on a Map
First Piece – Pictures
We all have tons of pictures and it is highly likely that they are already sitting up in the Cloud. For the MapTour application to work, your pictures need to be accessible via a URL. The MapTour is even easier to use if your pictures are already available via an image hosting service such as, Flickr, Picassa or YouTube. The example I am going to walk through in this article is using publicly available pictures hosted on other websites via a URL. In this example I am creating a map tour of Map@Syst Experts. The pictures of the experts are on-line at eXtension.org.
Second Piece – Map
The ArcGIS.com map viewer application provides the map for us. You will need to create an account at Arcgis.com or login to your existing public account. If you are not sure where to begin – see If I only had a map.
- Create your map in the viewer; you may include just a basemap or add additional layers.
- After you’ve created your map, saved it, you need to share your map with others. Choose to share with Everyone (public).
- Now that the map is saved and shared you can choose to make a web application.
Finally – Putting the pieces together
- After sharing the map, click Make a Web Application
- Choose the Story Map Tour application. This application allows you to use your web accessible pictures and associate them with points on the map. The Map Tour application is described as “A configurable Story Map application template featuring a web map, geotagged images or videos, captions, and a thumbnail carousel.” (from ArcGIS.com) .
- Select Publish from the dropdown choices.
- Give your web application a Title, some tags, a summary and choose where to save the application within your ArcGIS.com account. Click save & publish.
This will launch the Map Tour Builder. This is where we point to where our pictures are located. You will see there are direct connections to: Flickr, Picasa, YouTube . There is also an Advanced Options which allows us to connect to a properly formatted .csv file.
The file should contain the following headings and information.
NAME | DESCRIPTION | ICON_COLOR | LONG | LAT | PIC_URL | THUMB_URL | IS_VIDEO
Name: name, title, name-short, name-long
Description: description, caption, snippet, comment
Icon_color: icon_color, color, style
Long: Longitude location decimal degrees
Lat: Latitude location decimal degrees
**Pic_URL: web address to the picture (jpg, .jpeg, .png, .gif and .bmp.) http://www.**.**/Mande_expert_MapASyst.jpg
**Thumbnail: web address thumb_url, thumb, thumbnail
** These are the only two fields that need to contain information. The other fields may be populated during the Map Tour configuration.
- Choose the Advanced options: I have a formatted .csv file. The Pic_URL and the Thumb_URL content urls were retrieved from the eXtension.org website where I was able to copy the full url http://www.**.**/Mande_expert_MapASyst.jpg for the images.
Locating our pictures
Using the interface provided – simply click on each image and then create a point on the map corresponding to the location of the university.
- Choose a photo on the left
- Choose a location on the map
A point is created and is now associated with the selected photo. Do this for all the images.
Note: the point locations can be changed so don’t worry about accurate placement now.
Once all the images have been paired with a point on the map, click the Import button.
All pictures will be imported and you can customize the application interface.
You will notice there are many pieces to this configuration interface. This icon indicates an editable element of the application.
- Additional images can be imported into the filmstrip
- The order of the images can be changed by Organizing them.
The settings button provides access to even more customizations to your map tour.
Layout: There are two styles to choose from
Colors: Choose from predefined color combinations or create your own.
Header: Choose whether to insert a logo or, using a URL, point to your own custom logo.
Data: Choose the data fields to use as captions, name and color for your app.
Extent: You can define an initial map extent for the application
Zoom Level: Set a defined scale to be used when interacting with the application (Optional)
You may also customize whether or not to show the facebook, twitter and bitly shares available to share your map.
Check out the final version of my Map@Syst Map Tour .
You will notice the images in this map are not the best for this application. ESRI recommends an image size as 1000 x 750 and the thumbnails that are 140 x 93.
It is time consuming to locate the pictures on the map so if you already have the x,y location for your images, include that in the .csv file.
The X,Y location is sometimes saved with an image if the photographer has allowed the location to be embedded with the images.