Forum Replies Created

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #739

    Brian Geyer
    Participant

    Matt,

    I thought the code you were using might still be build upon ieldran, but I can see you’re doing things a bit differently, so my notes from Maria won’t be useful here.

    Glad Dan sent you a pull request to incorporate the markercluster stylesheets and script. That was the one thing that stuck out at me. After getting them working, your popups will likely need to be redefined with column names from whichever .csv file you’re using.

    One final note about MarkerCluster: I believe, if you use this plugin, calling the icon-specific markers built into standard mapbox may no longer work. If you want custom icons for your pins, I’d start here: http://stackoverflow.com/questions/22308868/leaflet-markercluster-custom-icons-popups

     

    #735

    Brian Geyer
    Participant

    Hi Matt,

    Apologies for jumping in here a little far into the thread. You mentioned that you tried bringing the working omnivore example script into your own existing code and that there were a few issues with broken-looking images and tiles.

    Is that existing code in a repository on GitHub? If so, which one? I’d like to take a look at it and see if any of your issues are some of the ones I helped Maria with via Slack.

    #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 5 years, 6 months ago by  Brian Geyer. Reason: delete tags
    #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.

    #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!

    #549

    Brian Geyer
    Participant

    Maria,

    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.

    #540

    Brian Geyer
    Participant

    Hey Maria,

    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:

    1. 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.
    2. 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.
    3. 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.

    #453

    Brian Geyer
    Participant

    My fault for getting things mixed up in my head.

    I agree that Bootleaf is a better solution.

    #446

    Brian Geyer
    Participant

    Hi Maria,

    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!

    #405

    Brian Geyer
    Participant

    Neha,

    You might look into how to use geopy with your data: https://github.com/geopy/geopy

    MapMyIndia also has a geocoding feature, though I’m not sure how easy it would be to run your data through it en-masse: http://www.mapmyindia.com/api/v3/docs/geocoding-api

Viewing 10 posts - 1 through 10 (of 10 total)