Group

Group Admins

  • Profile picture of Ethan Watrall

Institute for Digital Archaeology Method & Practice

Public Group active 3 years, 1 month ago

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

This topic contains 23 replies, has 4 voices, and was last updated by  Maria Bruno 3 years, 5 months ago.

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #591

    Maria Bruno
    Participant

    Today a ventured to put some very basic maps that I “created” using the new Mapbox Studio. The new version of Mapbox appears to have lots of tools to customize your maps, which I hope to take advantage of eventually. For now, I just used some of their basic styles to get three different views of the peninsula that I’d like to display. I saved and “published” them and got the apis.

    I then went into the section of the code in my version of “Commented_ieldran” where Katy had indicated the basemaps belong. I simply replaced the links she had included to her Mapquest maps with my Mapbox apis. I also renamed the maps and used find/replace in my text editor to make sure the name appeared in all the necessary places.

    Sadly, I see no maps. Here’s are gone (except for some roads on the third view) but mine aren’t appearing. I’m guessing it has something do with the fact that her links weren’t apis and mine are? Also there is one line in the code for each map (below), which I did not touch. This might also have something to do with my problem.

    subdomains: [“otile1”, “otile2”, “otile3”, “otile4”]

    If Brian or anyone wants to go into the my GitHub ‘paisajes‘ to check it out and lend me a hand, I’d greatly appreciate it!

    Maria

    I’ll probably copy this in the Webmapping forum as well.

    #599

    Sebastian Heath
    Participant

    Maria, a quick look suggests that the files in your ‘data’ folder are .csv. Your code may be calling for .geojson files. See https://github.com/pseudocereal/paisajes/blob/master/index.html#L675 . But, again, this is after a quick look and I may be missing something.

    Upon checking… Yes, Safari is giving me an error that it is failing to load Katie’s geojson files.

    Let me know if this seems like a possible direction towards a solution.

    #600

    Maria Bruno
    Participant

    Thanks so much for taking a look, Sebastian! I’m actually not too concerned about being able to show that part of Katy’s data (location of cremations), although that might be getting in the way. Perhaps I should try removing that first?

    What I’m trying to resolve is showing the basemaps and what I changed starts below line 599 with the “basemap layers” I replaced Katy’s MapQuest maps of England (here code is here https://github.com/pseudocereal/Commented-ieldran.git)  with my MapBox maps of the Taraco peninsula.

    thank you!

    #605

    Sebastian Heath
    Participant

     

    Quickly… I don’t think the form of your calls to map box are quite right. They should end in something like:

    {z}/{x}/{y}

    instead of the coordinates you have. Look at Katy’s code. MapBox will also document this somewhere on their site.

    That is the convention for letting leaflet replace lat, long and zoom with where you have clicked. It should be able to figure out the extent of your maps.

    #606

    Brian Geyer
    Participant

    Hi Maria,

    I’d like to echo Sebastian’s advice as well about the format of your tile urls. These urls should follow this format:

    https://{s}.tiles.mapbox.com/v3/[MAP ID]/{z}/{x}/{y}.png

    I played around a little with your code just to confirm, you shouldn’t need to use the public or account keys to get this to work for tile layers. The Map ID is usually your account name, a period, and then a string of letters and numbers (e.g. “geyerbri-msu.hn5m20b4”), and can be copied from the menu to the right of the specific tileset that you want to use. Navigate to the list of your Tilesets on the left of the browser window, then look for the ones you specifically created.

    Take the format above and paste that as the link for each tilelayer in your code. Then, replace the [MAP ID] part (including the brackets) with the Map ID for each tileset that you want to use.

    The final issue that will keep your maps from showing up is something you’ve already identified: the subdomains. Delete those lines entirely from each defined tilelayer.

    After all these changes, your maps should show up, but you won’t be able to toggle between them until you add some margin to the top of your sidebar (because they’re covered up by your navbar). In your CSS in the file’s header, try adding:

    #sidebar {
    margin-top: 50px;
    }

    After all these changes, all your maps should work and you’ll be able to toggle between them.

    If I were you, I wouldn’t worry so much about how the maps look at this point and focus on getting your data to properly load over any single map, because that will be something that might take more of your time to figure out. Once you know how to get data to appear over a map, then you can work on getting more maps going, and then changing the specifics of those maps.

    You’ll also notice, there’s a progress bar over your map at this point. This is because of the errors related to your code trying to use a locally hosted script, which does not exist in your repo (leaflet-hash.js). You can fix this by changing the src value to

    https://api.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js

    Ok, hopefully these comments help you to get back on track with your project. I hope you are making ample use of your browser’s console log or developer tools (usually opened with F12 on a PC), so you can see what errors are popping up and information about where those errors can be found in your code and what changes you could make to fix them.

    Good luck!

    #608

    Maria Bruno
    Participant

    Hi, Sebastian and Brian,

    Thanks so much for the feedback. Yes, I had noticed the format of my urls differed from Katy’s but wasn’t sure why or how to fix it. I was planning to explore that today (I try to dedicate Sunday to working on this) but thanks to Brian for pointing me in the right direction.

    I realized that in the new Mapbox Studio what I made were “Styles” not maps or tiles. So I was placing the apis for those there instead of calls to actual maps. I’m going to provide those links here so you can at least see them.
    Overview      Taraco Peninsula

    Today, I tried to figure out how to make these in to tiles/maps and just got really frustrated. I came across Mapbox GL JS and thought maybe this is what I need. I used the Examples and was able to put in my information from the Overview style and get it to show up with an html file (which I don’t know how to share here). Unfortunately, I’m not sure how to place this with the Bootleaf code, it’s so different. At the moment, I don’t have anything within my Mapbox account that shows my own MapID, and I don’t know how to get them there.

    I’m pretty down about this at the moment. I don’t have the skills or the time to figure each of these things out on my own. Just for example, Brian I haven’t been making any use of my console’s log or developer tool because I didn’t even know it existed :-S

    I’m trying to do the easiest possible things, but even those seem so hard. I’m not sure what to do.

    #635

    Brian Geyer
    Participant

    Hi Maria,

    This will again be a long one. Apologies!

    I think all of your time rooting around ieldran has taught you more about its nuances than you realize. And Katy took the javascript of BootLeaf – which is contained in a separate file – and put it directly into the html file, which makes it easier to work on when jumping back and forth between different parts, so it will be easier to work on than a generic BootLeaf. There are, as you’ve realized, a few issues with the ieldran version available on github, but these can be overcome.

    You asked in your most recent email about using DAEA as your starting point instead of ieldran. There are a couple reasons this might work, but also a few why it might not. You’ve already begun to familiarize yourself with the basics of BootLeaf, meaning you’ll have to pick up new nuances to doing things with the DAEA approach. Also, ieldran/BootLeaf will present information in a way that I think is better for your project (and will look much ‘slicker’ than the way I/we present data in DAEA). On the other hand, there are more tutorials available for the DAEA approach.

    To be blunt, I think you should stick with ieldran/BootLeaf. I also thing getting it working without any errors will go a long way to helping you replace Katy’s data with yours, and then altering the popups to have appropriate

    To get it working without any errors, you’ll need to change a couple things, but they’re pretty easy. First, you might consider removing the Hash.js functionality (comment-out the hash.js script file around line 516 – in html, use <!– and –> wrapped around the entire line – and comment-out the L.hash(map) function in the script around line 739 – in this location, the javascript language is in use, so comment-out with “//” at the beginning of the line).

    Second, you should change the src or href values of the scripts (the js files) or stylesheets (the css files) for all the ones that don’t already call out to a url. For example, the “typeahead.js-bootstrap.css” file is supposed to be saved locally, but the version of ieldran Katy made public doesn’t include it. You could point that stylesheet at “http://ieldran.matrix.msu.edu/assets/typeahead.js/typeahead.js-bootstrap.css” instead. The others can be found by searching for the file name and “cdn” or “api” to get the right url.

    Third, you should add a folder named “img” and put a pin image for each one you use in the project (as of right now, you’re using ones called pinblue.png, pingreen.png, and pinSteelBlue.png) with those exact names so that they get working right away – you can of course change these later by saving new pin files to that folder and then putting the correct names in the html file where appropriate. If you want to make it really, really easy, go to ieldran.matrix.msu.edu, click on the “Layers” tab, then right-click on the pins there and save the images for use in your project. Just make sure to name the files correctly when saving them into the created “img” folder.

    Fourth, follow the comments I made in my last comment about map tile urls. For the moment, you can use my map IDs if you wish – geyerbri-msu.n7b75ema,  geyerbri-msu.hn5m20b4, and geyerbri-msu.pf265i0d – but you’ll want to create your own in the near future (which we can cover once you’ve got this one working). For example, your code currently says

    <span class=”pl-k”>var</span> mapboxOV <span class=”pl-k”>=</span> <span class=”pl-smi”>L</span>.<span class=”pl-en”>tileLayer</span>(<span class=”pl-s”><span class=”pl-pds”>”</span>https:https://{s}.tiles.mapbox.com/v3/[pseudocereal.cil6yf5qx00c8aam4lj241fpj]/{-69.133193}/{-15.873467}/{8.00}.png<span class=”pl-pds”>”</span></span>, {

    on line 600. Change this to:

    var mapboxOV = L.tileLayer(“https://{s}.tiles.mapbox.com/v3/geyerbri-msu.n7b75ema/{z}/{x}/{y}.png”, {

    Note that this is calling one of my maps, that there aren’t brackets around the map ID, and that the ending is “{z}/{x}/{y}.png”. You can change the map ID later when you get your own maps going. Make this change for all of the map baselayers you want (right now you define mapboxOV, mapboxSA, and mapboxBA), and use one of my map IDs for each.

    After making all these changes, your project should display Katy’s data without any errors and you can see what your project would look like when working. I think making it to this point will be a significant step. Once you’ve got a working version of paisajes running, you can get to swapping out Katy’s data with yours and swapping out my maps with yours.

    #636

    Brian Geyer
    Participant

    Maria,

    I see that WordPress didn’t like how I copied and pasted the code related to the tilelayer code, so let me try that part again.

    For example, your code currently says

    var mapboxOV = L.tileLayer(“https:https://{s}.tiles.mapbox.com/v3/[pseudocereal.cil6yf5qx00c8aam4lj241fpj]/{-69.133193}/{-15.873467}/{8.00}.png”, {

    on line 600. Change this to:

    var mapboxOV = L.tileLayer(“https://{s}.tiles.mapbox.com/v3/geyerbri-msu.n7b75ema/{z}/{x}/{y}.png”, {

    Ok, hopefully this works.

    • This reply was modified 3 years, 6 months ago by  Brian Geyer. Reason: delete tags
    #682

    Maria Bruno
    Participant

    Hi, Brian,

    First off, I apologies for not replying sooner! The past few weeks since the SAAs have been super hectic, and I should have at least let you know I got this and would get to it. I really do appreciate all of your help!! I sat down today to try and integrate your suggestions, but I actually have several questions to follow up with. I’m attaching my Index.html file here so that you can see what I did. I’ll also update my GitHub, but it might be easier to just look at this.

    I’ll copy my questions below onto the Commons but I wanted to draft my response here so I wouldn’t loose any of it, also it’s a little easier to reply to each of your suggestions embedded in the message. (Your suggestions are in bold).

    First, you might consider removing the Hash.js functionality (comment-out the hash.js script file around line 516 – in html, use &lt;!– and –&gt; wrapped around the entire line – and comment-out the L.hash(map) function in the script around line 739 – in this location, the javascript language is in use, so comment-out with “//” at the beginning of the line).
    Ok, I think I did this correctly, should line 516 now look like this?
    &lt;!–<script type=”text/javascript” src=”assets/leaflet-hash.js”></script>–&gt

    Second, you should change the src or href values of the scripts (the js files) or stylesheets (the css files) for all the ones that don’t already call out to a url. For example, the “typeahead.js-bootstrap.css” file is supposed to be saved locally, but the version of ieldran Katy made public doesn’t include it. You could point that stylesheet at “http://ieldran.matrix.msu.edu/assets/typeahead.js/typeahead.js-bootstrap.css” instead. <i>
    </i>I think I understand what you are saying here but I’m not exactly sure where to “point” the stylesheet. I see the line you refer to #17 but I’m not sure, should I replace href=”assets/typeahead.js/typeahead.js-bootstrap.css” with href=”http://ieldran.matrix.msu.edu/assets/typeahead.js/typeahead.js-bootstrap.css” ? And then lower down on line 514 src=”assets/typeahead.js/typeahead.min.js” with src=”http://ieldran.matrix.msu.edu/assets/typeahead.js/typeahead.js-bootstrap.css” ?
    I noticed she has the note <!–https://github.com/twitter/typeahead.js/–> following both of these lines. Should that just be deleted?

    The others can be found by searching for the file name and “cdn” or “api” to get the right url.<i>
    </i>I’m not sure what “the others” are! Is that everything listed under <!– Core CSS –> and which “file name” would I search? Is the answer within the script? (Sorry this is probably really reflective of my ignorance of coding language/skill)
    <i></i>
    Third, you should add a folder named “img” and put a pin image for each one you use in the project (as of right now, you’re using ones called pinblue.png, pingreen.png, and pinSteelBlue.png) with those exact names so that they get working right away – you can of course change these later by saving new pin files to that folder and then putting the correct names in the html file where appropriate.
    Where in the script should I add the folder? And do I really need to do this right now if I don’t know what I would be using these “pins” for? I know that these indicated the locations of the different burials in Katy’s site, but I don’t know that I’ll have that many categories of objects. I think my only group of items that might be able to be pin-pointed like that are sites or towns.

    Fourth, follow the comments I made in my last comment about map tile urls.
    Done, I think, the maps still don’t seem to be showing up. It might be because something is still messed up above.

    Thanks so much for your help!
    Maria

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

Close

Account Activated

Your account was activated successfully! You can now log in with the username and password you provided when you signed up.

Close

Account sign-in

Please use the form below to sign-in to your account.

Forgot password?
Close

Recover password

Please enter your username or email address. You will receive a link to create a new password via email.

We've sent you an activation link. Please check your inbox.

Close

Account signup

1 Account Info

2 Personal Info

Registering for this site is easy, just fill in the fields below and we'll get a new account set up for you in no time.

In order to avoid spam, automatic account registration is restricted to emails from the following domains – .edu, .org, .gov. To register with a different email address, please write to digitalarchaeology@matrix.msu.edu to request an account.

Success!

A confirmation link has been emailed to you

Skip to toolbar