Discussion group for the members and faculty of the NEH Funded Institute for Digital Archaeology Method & Practice (http://digitalarchaeology.msu.edu) organized by Michigan State University’s Department of Anthropology and MATRIX: The Center for Digital Humanities and Social Sciences
Paisajes: Exploring Landscapes of the Taraco Peninsula, Bolivia
November 26, 2015 at 8:28 pm #241
I sent these to Maria via email, but Ethan pointed out that some of my thoughts for Maria’s project might benefit others as well, so I’m going to post them here too.
I have been thinking about your project and have a few notes to share with you while you are beginning.
I love your idea for making this user friendly for non-academics. You will likely want to create more than the little bit of content that can be displayed in popups or modals (more on that lower), so you may also decide you will create content for “learn more” pages, accessible through your map.
Below I will link to some resources to get you started on the technical aspects. I would suggest you look more closely at Leaflet Omnivore, which would let you organize your clickable areas and associated popup content in a .csv file.
For an example of how to overlay polygonal areas on a map and turn them into clickable items, take a look at this tutorial/example:http://leafletjs.com/examples/choropleth.html
Another possible option is to use Bootstrap’s modal feature to create individual modals for each onClick event, which can also grab html code saved as another file and display it. This gives you a larger space in which to display information and lets you keep the content for individual modals saved into different files, so your main .html file isn’t excessively long. If this is something you think you want to do, I can point you to some other examples as well.January 13, 2016 at 2:59 pm #415
I’m your other advisor. I suppose my main question at this point is just to ask how things are coming? You indicated you were going to use bootleaf. A sound choice. Is it working out for you? Have you thought about using GitHub’s gh-pages facility for your hosting? I find that works very well. Let me know if you have questions about that or if you need pointers to starting discussions. As with many things ‘github’ it’s straightforward once you crack the doc. But perhaps your familiar already.
-SebastianJanuary 14, 2016 at 1:54 pm #416
Maria – I totally support using GitHub (gh-pages) to host your project. If you don’t want to do this, however, MATRIX can provide you space and a somain (something.matrix.msu.edu). If you are planning on using Bootleaf, you might want to look at Katy’s Ieldran project, which is on GitHub (and forkable):January 20, 2016 at 5:52 am #443
Hi, Sebastian and Ethan, I’m just now seeing your messages (I thought I had set email alerts, but I guess not! will do now) Thank you so much for the feedback, in fact, I had just written an email to Brian about hosting, so thanks for the suggestions about gh-pages, I will check it out! In my recent blog post, I updated on how things were coming, which answers some of your questions and comments. I’ve created a timeline with deliverables, and have started acting on them. Brian asked that I share my email to him here so that the replies might benefit others will similar questions. Of course, any suggestions you might have are also welcome!
I am hoping to get much more accomplished this semester on my project than last! My first goal is to get the base of the website started. I have written to the folks at Dickinson about getting server space, but in the meantime I remember you said that there is a program where we can build it off-line, am I correct in remembering that? Also, as you know I am a very novice programmer (that’s even being generous), so what would suggest would be the easiest way to start building the site? I hope to be able to start with a basic map of the peninsula, possibly a satellite image where I can add some information such as roads and towns.
January 20, 2016 at 11:21 pm #446
- This reply was modified 3 years, 9 months ago by Maria Bruno.
First off, apologies to you and anyone reading along. This will be long.
One of the nice things about going the gh-pages route of hosting (or even for building the thing before migrating it over to another server space later) is that, when you push changes to your gh-pages branch, they update at the github-provided url fairly quickly (sometimes instantaneously, but other times it can take a minute or two). This lets you make changes and then view them somewhat quickly.
But, for the offline option that you’re remembering, I think what I was talking about was using XAMPP, WAMPP, or MAMPP to create a local server environment, which lets you keep html files locally and have them able to run with the tools required that are normally run on a server (I’m trying to not throw out all the terminology).
I may have also mentioned a program called Dreamweaver, which is from Adobe and lets a user open html, css, and js files simultaneously in its interface, then let one preview changes on the resultant webpage when one of those files is changed. This has a couple limitations though, as Dreamweaver, as I understand it, does not come with the required server tools, which means you’d have to do some extra work to get the previews running smoothly. It is also quite pricey and if you don’t already have it as a part of an Adobe suite you’ve already purchased or received through your university, I don’t recommend it.
My suggestion is that you either use gh-pages, or your final server space, to host your files while you’re building the site. Honestly, hosting them on gh-pages makes sharing your work with others for troubleshooting or feedback is much easier. If you put your files on your server space, you can use a program like Cyberduck as your ftp, which will let you select files from your server for editing, which will open in the text editor of your choice (I use Notepad++ on my PC, I know people who use TextWrangler on Mac). When you make changes and save, Cyberduck automatically uploads the changes to your server without any additional clicking or hitting Enter/Return.
(Dreamweaver has this same ftp function built into it as well, but see my previous comments to make a decision about whether or not it is worth it.)
Ok, for actually starting, I’d suggest using a bootstrap template or theme to provide the overall aesthetics of your site. You’ll need to make a decision between the various mapping choices (Mapbox, CartoDB, Leaflet standalone, etc.), but once you do, you can write up your front page calling the map you’ve created in one of those options. Choosing a bootstrap template will help set your site apart from others who use the generic bootstrap framework without a lot of extra work and most templates preserve the ease found in bootstrap in terms of tweaking color, fonts, sizes, etc.
I personally like the flexibility I get with Mapbox, but their recent-ish changes that incorporated Mapbox Studio into the core of Mapbox may be a bit daunting to someone not already familiar with their products. (You can get around this by choosing the Classic view). Ultimately, you’ll have to take a look at the various ways to get various map tiles onto your map and then pick the one that will do the things you want. If you want multiple different underlying map tiles based on user choices (such as topographical, satellite, openstreetmaps data, etc.) you should look into how to call different layers into the single web map via checkboxes or a dropdown list.
You may want to look at the forums in the group GIS, GIS, Space and Open Web Mapping to see what others are saying on the subject.
Ok that’s all I got for now. Sorry for this being so long!January 22, 2016 at 4:45 pm #452
what happend to bootleaf (https://github.com/bmcbride/bootleaf)? I think that, given the project, it will serve you really well. My (recommended) workflow & architecture would be:
– GitHub repo to build
– gh-pages to host
– bootleaf for the site
– maps could come from mapbox (or some other source)
– (anything displayed on the maps) could come from an external geoJSON file.
Again, have a look at Katy’s ieldran project as it is a good example.
this is just my recomendation…but it seems like a good solution?January 22, 2016 at 4:52 pm #453
My fault for getting things mixed up in my head.
I agree that Bootleaf is a better solution.January 22, 2016 at 5:02 pm #454
Maria – if you need a GitHub refresher, I’d recommend this free course:
(the GitHub workflow one)
to host on GitHub (with gh-pages)have a look at:January 24, 2016 at 4:42 pm #456
Brian and Ethan,
Thank you so much for the feedback (and no worries about long responses, I can use all the help I can get!)
Brian, I appreciate the review of some of the other options besides Bootleaf because, as I described in my last blog post, the first thing I did was go through Katy’s use of it and felt a little overwhelmed by the programming skills that I would need to make it my own. It might be easier for me to modify a template provided by Bootstrap, so I am going to look through that option.
If I does seem that Bootleaf will be a better option, I will definitely look for your feedback on how to make it work 🙂
I plan to spend some quality time today getting my gh-pages set up and working through these suggestions. Thank you all so much!
MariaFebruary 7, 2016 at 10:58 pm #518
So, I’ve done some exploring of my options based on your suggestions. I’ve set up my repo https://github.com/pseudocereal/pseudocereal.github.io.git gh-pages for hosting (nothing to show yet), played around with some of their templates, and returned to Katy’s Commented Ieldran to better understand it. I had forked it early on, but have now created a branch https://github.com/pseudocereal/Commented-ieldran.git Although there are definitely things I’d like to change about the look and layout of Bootleaf/Ieldran, I do agree that it’s probably best to work within and modify that structure rather than trying to reinvent the wheel. So, my next question for you all is: what is the best way to do this? Is there a way to “copy” (with proper attribution of the sources) Katy’s Ieldran code into my own repository so that I can then work and view it on gh-pages? I did try to simply copy and paste the code from my branch into a new repo, and it didn’t really work. What is the protocol for this and any tips on how best to do it. I feel like once I have done this I can begin modifying the script to make it into “Paisajes”.
Thanks!! MariaFebruary 12, 2016 at 2:28 am #540
So, if you start with the commented version of ieldrian (the one you’ve linked to on GitHub), you can provide attribution to her project in your repo’s README. If it were me, I’d probably put a link to Katy’s repo on GitHub and a link to her ieldrian project with a MATRIX url (it’s mentioned in her repo’s README). That should take care of attribution for the time being. When you’ve got a more-or-less complete project, it will likely have an About page, which is where you might write a paragraph attributing the various places from which you’ve grabbed pieces for your project (e.g. <i>ieldrian</i>, Mapbox or CartoDB, Leaflet, or whatever).
I am not quite sure what isn’t working for you, since you’ve indicated you tried copying and pasting the commented version of <i>ieldrian </i>into your own repo and it didn’t work. I have however noticed three potential issues with your repo:
- Your repo follows an old procedure for using GitHub to host a website, which is certainly understandable because I’m pretty sure their current how-to tells people to do it the way you have. For others following along, the old procedure was to name one’s repo projectname.github.io. The newer procedure is to name the repo your project name, then create a branch in that repo called “gh-pages.” Whatever is available on that “gh-pages” branch is what is live on the repo’s website. The repo’s website will be: http://username.github.io/repo.
- Your copied-and-pasted code was saved in a file that did/does not have an extension (“Commented_Paisajes”), so it wouldn’t have opened in a browser. This is an easy fix: simply edit the file and add the .html extension to the file’s name.
- The repo appears to never have had the data folder from Katy’s original, which houses the necessary .cvs files. These would need to be present in the repo for the html file to properly display things.
To get started with Katy’s ieldrian as a base, copy the .html file and “data” folder (with the contained .csv files) into your repo, which you’ve named with your project name (you can also keep the currently-created repo if you want and just rename it by going into the repo’s settings tab). Create a branch called “gh-pages.” This will let you view that .html file at http://username.github.io/repo/filename.html. When you make changes to that file on the “gh-pages” branch, they’ll almost-instantaneously reflect at that url.
Ok, good luck! If I’ve confused you, please feel free to let us know and I can try to undo the damage.February 14, 2016 at 7:07 pm #541
Hi, Brian, Thanks again for the really useful feedback. I had followed the old instructions on how to make my gh-page following this link https://pages.github.com/, so hey everyone – don’t follow this those instructions! It’s funny because I was going through my notes from the institute and saw that you instructed us on how to do it the new way… funny how it doesn’t really make sense until you’re on your own to do it!
Here is my new repo https://github.com/pseudocereal/paisajes.github.io.git
I also wrote a Read Me file that includes the information to Katy’s project and Bootleaf. I was using Katy’s Read Me as a model and noticed that she included this on the last line: “Creative Commons License: CC BY SA” What does that mean and I should I include it as well? (You’ll see I left you a note there!)
It took me a few minutes (okay, maybe an hour) but I finally added .html to the Commented_paisaes file and it turned into proper code! Minor victories.
Now I’m stuck because I can figure out how to copy Katy’s “Data file” to the repo. First, I figured out how to make a folder (that took a minute or two as well). Then I tried to copy Katy’s ieldran_cremation.csv file by clicking the “copy path” button and then pasting into the file name in my repo. If you look at my commit history from yesterday (February 13th) you can see that something went there, but the data did not show up like it does in her file. When I do searches for how to transfer folders to a new repo, I find a lot of different instructions usually involving code that I don’t really understand. All of this makes me think that I’m probably doing this wrong trying to add Katy’s file piece by piece and there must be a way to just move my “fork” from her original repo into my new repo, but I somehow can’t figure this out. Help!
One question that did occur me, though, is do I really need these data files if I’m not going to have a similar data table to hers? Why doesn’t the basic .html page just show without that folder?
February 16, 2016 at 12:20 am #549
- This reply was modified 3 years, 8 months ago by Maria Bruno.
With your GitHub troubles, I suggest you download their software, which will let you designate a specific folder on your computer (many people have this folder named GitHub) that holds all your repos locally. After downloading the software and installing it, you navigate to your repo’s main page (https://github.com/pseudocereal/paisajes.github.io.git) and click the button that looks like a monitor with a down-arrow (if you hover over it, it says “Save [repo-name] to your computer and…” It will ask for the location; just point it to the designated folder (if you’ve named it GitHub, it’s easy to find). It will create a folder inside the designated one for each repo you save locally.
This program will let you make changes to your files on your own computer, then sync them back to the internet as a commit. The published and “official” repo exists online, but your local version is a kind of offline placeholder until you send those changes to the official one via syncing. You can download both your repo and your forked repo from Katy (https://github.com/pseudocereal/Commented-ieldran). Then, getting the desired folder and files into your own repo is a matter of copying them from Katy’s and pasting them into yours on your own machine, then using the GitHub program to confirm those changes and sync them back to the site. I would suggest you only work in your “Master” branch while on your own machine, and only commit changes to “gh-pages” from “Master” on the website.
Remember, this is only to give you a look at the working version with the data displayed. You’ll be replacing these with your own data files later. So, you’re right, you don’t really need them if you’re fine with playing with the look of the site now without seeing how bits of data will be displayed (and then playing with those looks too). I do however think you’ll benefit from using the GitHub program to manage things locally and sync them to the online verison.
Every time you start to work on your project, it’d be best to open GitHub program on your computer and sync the repo you’re working on, to make sure you have exactly what’s online already. And then, at the end of your working session, you sync again so that the online version is exactly what you just did on your computer.
Ok, so about the license. The line you’re referencing is a Community Commons By-Attribution, Share Alike license (https://creativecommons.org/licenses/by-sa/2.0/). It says that, when using something with this license, you must credit the original creator and license yours with the same license.
After conversing with Ethan, we’re pretty sure Katy licensed the content of her site but not the code, which would be a separate file than the README. Ethan has used the “Issues” function of GitHub to suggest Katy add a code license to the repo. If she does that, I would suggest you do a pull request into your forked version of commented-ieldrian, and then use the same license file (copied and pasted in the same way as described above) for your paisajes repo.
This specific line is referring to Katy’s content, not her code, so you should leave it up until you’ve removed her content from your version. Basically, once your own web page no longer says ieldrian at the top and has all new explanatory paragraphs and new data relevant to another part of the world, then you can remove that line. You could probably remove it sooner than that, but better safe than sorry! But remember, the code license that Ethan has asked her to add to her repo should remain with yours, even after you’ve made content changes.February 28, 2016 at 4:46 pm #580
Hello again! I’ve finally gotten down the GitHub workflow, yay! Right now I’m working on redesigning the look of ieldran to transform it into paisajes. It is kind of fun to go through the code and figure out what colors and fonts to change. I’d also like to change the sizes of the banners and tabs. I’m finding it cumbersome, though, to have to go through 5 steps to be able to see – if – I made a change on gh-pages (editing in text doc, accepting it desktop GitHub, syncing with GitHub master, and then gh-pages). Is there a program where I could immediately see the changes I’m creating in the html file? Brian, in an earlier message you mentioned the programs XAMPP, WAMPP, or MAMPP, is that what these do? Any suggestions welcome!
thanks! MariaFebruary 29, 2016 at 12:17 am #582
Wait! I just tripped upon the answer to my own question. I was trying open my htlm file in Text Wrangler and accidentally double-clicked it, and ta-da it opened in my browser! Duh.
I am now trying to figure out how to put my own map layers in the file, without much success, so stay tuned for more questions. But, you are all off the hook for now 🙂
You must be logged in to reply to this topic.
active 1 year, 7 months ago
active 1 year, 7 months ago
active 1 year, 7 months ago
active 2 years, 2 months ago
active 2 years, 2 months ago
active 5 months, 3 weeks ago
active 6 months ago
active 6 months, 3 weeks ago
active 1 year, 2 months ago
active 1 year, 8 months ago