My Favorite ArcGIS JavaScript API CodePens
Here are some of my favorite code samples I’ve collected on my CodePen account over the past few years. Centered Modal Geolocation Search This CodePen shows a modal with the Search widget to allow a user to type in their location. When they search, the modal is hidden. Live-Updating Protobuf Data on the Map This CodePen gets current bus locations from a Protocol Buffer feed and shows them on the map using a client-side Feature Layer.
Easter Dates
This year, Easter Sunday is on April 12. So that makes this year’s Easter date a bit “later than usual”. The date of Easter is variable every year, according to a complex formula. Because of that complexity, you might have questions like: How often does it fall on a particular date? When is the latest or earliest Easter could be? Does it fall on a certain date more often than others?
Load Protocol Buffers in the Browser
Protocol Buffers are not uncommon in the JavaScript world, but I had never had a chance to dig in and learn them. While working on a project recently I was inspired to learn a bit more about what they are. I especially wanted to know if you can load them directly in a browser. Protocol Buffers, also called protobuf for short, are a method of serializing structured data. Generally they are not used for transferring data to a browser because for large datasets the browser may take longer to decode them than standard JSON, but they are definitely used in the browser for some things like mapping vector tiles.
Deploy a Sapper Web App Automatically to GitHub Pages using GitHub Actions
Sapper is a framework for building web applications, where every page is a Svelte component. You may want to setup your GitHub repository to use GitHub Actions to automatically build and deploy your site to GitHub Pages website hosting every time you check in your code. This is great because the build/deploy step happens automatically for you - no need to manually do it yourself! Here’s how to set that up:
Publish a Svelte Web App with GitLab Pages
If you’ve built a Svelte web application and would like to host it, you can do so easily using GitLab Pages. Create and clone a new GitLab repository. Download and extract the Svelte Starter Template into the repository. Since your URL will be at a subdirectory (https://username.gitlab.io/repository-name), make the references to the JS and CSS files in your public/index.html file relative. In other words, remove the leading / from the /global.
Catholic Dioceses of the USA Map - Updated
I’ve updated the data and map of the Catholic Dioceses of the USA (originally posted a few years ago) - and it’s much better now! For example, it now shows the Ecclesiastical Provinces: When you zoom in you see the dioceses: While updating and fixing the data set, I compiled some interesting notes about the Catholic Dioceses of the US: Ecclesiastical Province with the largest number of dioceses: Saint Paul and Minneapolis (10 dioceses) Ecclesiastical Province with the smallest number of dioceses: The Archdiocese of Washington (DC), is an Archidocese that has no other dioceses in its Ecclesiastical Province Largest diocese by area: Fairbanks (area of 401,823 square miles) Smallest diocese by area: Brooklyn (area of 179 square miles) Explore the interactive map here (or download an image)
Use the ArcGIS API for JavaScript with Svelte
My colleague Jacob and I have really been enjoying using the Svelte JavaScript Framework while building mapping web apps with the ArcGIS API for JavaScript. Here are a few links and resources that I’ve collected: Svelte with the ArcGIS API for JavaScript - Rene at odoe.net eats JavaScript libraries for breakfast and was one of the first to try out the Svelte framework with the ArcGIS API for JavaScript.
Best Soccer Cities in the USA
What are the best soccer cities in the USA? One way to judge this would be to look at how many leagues (MLS, NWSL, and USL) have teams in a particular city. Running through the map, here’s the current list. Best All of these cities have teams from all three leagues. New York City, NY New York City FC (MLS) New York Red Bulls (MLS) Sky Blue FC (NWSL) New York Red Bulls II (USL) Seattle-Tacoma, WA Seattle Sounders FC (MLS) Reign FC (NWSL) Tacoma Defiance (USL) Portland, OR Portland Timbers (MLS) Portland Thorns FC (NWSL) Portland Timbers 2 (USL) Salt Lake City, UT Real Salt Lake (MLS) Utah Royals FC (NWSL) Real Monarchs (USL) Washington DC Metro Area D.
Trello Script: Find All Board Owners
I am a member of a Trello organization that is over its limit of free boards, so we’re trying to clean up some old boards. The rules in Trello say that the board admin(s) are the people who can delete boards, but there’s not a great place in Trello to get a concise list of all the boards in an organization and the details, so I wrote this little script.
ArcGIS JavaScript API Camera Helper
In a custom web map app, when creating your initial view, you usually start with the x/y (latitude/longitude) and an initial zoom level. When creating 3D web map apps that’s a bit harder, because you have to worry about the camera tilt and heading too. To make this process easier, I recently shared a little tool … The ArcGIS JS API Camera Helper is a simple app that allows you to zoom to the exact location and camera tilt/angle that you’d like your 3D app to start with, then you can copy/paste the “camera” settings into your own JavaScript app, or generate a Codepen sample and start coding right from there.