Map Tour Customization- Deploy to Server

1944
6
Jump to solution
08-05-2016 05:38 PM
lindsayc
New Contributor III

Hi there, I want to add more than 99 markers to the map tour template.

I am putting together a map of all the murals in town, and there are more than 99.

Based off of what I've read on Github, I think I need a server to rehost the downloaded/amended template, but I don't have one, and all I know about servers is what I've read on Google today.

So far I've:

-downloaded code from github

-amended index.html (updated appid " ") and map-config.js (MAX_ALLOWED_POINTS: 150)

-came across a video on Youtube that said I suggested I could host locally on my MacBook Pro Mac OSX, so I've :

  -gone to System Preferences> Internet &Wireless> Sharing> Web Sharing On

  -saved amended files to my local directy in newly created MapTour1 folder. open up Chrome. go to local host page (screenshot attached) but then click on MapTour1 folder and get the second screenshot attached

Right now, I am customizing/ in the testing phase of the map tour, so I'm not worried about setting up a server that can handle a lot of traffic. I just want to be able to add in more than 99 markers, see that it works, and continue to make further adjustments.

0 Kudos
1 Solution

Accepted Solutions
GregoryL_Azou
Occasional Contributor III

Hi,

You are welcome. I don't have much advice besides going step by step, first download the application, unzip and access it through localhost. The application should display an error message. If you don't get it to display that, it means there is an error in the setup of your webserver. I can't help much with that.

Then paste the id of your app in index.html and make sure it load.

Then modify the config file and make sure it load.

View solution in original post

0 Kudos
6 Replies
GregoryL_Azou
Occasional Contributor III

There is two download of the application on GitHub, one is intended for developer that want deep customization and one if you just want to do some configuration. I think you got the wrong one, make sure to use this one http://links.esri.com/storymaps/map_tour_template_zip

Also are you opening index.html by clicking on it or going through http://localhost ?

From the first screenshot, it seems that it may be your issue.

0 Kudos
lindsayc
New Contributor III

Hi Gregory, Thank you for the help. I have downloaded the version you've attached. I put it under the sites folder like I did for the others. It doesn't appear when I go to http://localhost?~(my folder) in Chrome. I've just amended index.htlml and map-config.js and left everything else (all code and folders) as is in the folder from the download. I am going to set aside some time and work on this without distraction over the weekend. Do you have any good links that might help me with understanding how loading story maps to the local web server works? This one was a good intro for me. https://www.youtube.com/watch?v=jeerWDYEAIU

0 Kudos
GregoryL_Azou
Occasional Contributor III

Hi,

You are welcome. I don't have much advice besides going step by step, first download the application, unzip and access it through localhost. The application should display an error message. If you don't get it to display that, it means there is an error in the setup of your webserver. I can't help much with that.

Then paste the id of your app in index.html and make sure it load.

Then modify the config file and make sure it load.

0 Kudos
lindsayc
New Contributor III

Hi Gregory, 

It looks like I need to take a few steps back. I came across this thread. I am now receiving that same message. 

Regarding this question you asked in your first response,

Also are you opening index.html by clicking on it or going through http://localhost ?

From the first screenshot, it seems that it may be your issue.

The following have failed for me:

-opening index.html by clicking it through finder

-leaving index.html as the only file in the sites folder. It takes me directly to the image in the screenshot below

-leaving index.html and maptour-config.js as the only files in the sites folder. Same problem as above.

What do you mean by going through http://localhost/external-link.jspa?url=http%3A%2F%2Flocalhost? If I leave the zipped Storytelling-MapTour-2.5.1 in sites. I can click on it and unzip/download it through localhost, but then I need to amend index.html and maptour-config.js and put in the appid as well as update max_markers. I then save it back to the sites folder , and I get the original screenshot again.

Or if I save the amended  index.html and maptour-config.js and put it back into the unzipped Storytelling-Maptour-2.5.1, I can't see the folder in localhost in Chrome.

I realize this is a very basic question, but I am new to servers and have to ask, what is my folder structure supposed to look like within my sites folder? This is what I currently have. Again, all I want is to be able to have more than 99 markers.

I also have a question regarding images. Originally, I made my map tour through the ArcGIS online interactive builder. I loaded each photo individually for each point. I did not host it on a web server like flickr or dropbox. After reading the github deploy web server section, I have moved copies of the images to dropbox>public. In order for the downloaded version to work on my local host, will I need to link each marker with a url to each photo on dropbox?

Also, I've just submitted my map tour for the NZEUC in Auckland. I don't want to mess around with that version now that everything is in order. Is there an easy way to make a copy of the story map/ feature layer so that if I make changes to it (delete a location for example) it won't do the same thing to the copy I've entered for the contest? I've already tried creating a copy through visualization> save as new layer, but it appears to still be connected to the original source.

0 Kudos
GregoryL_Azou
Occasional Contributor III

Hi Lindsay,

Sorry I may not be able to help more, I don't know the specific about webserver on Mac.

This may help Use Your Mac's Built-In Web Server to Share a Website 

What you need to find is how to access the website from a Browser like Safari or Chrome.

Load it and enter the URL http://localhost/ or http://127.0.0.1/ then you should get a listing or all the folder in your 'Sites' folder, click Map Tour and it should work or report an error.

Until you get Map Tour to display an error, it means that it's a web server configuration issue.

Good luck

0 Kudos
lindsayc
New Contributor III

I just wanted to follow-up on this post in case anyone new to this stuff comes across this in their future searches. I found it difficult to do local host through the Mac set up that's supposed to be preinstalled on the computer. First thing is to check you have the most up to date version of MacOS. Secondly, I'd recommend using gitpages and jekyll. I've found that to be the easiest local server set up. It's fast and well-documented.

I did have a question regarding going past 99 points though. I've changed MAX_ALLOWED_POINTS: 125 and added in markers up to 200 in the red, blue, and green icons from the Numbered_marker_symbol_sets, but the markers past 99 are not showing up. I'm sure it's something simple I've missed. All the other posts have said to just change these two things. I don't think the 100th point is purple, but the image for it would should show up anyway if it was, just not with a marker.

You can find the repo and map here. 

0 Kudos