DEV Community: Courtney Yatteau

My Third Year as a Developer Advocate: Talks, Tech, and Teaching

Courtney Yatteau — Fri, 29 Aug 2025 17:23:45 +0000

From Teaching to Tech: Year Three (Aug 2024 - Aug 2025)

It's hard to believe that I have now wrapped up three years as a Developer Advocate at Esri. As I've made my way through each year, I've realized that each one has had its own 'theme'. Year One was all about learning and acclimating to my new role in an Esri-centric environment. Year Two was about gaining the confidence to branch out and expand my presenting skills beyond Esri conferences, reaching third-party events, and finding my voice in new communities. Year Three has been about expansion and growth. I expanded my talks, built new workshops, tried new formats, and creatively wove maps into various places, which allowed me to speak at more conferences than ever before in a single year.

What I love most about developer relations is the mix of teaching and community. I still get to teach, but instead of being in a classroom full of teenagers, I now teach adults in conference rooms, auditoriums, and expo booths. I get to experiment, share ideas, and see developers' interest spark when a concept I've shown gives them new and creative ideas. And maps have been a constant component through it all. They've given me a creative lens to connect with developers in ways that are technical, fun, and sometimes unexpected.

CityJS Medellín

🔗 CityJS Medellín 2024 | 🎥 Recording of my talk | 👩‍💻 Slides & demos

My third-year conference season began in October with CityJS Medellín, my first time speaking in South America. My talk, Decoding the Geospatial Web, introduced JavaScript developers to GIS concepts like feature layers, vector tiles, and spatial queries, while showing how tools like MapLibre GL JS and ArcGIS REST JS make them approachable.

What stood out to me was the energy of the audience. Many were hearing about GIS for the first time, and the curiosity was clear with the number of questions and compliments I received about maps and my presentation. It reminded me just how much I love introducing new concepts to an audience. I also had a hallway conversation with a developer who had some prior ArcGIS experience. After my talk, she told me she was excited and inspired to try out the new ideas I had shown. These are the kinds of interactions that truly make me enjoy my role in developer relations.

For developers considering CityJS Medellín, one of the coolest things is that speakers can present in either English or Spanish, and translation devices are available in both languages. This makes it an incredibly inclusive event and one where you will meet developers from all over Latin America and beyond.

DevIgnition and Code & Cloud

🔗 DevIgnition 2024 | rvatech/Code&Cloud 2024 | 👩‍💻 Slides & demos

In November, I gave my first talk on AI-Powered Gamification for the Web at DevIgnition in Arlington, VA. The talk brought together Azure, TensorFlow.js, and Brain.js to show how AI can power adaptive challenges, streak recognition, and interactive storytelling. It quickly became one of my favorite talks to build because it let me blend my passion for gamification with my excitement about AI.

A few weeks later, I expanded that talk at rvatech/Code&Cloud in Richmond. Having two runs so close together gave me the chance to stretch the content, improve the flow, and add new demos. I included examples using Hugging Face for sentence similarity and OpenAI for text and image generation. Afterward, several attendees came up to talk with me about how they could use gamification in their own internal apps. These kinds of interactions make my work feel rewarding and reinforce the idea that the connections I build could lead to meaningful projects and solutions simply by inspiring my audience with ideas.

Both DevIgnition and Code & Cloud are great Virginia regional events. Each has a fun after-event social hour where attendees, speakers, and organizers can connect in a more casual way, which makes the community aspect just as strong as the sessions.

CodeMash

🔗 CodeMash 2025 | 👩‍💻 Slides & demos

January brought CodeMash in Ohio, where I led my second half-day workshop, Equation to Animation: Crafting Dynamic Math Visuals on the Web. It built on my first previous workshop experience, where I had learned what methods worked and didn't in a smaller, intimate group.
This time around, I anticipated a bit of a larger group, so I led the workshop in a more self-guided way by creating my own workshop site with several modules. Between each module, I walked the group through creating animated visuals with Chart.js and D3.js. I would teach a few new concepts needed for that module and broke things up to avoid the monotony of going through code examples.

What I love most about workshops is slipping back into teacher mode. I get to see people learning in real time, ask them questions, and help them troubleshoot. I had several attendees enjoy the format and thank me for all the examples and resources I provided in the site.

CodeMash itself is an incredibly unique experience. It has so many tracks to choose from that there truly is something for everyone, even sessions for kids and people who 3D print. The entire event takes over a resort in Ohio, which gives it a camp-like feel and makes it easy to immerse yourself in learning while also having fun.

Esri FedGIS and nor(DEV):Conference

🔗 Esri Federal GIS Conference 2025 | nor(DEV):con 2025 | 👩‍💻 Slides & demos

In February I had the Esri Federal GIS Conference in D.C. where I presented demos on Location Services and open development during the opening session. Additionally, I enjoyed co-presenting a talk about ArcGIS Location Platform and how these tools can help with some of the applications our customers are building. FedGIS is generally high-energy, and it was great to connect with federal customers who are building important applications with our tools. Since I live nearby, I also enjoyed seeing colleagues from other Esri offices in person.

Additionally, I was pleasantly surprised to have some great conversations about the work I've been doing online with YouTube, LinkedIn, blogs, etc. I had some customers share genuine interest in the work I've been doing, which led to some insightful conversations.

FedGIS is also free for federal employees to attend, which makes it a great opportunity for those working in government to see firsthand how GIS is being used across agencies.

Immediately after FedGIS, I hopped on a plane and traveled to the UK for nor(DEV): Conference in Norwich. I gave my React and the Art of Gamification talk to an engaged crowd of developers. It felt like a full-circle moment to share a talk I had first delivered in the U.S. with a European audience. Additionally, since the conference was not a React-specific one, I ensured to be more thorough with my explanation of the various React hooks and tools. After my talk, I had a few developers chat with me about how their companies have been exploring the idea of gamification in their own apps and seeing my examples helped inspire them. Again, always a rewarding experience to hear this feedback.

nor(DEV): con is not just about the talks. They also host an awesome speaker dinner and a really fun party for attendees. Norwich is a hidden gem of a city, especially if you are a beer drinker, with plenty of great spots to check out.

Esri Developer & Technology Summit, RVAJS, and Frontrunners

🔗 Esri Developer Summit 2025 | 🎥 Recordings
🔗 RVAJS 2025 | 👩‍💻 Slides & demos
🔗 Frontrunners 2025 | 🎥 Recording of my talk | 👩‍💻 Slides & demos

March was packed. At the Esri Developer & Technology Summit in Palm Springs, I had the busiest schedule of my career so far. I presented on the plenary stage, co-presented four technical talks, gave a demo theater talk, and participated in SpeedGeeking. It was exhausting and exhilarating all at once. Some of my favorite moments came from the SpeedGeeking session where I spoke about combining Gemini, the ArcGIS Maps SDK for JS, and feature layers to create a unique app that supports querying through natural language processing.

Right after Palm Springs, I flew back east directly to RVAJS, where I gave A Developer's Guide to Open Source Web Mapping Libraries. It was a smaller, local conference but the crowd was enthusiastic. A few attendees told me afterward that they had never considered adding a map to their projects until that talk and were definitely inspired to do so. RVAJS is great for local Richmond, VA JavaScript developers who want to connect with their community.

I will make note here that taking a redeye from one side of the country to the other and having to present a few hours after is something I will not be doing again and do not recommend. I was extremely tired since I don't sleep well on planes and thus this was not my best performance. It certainly taught me to learn to say no to some opportunities sometimes for the sake of my own health and sanity.

I closed out the month at Frontrunners in Arlington, VA, delivering the same Open Source Mapping talk. This event was right in my backyard, so it was extremely convenient and since I had a week between RVAJS and this conference, I was well rested and had time to run through what I could do better in this talk. The audience was engaged and I enjoyed chatting with several developers afterward. I even had a few amazing conversations about my teaching to tech transition, which is always a fun topic to have, especially with fellow women in tech or looking to get into tech.

Techorama Belgium

🔗 Techorama Belgium 2025 | 👩‍💻 Slides & demos

May brought a trip to Belgium for Techorama, where I gave two talks: AI-Powered Gamification for Sports Apps and Sports Data Visualization for the Web. Using sports made the content approachable and fun and I'm so glad the conference chose this theme. This was the first time I created a couple of fun games to start my talk with and get some audience participation, which turned out to be a lot of fun and hooked my audience right away.

The conference itself was extremely vibrant and active with many different tracks, several activities going on in the hallways, and many amazing sponsors. Techorama was also held in a literal movie theater, which made the experience unique and surprisingly comfortable. The setting added a creative twist to the talks and made it feel different from a typical conference setup.

Esri User Conference and Nebraska.Code

🔗 Esri User Conference 2025 | 👩‍💻 Slides & demos
🔗 Nebraska.Code 2025 | 👩‍💻 Slides & demos

July was a double-header. At the Esri User Conference in San Diego, I presented in a couple developer-focused sessions and spent time at the developer showcase. One of my favorite parts of the week was running a Gemini-powered GeoQuiz game at the booth. Attendees could click anywhere on a map and instantly get a trivia question about that location. It was a fun way to get people talking and a reminder that maps can be both powerful and playful.

The Esri User Conference is the largest GIS event in the world, bringing together tens of thousands of people from every industry imaginable. If you are a developer, it is the place to see how geospatial technology is being used at scale, connect directly with Esri engineers, and explore the massive expo hall where every corner has something new to discover. The developer showcase in particular is a great space if you want to focus on the ArcGIS APIs, SDKs, and coding examples.

Just a week later, I was in Lincoln, Nebraska for Nebraska.Code, where I ran a mapping workshop and also gave my AI-Powered Gamification for the Web talk. The workshop gave me another chance to lean into my teaching side, and the talk let me share how AI and gamification can blend with maps to create engaging applications. On top of that, the audience was very welcoming, and the community-driven vibe was clear throughout.

dev up, Beer City Code, and KCDC

🔗 dev up 2025 | 👩‍💻 Slides & demos (React talk), Slides & demos (AI talk)
🔗 Beer City Code 2025 | 👩‍💻 Slides & demos (workshop), Slides & demos (talk)
🔗 KCDC 2025 | 👩‍💻 Slides & demos

August was jam-packed! At Dev Up in St. Louis, I delivered both React and the Art of Gamification and AI-Powered Gamification for the Web. Dev Up is one of those events where the community shines. In addition to the conference itself, attendees and speakers often plan extra social events, which means the fun and networking continued long after the sessions wrapped up.

A few days later, I was in Grand Rapids for Beer City Code, where I led a workshop on interactive charts with Chart.js and D3.js and gave my new talk, Mathematics in Motion. This talk was especially close to me because it tied my teaching background in math directly into web development. One attendee told me afterward that they hadn't touched math in years but were excited to revisit it through code. Beer City Code also adds to the fun with a sponsor raffle that gives away some great prizes. On top of that, they offer an optional after-party add-on where attendees, speakers, organizers, and sponsors gather for food, drinks, and plenty of laughs.

Finally, I wrapped up the month at KCDC in Kansas City with React and the Art of Gamification. This was one of the most welcoming events I have ever attended. The speaker dinner was incredible, and the organizers made everyone feel appreciated. On top of that, I co-won the Taskmaster event, which was an unforgettable highlight.

People Along the Way

One of the best parts of this third year was the people I met and reconnected with along the way. Conferences are about the talks and workshops, but the real magic happens in the hallway conversations, speaker dinners, after-parties, and those moments when someone shares a spark of inspiration. I met many people this year, far more than I could list here, but a few that stood out include Carmen Huidobro, Tyler Benfield, Momin Khan, Arthur Doler, Mark Erikson, Shri Khalpada, Alex Riviere, Avindra Fernando, Chad Green, David Kerber, and Mike Harrington. Each of these connections brought something meaningful, whether it was encouragement, thoughtful conversations, or simply reminding me how welcoming and collaborative the developer community can be.

Beyond Conferences

Of course, not everything happened on stage. Between events, I stayed busy with livestreams, blog writing and editing, and my AI-Powered Mapping for the ArcGIS Web Developer video series. I also participated in Hacktoberfest and the 30 Day Map Challenge. These projects gave me a chance to experiment with new formats, connect with developers online, and keep sharing Esri technology in creative ways.

Wrapping Up Year Three

Looking back, Year Three was my busiest year yet, but also my most rewarding. I expanded talks, taught workshops, built playful demos, and connected with developers across the U.S. and abroad. I wove maps into unique contexts like sports, AI, and gamification, and I saw firsthand how they can inspire and engage developers in new ways.
My experiences so far have taught me that developer relations is about teaching, connecting, and sparking ideas. It lets me bring together my background in teaching, my newfound love for maps, my passion for coding, and many of my other interests in creative ways. I am grateful for every stage, every booth conversation, every workshop, and every livestream. And I am excited to see where Year Four will take me.

This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions expressed in this article are solely Courtney's and do not necessarily represent the views, strategies, or opinions of her employer. If you have any feedback, please feel free to like and/or comment. Additionally, if you have any questions or comments that you'd prefer to send privately, you can contact Courtney through LinkedIn, X, or Bluesky. If you're considering a career switch, looking to get into tech, or curious about what it's like to work at Esri, then please stay tuned for future posts! You can also check out Esri's careers page or this video for more information.

AI-Driven Mapping Data Insights from Gemini

Courtney Yatteau — Mon, 28 Apr 2025 21:46:20 +0000

Leveraging AI in your web apps to transform geospatial data

Last month, at the 2025 Esri Developer and Technology Summit I presented a speedgeeking session where I demoed how a simple text query can turn into dynamic map highlights using the Google Gemini natural language API and the ArcGIS Maps SDK for JavaScript. So, let’s explore exactly how I built that GIS web app — from prompt to map — in just a few steps and with minimal code.

Why Gemini + GIS?

I love finding fun ways to put together what I’m learning with what I already know. In this case, I wanted to let users type any question (“List the top 3 hottest countries,” “Show me countries with population > 100 million,” etc.) and instantly highlight the results on a world map. Gemini handles the natural-language parsing, while ArcGIS handles the spatial query and rendering.

1. Project Setup

1.1 Create your files

In VS Code, create a new folder and inside it create the following files:

index.html
scripts.js
styles.css

1.2 HTML skeleton

Use the VSCode shortcut (! + Enter) to scaffold your HTML. Then, link your CSS and JS local files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Gemini + ArcGIS Demo</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="scripts.js" defer></script>
</head>
<body>
</body>
</html>

1.3 Include ArcGIS JS SDK & Calcite

Add these inside <head> before your styles.css and scripts.js:

<!-- ArcGIS CSS & JS -->
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>

<!-- Calcite Components (UI) -->
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/3.0.3/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

1.4 ArcGIS API key

Still in <head>, set your key:

<script>
  var esriConfig = { apiKey: "YOUR_ARCGIS_KEY" };
</script>

2. Build the UI

2.1 Layout the map and controls

In the <body>, create two columns—map on left, controls on right:

<div class="main-container">
  <div class="left-column">
    <arcgis-map id="map" basemap="arcgis/community" center="20,0" zoom="1">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>
  </div>
  <div class="right-column">
    <calcite-input id="userInput" placeholder="e.g. List the top 3 hottest countries"></calcite-input>
    <calcite-button id="submitQuery">Submit</calcite-button>
    <ul id="countryList"></ul>
    <div id="explanation"></div>
  </div>
</div>

2.2 CSS for layout

Add minimal CSS in styles.css:

html, body, arcgis-map { 
  padding:0;
  margin:0;
  height:100%;
  width:100%; 
}
.main-container { 
  display:flex;
  height:100%; 
}
.left-column {
  flex:1; 
}
.right-column {
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255,255,255,0.9);
  padding:1rem;
  border-radius:4px;
  max-width:250px;
}
#countryList { 
  margin:0.5rem 0;
  padding-left:1rem; 
}

3. Gemini Query Logic

Open scripts.js. First, store your Gemini key and feature layer URL:

const googleGeminiApiKey = "YOUR_GEMINI_KEY";
const featureLayerURL = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0";

💡 Pro Tip: Put your keys in a separate config.js that’s git-ignored, then import them. That way you never accidentally commit secrets.

3.1 The fetchCountriesFromQuery function

This function:

Sends query (q) + instructions to Gemini
Splits the returned text by lines
Strips numbering, extracts country names & explanation

async function fetchCountriesFromQuery(q) {
  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${googleGeminiApiKey}`, {
      method:'POST',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({
        contents:[{ parts:[{
          text: q +
            " only list the country names in a numbered list, then on a new line start with 'Explanation:' and provide a one-sentence explanation."
        }]}]
      })
    }
  );
  const data = await res.json();
  const lines = data.candidates[0].content.parts[0].text.split('\n');
  const countries = [], explanationLines = [];
  for (let line of lines) {
    const cleaned = line.replace(/^\d+\.?\s*/,'').trim();
    if (/^Explanation:/i.test(cleaned)) explanationLines.push(cleaned.replace(/Explanation:\s*/i,''));
    else if (/^[A-Za-z\s]+$/.test(cleaned) && cleaned) countries.push(cleaned);
  }
  return { countries, explanation: explanationLines[0] || "" };
}

4. Highlighting on the Map

4.1 Initialize map reference

Still in scripts.js, after page load:

const mapEl = document.getElementById('map');
let currentHighlightLayer = null;

4.2 The highlightCountries function

This function:

Removes any existing highlight layer
Builds a SQL WHERE clause from the country list
Queries the FeatureLayer
Creates a GraphicsLayer with red fills

async function highlightCountries(countries) {
  if (currentHighlightLayer) mapEl.map.remove(currentHighlightLayer);

  const where = `COUNTRY IN (${countries.map(c=>`'${c.replace(/'/g,"''")}'`).join(',')})`;
  const [FeatureLayer, Graphic, GraphicsLayer] = await Promise.all([
    $arcgis.import('esri/layers/FeatureLayer'),
    $arcgis.import('esri/Graphic'),
    $arcgis.import('esri/layers/GraphicsLayer')
  ]);

  const fl = new FeatureLayer({ url: featureLayerURL, token: esriConfig.apiKey });
  const result = await fl.queryFeatures({ where, outFields:['*'], returnGeometry:true });
  const hlLayer = new GraphicsLayer();

  result.features.forEach(f => {
    hlLayer.add(new Graphic({
      geometry: f.geometry,
      symbol: { type:'simple-fill', color:[255,0,0,0.5], outline:{color:'red',width:2} }
    }));
  });

  currentHighlightLayer = hlLayer;
  mapEl.map.add(hlLayer);
}

5. Wire Up User Interaction

Attach an event listener to the Submit button:

const listEl = document.getElementById('countryList');
const explEl = document.getElementById('explanation');

document.getElementById('submitQuery').addEventListener('click', async () => {
  const q = document.getElementById('userInput').value.trim();
  if (!q) return;
  listEl.innerHTML = explEl.textContent = "";

  const { countries, explanation } = await fetchCountriesFromQuery(q);

  // display list & explanation
  listEl.innerHTML = countries.map(c=>`<li>${c}</li>`).join('');
  explEl.textContent = explanation;

  // highlight on map
  await highlightCountries(countries);
});

6. Test & Iterate

Open index.html in your browser.
Type a query like “Top 3 most populous countries”.
Click Submit.
Watch the list populate and the map highlight those countries.

💡 Pro Tip: Use your browser console to inspect countries and explanation arrays—this helps debug parsing logic.

Feel free to tweak the prompt instructions, styling, or symbol colors. You’ve now built a fully interactive GIS web app driven by natural language!

Conclusion

In just about 100 lines of code, you’ve combined Gemini’s NLP power with ArcGIS’s mapping capabilities to transform user text into geospatial insights. This pattern — natural language → structured data → spatial visualization — unlocks countless possibilities for dynamic, user-driven maps.

This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions expressed in this article are solely Courtney’s and do not necessarily represent the views, strategies, or opinions of her employer. If you have any feedback, please feel free to like and/or comment. Additionally, if you have any questions or comments that you’d prefer to send privately, you can contact Courtney through LinkedIn, X, or Bluesky. If you’re considering a career switch, looking to get into tech, or curious about what it’s like to work at Esri, then please stay tuned for future posts! You can also check out Esri’s careers page or this video for more information.

Enhance Your ArcGIS Web App with OpenAI

Courtney Yatteau — Fri, 20 Dec 2024 14:34:03 +0000

As I’ve progressed through my coding experiences and career (and, let’s be honest, throughout life), I’m constantly looking for fun ways to connect what I learn with what I know. Most recently, I’ve been creating a video series for web developers looking to add a bit of AI to their mapping applications. I’ve had fun testing out different AI libraries and showing developers just how easy it can be to implement these in their apps.

Today, I’m guiding you through a tutorial that shows how to generate insights about a location with minimal code. We’ll be using the OpenAI API alongside the ArcGIS Maps SDK for JavaScript, with the modern web components approach. This is a simple and declarative way to add powerful mapping features to your web apps. Don’t worry if you’re new to either of these tools — I’ll guide you through each step.

AI + ArcGIS JS SDK Project Setup

To start, we’ll use a simple HTML, CSS, and JS setup. In Visual Studio Code, I’ll create the HTML, CSS, and JS files. In the HTML, I’ll use the ! + Enter shortcut for the basic HTML setup. I’ll also be sure to link my CSS and JS files. Here's what it looks like so far:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css" />
        <script src="/scripts.js"></script>
      </head>
      <body>
      </body>
    </html>

HTML Setup

Since I’m using the ArcGIS Maps SDK for JS components, I’ll need to include a couple of libraries through CDN — Calcite Components and the ArcGIS JS SDK. We’re using CDN for simplicity, but for larger production apps, using npm is recommended.

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

Before using the ArcGIS map styles, I’ll set up authentication with my ArcGIS API key. Note: Never expose your API key publicly in the frontend. In a production environment, you should use a backend server to securely handle API requests and manage keys. For now, I’ll include this above all other script tags in my HTML file for simplicity.

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

Now, I can use the custom element to represent the map and set the basemap, center (longitude, latitude), and zoom properties to my liking.

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

Here’s what the final HTML file should look like:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>OpenAI + ArcGIS Map</title>

        <script>
          var esriConfig = {
            apiKey: "yourKey"
          };
        </script>

        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
        <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
        <link rel="stylesheet" href="/styles.css" />

        <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
        <script src="https://js.arcgis.com/4.31/"></script>
        <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
      </head>
     <body>
        <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
          <arcgis-zoom position="top-left"></arcgis-zoom>
        </arcgis-map>
        <script src="/scripts.js"></script>
     </body>
    </html>

CSS Setup

Now, onto the CSS. We’ll start by targeting the html, body, and arcgis-map elements. Since I want my map to take up the entire page, I'll ensure there are no predefined padding or margins and that it takes up 100% of the height and width of the page.

    html,
    body,
    arcgis-map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

At this point, you’ll be able to see your ArcGIS JS map on the screen. Functionality is limited to zooming and panning, so let’s continue!

JS Setup

Now, onto the fun part — getting our map to interact with OpenAI! First, we need to define our OpenAI API key for authentication. You’ll need to have an account with OpenAI to get one. After that, we’ll grab the map by selecting the custom element from the DOM and assigning it to the arcgisMap variable. This lets us manipulate the map programmatically.

    const openaiApiKey = "yourKey";
    const arcgisMap = document.querySelector("arcgis-map");

Speaking of interacting with our map, we’ll go ahead and add an event listener to it. We’ll capture the arcgisViewClick event, which is triggered when the user clicks anywhere on the map. This will help us get the clicked location and send it to the OpenAI API.

After the user clicks, we’ll extract the map coordinates (mapPoint) from the event details and store them in the params object. This gives us the location (longitude, latitude) where the user clicked. We'll also use outFields: "*" to request all attributes for the clicked feature (you can refine this based on your needs).

    arcgisMap.addEventListener("arcgisViewClick", async event => {
      const params = {
        location: event.detail.mapPoint,
        outFields: "*"
      };
      //rest of the code from below will go here
    });

Now, let’s move on to getting the response from OpenAI. First, we define the prompt that will be sent to the API using the longitude and latitude from params.location. Next, we'll destructure the choices array from the response. This is where OpenAI will store the generated content based on our prompt. We'll then call the OpenAI API with fetch(), sending a POST request to the chat/completions endpoint. The headers include Content-Type: application/json to indicate we're sending and receiving JSON, and Authorization with the Bearer token for authentication.

In the body, we specify the model (I’m choosing the gpt-4o model here). Then, we'll pass the prompt in the messages field with a "user" role, indicating it's user input. After making the request, we use await to get the response and call .json() to parse it.

    const prompt = `Give a fact about longitude: ${params.location.longitude}, latitude: ${params.location.latitude}.`;
    const { choices } = await (
      await fetch("https://api.openai.com/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${openaiApiKey}`, // Use the API key
        },
        body: JSON.stringify({
          model: "gpt-4o", // Use the gpt-4o model
          messages: [{ role: "user", content: prompt }],
        }),
      })
    ).json();

Finally, we use arcgisMap.popup.open() to display a popup at the clicked location. The longitude and latitude are set from params.location, and the title is whatever you choose. The content is set to the AI-generated text from choices[0].message.content, showing the fact on the map.

    arcgisMap.openPopup({
      longitude: params.location.longitude,
      latitude: params.location.latitude,
      title: "AI-Generated Fact",
      content: choices[0].message.content,
    });

Final App in Action

With everything set up, this app now allows users to click anywhere on the map. Based on their click, it sends the coordinates to the OpenAI API. The API generates a relevant fact about that location, which is then displayed in a popup on the map. But don’t stop there — have fun with it! You can easily change the prompt sent to OpenAI. For example, you could ask for a scary fact 😱, a funny one 😂, or even ask it to include emojis! 😉

For your reference, here’s a CodePen with the full code.

Conclusion

By following these steps, we’ve successfully created an AI-powered mapping application. Here’s a quick recap of what we’ve done:

Set up the map using the ArcGIS Maps SDK for JavaScript Web Components via CDN.
Used the OpenAI API to generate dynamic content based on clicked locations.
Displayed that content in a popup on the map.

With this approach, you’ve seen how easy it is to integrate AI and mapping tools into your web applications. The key takeaway is that it really takes minimal setup and code to build powerful applications that combine real-time user interactions with AI insights.

So whether you’re enhancing your mapping projects or exploring new ways to use AI, I hope I’ve inspired you today. I’d love to see any future creations you make, so please share them here or with me on my socials. I’d love to see your work!

This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions expressed in this article are solely Courtney’s and do not necessarily represent the views, strategies, or opinions of her employer. If you have any feedback, please feel free to like and/or comment. Additionally, if you have any questions or comments that you’d prefer to send privately, you can contact Courtney through LinkedIn, X, Bluesky, or email. If you’re considering a career switch, looking to get into tech, or curious about what it’s like to work at Esri, then please stay tuned for future posts! You can also check out Esri’s careers page or this video for more information.

My Second Year as a Developer Advocate: A Journey Through Different Conferences

Courtney Yatteau — Fri, 30 Aug 2024 00:40:46 +0000

From Teaching to Tech: Year Two (Aug 2023 — Aug 2024)

Here we are again — it feels like just yesterday I was reflecting on my first year as a developer advocate at Esri. Now, I’m back to share some of the experiences that have shaped my second year in this role. While I continued to be involved in Esri conferences this past year, I made it my goal to branch out and engage in more developer outreach and awareness outside of the ‘Esri bubble’. This led me to apply to and, humbly, be accepted at several key non-Esri events, and I’d like to highlight four of them here — FOSS4G NA 2023, Women in Tech Summit Spring 2024, React Rally 2024, and Carolina Code Conference 2024. Additionally, I had the opportunity to attend Frontrunners 2024 here in the DC area, which was a real treat! Each of these experiences has collectively transformed my approach to developer relations, so let’s dive in!

FOSS4G NA 2023: Embracing the Open-Source Geospatial Spirit

Kicking off my second year was FOSS4G NA 2023 in October, a cornerstone event for the open-source geospatial community. After a year of participating in Esri conferences, I felt prepared to step onto a different stage and co-present to a broader, more diverse audience. My coworker, George Owen, initially decided to apply to this conference and generously added me as a co-speaker. I was a bit nervous but also excited and motivated to accept the challenge. To our delight, we were accepted to present.

Our talk, “Open Source Mapping Library Shoot Out,” focused on comparing popular open-source mapping libraries like MapLibre GL JS, Leaflet, and OpenLayers, helping developers make informed decisions about the tools they use. This was my first time presenting at a third-party conference, but having my co-worker by my side made the experience less daunting and allowed me to focus more on delivering the content confidently.

One of the highlights of the conference was the chance to speak with Yuri Astrakhan, one of the co-founders of MapLibre GL JS. His enthusiasm for the project was contagious and left me feeling inspired and motivated. It was a reminder of how passion and dedication drive the open-source community forward, and it reinforced my belief in the importance of collaboration and knowledge sharing. This interaction solidified the importance of engaging with the community at every opportunity, as you never know where the next spark of inspiration will come from.

Frontrunners Conference 2024: A DC Web Developer’s Event

I found out about the Frontrunners Conference 2024 at the last minute, so I wasn’t able to submit a talk. However, with the event being so close by and focused on front-end development, I decided to attend. It turned out to be a fantastic experience, filled with inspiring talks and meaningful connections. It was my first non-GIS conference, and it was a great chance to step out of my usual conference circuit and immerse myself in new perspectives.

At Frontrunners, I was particularly inspired by Nathan E. Lilly’s talk on “Hand-coded Artisanal Data-Visualization” and Shri Khalpada’s talk on “Where Numbers Meet Art: Building Data Visualizations In The Modern Web.” While neither talk directly addressed maps, they both highlighted the power of mastering the fundamentals and transforming data into compelling visuals. A key takeaway for me was the value of attending talks that might not seem directly relevant to your work but can spark unexpected creativity. These sessions gave me new perspectives on how I might integrate diverse data visualizations with maps in the future, reminding me that inspiration often comes from the most unexpected places.

While at the conference, I had the pleasure of meeting Steve Chen, a well-known figure in the developer community. We had a great conversation about his work as the director of the Code and Coffee Collective, and he shared valuable insights on developer relations and community building. His passion for fostering connections within the tech community was inspiring.

Interestingly, after the conference, I found out that Dillon Mulroy had also presented at Frontrunners. Although I didn’t get to see his talk or meet him there, we later connected at the Carolina Code Conference, where we had a chance to chat. This unexpected discovery was one of the many highlights of my conference season, reinforcing just how interconnected the tech world can be.

Women in Tech Summit Spring 2024: Empowerment Through Education

Back in May, I had the privilege of leading a workshop on open source web mapping libraries at the Women in Tech Summit. It reminded me just how much I thrive in my “teacher element.” Transitioning from a traditional educator role to developer relations, I’ve discovered that the opportunities to teach and inspire are equally present, sometimes even greater, in this field.

The workshop was an intimate and empowering experience, where I guided participants through fun, interactive activities that made the learning process engaging and memorable. The feedback I received was overwhelmingly positive, with participants appreciating the structured, educational approach I brought to the session. This event reminded me of why I transitioned from teaching to tech — to create learning experiences that inspire others.

Shortly after the summit, Mandy Meindersma, one of the attendees, shared with me how she applied concepts from the workshop to create her own app — a “Speaker Map.” This interactive map on her website showcases the places she has spoken and the topics she’s covered. Hearing about her success was incredibly rewarding and reinforced the impact that well-crafted, educational workshops can have on attendees.

Before my workshop, I found several talks at the summit deeply inspiring. The opening fireside chat on trends in technology, led by Amy Cliett, Brenda Darden-Wilkerson, and Bo Young Lee, provided a powerful discussion on driving equity and equality within the tech community. It was a call to action for everyone in the room, highlighting the steps we can take to create a more inclusive environment.

Another standout session was “Women in Cybersecurity: A Strategic Advantage in Global Cyber Warfare” by Yesenia Yser. The talk addressed the critical need to close the cybersecurity talent gap by empowering women, particularly those from underserved communities. The initiative she discussed not only aimed to enhance national cybersecurity but also to provide these women with the skills to improve their own lives. It was a powerful reminder of how technology can be a force for good when used to uplift those who need it most.

React Rally 2024: Gamification and Frontend Fun

A couple of weeks ago, in early August 2024, I took the stage at React Rally, a conference that was definitely on my bucket list to attend. My talk, “React and the Art of Gamification,” was an opportunity to delve deep into the frontend development world. I introduced my G.A.M.E.S. framework, which stands for Gamified UI Components, Advanced State Control, Memoization Techniques, Efficient Rendering, and Social Interaction.

React Rally was a unique experience for me, as it was my first time delivering a livestreamed, unscripted long-form talk. The audience was highly knowledgeable, which pushed me to up my game and deliver a talk that was both technically rigorous and engaging. I used practical examples from my own projects, including the mapping app I’d been working on, to illustrate how gamification can transform user experiences. The discussions that followed were some of the most intellectually stimulating I’ve had at any conference, proving once again that my teaching and presenting are deeply intertwined in my approach to developer advocacy.

One of the most memorable aspects of React Rally was meeting Tyler Benfield. Tyler quickly became an encouraging new friend in the tech community, and our conversations were both motivating and insightful. His support during the conference was invaluable, and I’m grateful to have connected with someone who shares my passion for technology and learning. Building these kinds of relationships is one of the many reasons I value attending events like React Rally.

What made this connection even more special was that Tyler later joined me at the Carolina Code Conference. Since he lives closer to that event, I let him know about it, and he decided to attend, especially since one of his already established friends was presenting there. Having Tyler there added a layer of familiarity and camaraderie, making the experience at Carolina Code Conference even more enriching.

I also had the opportunity to connect with other incredible content creators. One of the most inspiring people I met was Ankita Kulkarni, whose talk, “Let’s Fight: React Framework Showdown,” compared Next.js, Remix, and other frameworks in a fair and balanced way. In our conversations afterward, it was fascinating to hear about her experience in creating a full coding course and how she has learned some educational principles of differentiation through experience on the job. Her insights into both content creation and teaching were particularly enlightening.

Another talk that stood out to me was Shruti Kapoor’s “Bubbles, Booms, and Blobs: Fun with HTML Canvas!” Her session was a fun and creative exploration of what you can do with HTML Canvas and JavaScript. It reminded me of when I used to tutor a child in JavaScript using a fun game tutorial using Canvas.

Studying for my own talk at React Rally deepened my love for React and made me eager to continue learning more about it. The combination of creativity and technical depth that this talk showcased was exactly what I aspire to bring to my own presentations.

Carolina Code Conference 2024: A Fascinating Polyglot Experience

Just about a week and a half after React Rally, I found myself in Greenville, South Carolina, at the Carolina Code Conference, ready to present ‘A Developer’s Guide to Open Source Web Mapping Libraries’ once more, this time in a shorter 30-minute format. Like at the Women in Tech Summit, I was speaking to a mix of developers who were mostly new to geospatial technologies. The challenge was to make my talk enjoyable and engaging but in only one-sixth of the time of the workshop.

This event felt like a culmination of everything I had worked on throughout the year. The diverse audience brought fresh perspectives. The feedback from this talk was particularly gratifying, as it showed that my efforts to make the content relatable and engaging were successful. It was a moment of realization that my year of hard work and continuous learning had paid off, enabling me to connect with a wider audience and share valuable knowledge.

During the conference, I was inspired by Diana Pham, a fellow developer advocate who used a swivel camera stand to gather feedback during her talk — a simple yet effective idea that I’m considering for future presentations. Her talk, ‘What Online Dating Taught Me About Algorithms,’ offered a fresh perspective on algorithm principles by comparing them to online dating, showcasing how creativity can make technical concepts more relatable.

Wrapping Up Year Two

Reflecting on my second year as a developer advocate, I’m grateful for the opportunities to broaden my horizons and connect with a diverse range of developers. Each of these conferences offered something unique and irreplaceable. Whether it was engaging in deep, intellectually stimulating conversations, making new friends, or simply experiencing the energy of in-person events, the value of these experiences can’t be overstated. I learned many different things from each event, and the in-person experience truly can’t be replaced by online interactions. There’s something incredibly special about being in the same room with like-minded individuals, sharing knowledge, and making connections that could last a lifetime.

As I look forward to the coming year, I’m excited to continue exploring new opportunities, sharing knowledge, and making meaningful connections in the developer community. Whether at an Esri event or beyond, I’m committed to making every talk and workshop a valuable and engaging experience for everyone involved. The growth I’ve experienced this past year has been both professionally enriching and personally fulfilling, and I’m eager to see where this journey from teaching to tech takes me next.

Just a heads-up, my next conference speaking engagement is at CityJS Medellin from October 25–26th, 2024, in Medellin, Colombia. I would love to see you there! My talk will introduce JavaScript developers to the essentials of Geographic Information Systems (GIS) and how they can be leveraged to enhance web applications. Whether you’re new to geospatial technology or an experienced developer, there will be something for everyone in my talk.

Here’s to another year of learning, growing, and making connections that will last a lifetime. 🎉

This article was written by Courtney Yatteau, a Developer Advocate at Esri. The opinions in this article are solely Courtney’s opinions and do not necessarily represent the postings, strategies, or opinions of her employer. If you have any feedback, please like and/or comment. Also, if you have any questions or comments that you’d prefer to send privately, you can contact Courtney through LinkedIn, Twitter, or email. If you’re considering a career switch, looking to get into tech, or curious about what it’s like to work at Esri, then please stay tuned for my future posts! You can also check out Esri’s careers page or this video for more information.

A Developer's Guide to Using Custom Basemaps in Your Web Apps

Courtney Yatteau — Tue, 25 Jun 2024 17:35:13 +0000

Integrate your basemaps in Leaflet, MapLibre GL JS, ArcGIS JS maps, and More

Over the past few months, I’ve demonstrated how to create custom vector basemap styles with quick edit options and advanced techniques. Now, let’s take those custom basemaps and integrate them into different web mapping applications, including Leaflet, MapLibre GL JS, ArcGIS Maps SDK for JavaScript, and a self-hosted JSON example.

· Steps
· ID
· Leaflet
· MapLibre
· ArcGIS
· Hosting
· Conclusion

Steps

Common Integration Steps

Regardless of the library you choose, the fundamental steps for integrating vector basemaps are consistent. You will typically need to:

Include the necessary library files (CSS and JavaScript) in your project.
Initialize a map object and set its view to a specific location and zoom level.
Add a vector tile layer to the map, specifying the item ID and/or URL to your vector tile source.

ID

Getting the Item ID of your Basemap

Before integrating your custom vector basemap into different mapping applications, you need to obtain the item ID from the ArcGIS Vector Tile Style Editor (VTSE). This item ID uniquely identifies your custom basemap and allows you to reference it in your mapping applications.

Steps to Get the Item ID

Access the VTSE: Go to the ArcGIS Vector Tile Style Editor and log in with your ArcGIS account.
Open a Custom Style: Open your existing style that you have previously customized (or create and save a new one).
Save the Style: If you created a new style or made any changes, be sure to save the style. After saving, a unique item ID is generated for your custom basemap.
Locate the Item ID: The item ID can be found in the URL of the VTSE page.

With the item ID in hand, you are now ready to integrate your custom basemap into various mapping applications.

Leaflet

The lightweight, open-source Leaflet library is easy to use and supports a wide range of plugins for added functionality. Whether you need to add complex features like heatmaps, marker clustering, or geolocation, there’s likely a plugin available that fits your needs.

Let’s look at how to use your custom basemap built with the VTSE in a Leaflet application.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <script src="https://unpkg.com/esri-leaflet@3.0.12/dist/esri-leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = L.map("map").setView([38.9, -78.9], 4);
      L.esri.Vector.vectorBasemapLayer("YOUR_BASEMAP_ID", {
        apiKey: "YOUR_API_KEY"
      }).addTo(map);
    </script>
  </body>
</html>

In this example, include the Leaflet CSS and JS files along with the Esri Leaflet and Esri Leaflet Vector JS files in the head of the file. Set the CSS styling for the body to have no predetermined margins or padding, and ensure the map takes up the entire page (100% of the view height). Next, in the HTML body, create a div where the map will be placed and give it an id value that you’ll reference in the JS section.

In the JS section, initialize the map with the L.map function from Leaflet, referencing the id value you created in your HTML div. Set the view to the desired location (latitude, longitude), and a zoom level between 1 and 19 (0 is world view and ~18 is max zoom). Finally, use the vector basemap layer plugin from Esri Leaflet with the basemap ID or your custom basemap and an ArcGIS API Key, which you can get by signing up for free here.

MapLibre

MapLibre GL JS

MapLibre GL JS is an open-source fork of Mapbox GL JS. It provides robust support for vector tiles and offers powerful capabilities for rendering interactive maps using WebGL. Additionally, it is particularly suited for applications requiring high performance and detailed, interactive maps.

Let’s look at how to use your custom basemap built with the VTSE in a MapLibre GL JS application.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src=https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.js></script>
    <link href=https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css rel="stylesheet" />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        zoom: 4,
        center: [-78.5, 38.9],
        style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/items/YOUR_BASEMAP_ID?token=YOUR_API_KEY`        
      });
    </script>
  </body>
</html>

Just like in Leaflet, the first few steps are the same. The setup for MapLibre GL JS involves including the necessary CSS and JS files, setting the CSS for the body, and then creating a div with an id for the map.

In the JS section, initialize a MapLibre GL JS map using the maplibregl.Map instance. Set its container to the HTML id value, its zoom level to a value between 0 and 24, and its center to the longitude and latitude you wish to position the map over. Finally, set its style to a vector tile style URL with your custom basemap ID and your API key attached at the end.

ArcGIS

ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for JavaScript, formerly known as ArcGIS API for JavaScript, is a toolkit that lets you develop web applications with maps. It provides tools to create interactive 2D and 3D maps, conduct spatial analysis, and integrate with other ArcGIS services. You can use it to visualize your data and build informative mapping experiences.

Let’s look at how to use your custom basemap built with the VTSE in an ArcGIS Maps SDK for JS application.

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.29/"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
    <body>
      <div id="map"></div>
    </body>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Basemap",
        "esri/layers/VectorTileLayer",
      ], function (Map, MapView, Basemap, VectorTileLayer) {
        const view = new MapView({
          container: "map",
          center: [-100, 40],
          zoom: 3,
          map: new Map({
            basemap: new Basemap({
              baseLayers: [
                new VectorTileLayer({
                  portalItem: {
                    id: "YOUR_BASEMAP_ID"
                  }                
                })
              ]
            }),
          }),
        });
      });
    </script>
  </head>
</html>

Again like with Leaflet and MapLibre GL JS, the starting setup for this map is basically the same. First, we include the ArcGIS Maps SDK for JavaScript CSS and JS files. Then set the CSS styling for the body to have no predetermined margins or padding and have the map take up the entire page (100% of the view height). Next, in the HTML body, create a div for where the map will be placed. Give it an id value that you’ll reference in the JS section.

In the JS section, unlike the open-source libraries, the setup is just a bit more involved. You’ll first need to require the modules needed which include Map, MapView, Basemap, and VectorTileLayer. The Map is the placeholder for what the map will hold, and the MapView is the general holder for everything visual about the map. In the MapView, we set the container (the HTML id value), the center (to a longitude, latitude), and the zoom level to a value as low as 0 and as high as anything around 22/23 (depending on the basemap detail).

Now, within the MapView, you set the map value. This is set by using the Basemap and VectorTileLayer together. Within the VectorTileLayer is where you reference your custom basemap id.

Hosting

Self-Hosting and Using JSON in Another Mapping App

Now, each of the previous examples has required an ArcGIS API key. However, when creating your custom basemap style in the VTSE, you can take the JSON file and use it for free. Thus, if you prefer to host your own vector tile style, you can! You can access the JSON within the VTSE left-side button labeled “Edit JSON”. Once you click the “Edit JSON” button on the left side in the VTSE, you will be able to view and edit the JSON code for your map style. You can modify this directly if further customizations are needed. After making your changes, remember to save your edits. After editing, you’ll need to download the JSON style file. To do this, manually copy the JSON code into a text editor and save it with a .json extension.

Before uploading to the web, you’ll need to add a few additional things to the JSON style file, per Mapbox style specification as the file only contains the layers styles. Label the style array “layers”, then above this include the following code below.

{
  "version": 8,
  "name": "Name your style",
  "metadata": {},
  "sources": {
    "source name": {
      "type": "vector",
      "url": "https://example.com/data/v3.json"
    }
  },
  "sprite": "https://example.com/sprites/sprite",
  "glyphs": "https://example.com/fonts/{fontstack}/{range}.pbf",
  "layers": [
      ...
  ]
}

Next, host the style file on a web server to make it accessible for your applications. You could use cloud services like AWS S3, Google Cloud Storage, or even GitHub Pages, depending on your preferences and requirements. This step is crucial as the location of your JSON file will need to be referenced in the applications that use the map style.

To integrate the custom style into your mapping application, use the URL where your style file is hosted. This is done by specifying the style URL when setting up the map in most mapping libraries such as Leaflet or Mapbox GL JS. For instance, in MapLibre GL JS, you would set the style by providing the URL to the style property during the map initialization, as shown in the example above.

Conclusion

Integrating vector basemaps into your web applications is a powerful way to enhance their visual appeal and functionality. By leveraging libraries like Leaflet, MapLibre GL JS, and ArcGIS Maps SDK for JavaScript, you can create highly interactive and customized maps tailored to your specific needs.

Creative Map Styling Techniques for Web Developers

Courtney Yatteau — Sun, 28 Apr 2024 17:31:46 +0000

Using the Vector Tile Style Editor: Custom Colors, Fonts, Icons, and More

In my previous article, we explored the basics of the ArcGIS Vector Tile Style Editor (VTSE) using its Quick Edit feature. Let’s dive deeper into the VTSE’s capabilities with additional features and a practical example of enhancing the map and its surroundings for Sudhouse, a popular bar spot in Washington, DC. Our goal is to demonstrate how these features can transform a standard map into a visually appealing component of your web application.

Choosing the Right Basemap 🗺️

Basemap Details

Start customizing your mapping applications by logging into the VTSE, pressing ‘New style’, and then selecting a basemap option. These basemaps include hundreds of choices in the ArcGIS Living Atlas of the World. If you’re overwhelmed by the options, some good starting basemaps are the ArcGIS styles and Esri’s copies of some OSM styles.

Applying Basemaps in Urban Settings

For urban environments, like the city bar I’ll focus on in my example throughout this article, the Open Street Map Navigation basemap is ideal due to its detailed depiction of streets and buildings. Therefore, for my Sudhouse bar example, I have chosen the OSM Navigation basemap to enhance the visibility of local streets and the uniqueness of building identifiers around the bar.

Customizing Layer Styles 🌐

Layer Styles Details

The ‘Edit Layer Styles’ tool provides deep customization of map layers, offering precise control over their visibility, color settings, and formatting. Dynamically adjust colors using gradients or single values and modify layer outlines with changes in color, patterns, and opacity. Additionally, text appearance can be enhanced with adjustments to font style, color, halo, size, placement, and orientation.

Real-World Layer Styling: Making Streets Pop

While searching for and zooming into the Sudhouse area, I used this feature to modify the appearance of the nearby roads. In the GIF below, I selected a distinctive color for the primary roads to make them stand out. Similarly, I adjusted the text size, text color, halo color, and font style to ensure that street names are easily readable.

Color Editing 🎨

Color Details

The ‘Edit by Color’ feature streamlines the process of maintaining color consistency across your map, making it ideal for aligning with specific visual themes. This feature replaces all instances of one hexadecimal color value with another that you choose.

Transforming Colors

After setting a distinctive color for roads near Sudhouse, I used ‘Edit by Color’ to find that specific color and then selected a new color to apply to all elements with my chosen hex code, aligning them with my new color scheme. To emphasize this change, I changed the road color from a light pinkish hue to a bluer one.

Editing Icons and Patterns 📍

Icon & Pattern Details

The VTSE’s Sprite Editor allows you to change, add, or remove sprites and patterns, essential for effects like textured patterns and point symbols. Adjust the color tint of sprites to fit your map’s color scheme or upload custom icons for significant visual improvements. Please note: you must save your custom style before editing any icons or patterns.

Custom Icons in Action

For Sudhouse, I’ve decided to replace the standard amenity point/bar icon. The standard symbol provided is a basic white and faint yellow beer mug, but I want to replace it with something brighter, more colorful, and fun. After finding an icon and downloading it, I can simply replace the standard mug with my custom one for Sudhouse and all other locations with the same ‘amenity point/bar’ symbol.

Directly Editing the JSON 👩‍💻

JSON Style Details

For developers who prefer more control, the ‘Edit JSON’ function allows direct manipulation of the map’s style through JSON scripts. This feature supports focused modifications, providing instant feedback within the VTSE interface. For larger or offline edits, the JSON document can be downloaded, edited externally, and then uploaded to update the map’s style, integrating complex styles into development workflows.

Hands-On JSON Styling

When I first opened the JSON editor, the amount of style text was a bit overwhelming. By clicking on a map feature with the JSON editor open, the ‘Edit layer styles’ option becomes available, allowing access to that specific feature. Clicking on ‘Edit JSON’ again then directs me to that feature in the JSON style, where I can make edits. As demonstrated, I’ve chosen to edit the OSM building/fill layer by changing the building color and the OSM address area/label/number/name layer by adjusting the font size of the building number, then updating the style in the preview.

Conclusion

The VTSE offers robust tools for creating personalized and functional maps. By understanding and utilizing its full range of features, you can transform standard maps into tailored visual stories that resonate with your audience, regardless of the location. Whether styling a local café in Paris or a boutique in Tokyo, these tools empower you to bring a unique perspective to any map.

Stay tuned for my future articles where we’ll learn how to use these custom styles in different mapping applications and explore Photoshop-like effects, among other styling topics.

Map Styling for Web Developers — Quick Editing

Courtney Yatteau — Fri, 29 Mar 2024 15:54:11 +0000

Using the Vector Tile Style Editor: Strategies for Rapid Web Map Designing

Introduction

In my year and a half at Esri, I’ve learned a great deal. Coming into the GIS world with a math and computer science background, adapting to the geospatial technology world has been a bit challenging. I’ve learned many new things, and in this article, I will share one of the cool tricks I’ve picked up for creating more visually compelling mapping applications.

Let’s dive into the exciting world of map styling, where web development meets cartography. This is the first in a series of blogs I’ll be writing, designed to empower JavaScript developers with the magic of custom map creation. Today, we’ll scratch just the surface and explore the Vector Tile Style Editor’s (VTSE) Quick Edit option — a fast and easy way to customize your mapping applications.

Getting Started

To begin, access the Vector Tile Style Editor (VTSE) at vtse.arcgis.com. With a simple login to your ArcGIS account, you’ll be presented with an interface showing any previously customized vector tiles. To get started, press the green “New style” button in the top right corner. You’ll then choose a basemap from the various ArcGIS and OSM options. This will serve as your foundational canvas, the base starting point for how your map looks.

After selecting a basemap, the VTSE interface will open up, showing one large map with three mini-maps beneath, along with many styling options on the left-hand side. We’re going to focus on one piece of the styling panel, the very first option, Quick Edit.

Quick Editing in VTSE

Designed for both ease and efficiency, Quick Edit offers a range of options to craft your map without diving into the intricate complexities of different features, sprites, and more. Within this playground, you have many general styling options to choose from. Let’s go through each of them.

Color Theme

The first dropdown contains five different color schemes to select for your map’s style. Color schemes are systematic ways of choosing colors that work well together to create aesthetically pleasing designs. These color schemes are as follows:

Monochrome: Focuses on a single color, utilizing shades, tints, and tones of that color. It is simplistic and elegant, often used to create a minimalistic look.
Analogous: Consists of colors that are next to each other on the color wheel, usually comprised of one dominant, one supporting, and one complementary or contrasting color. The scheme is used to create harmonious, cohesive, and serene designs.
Triadic: Involves three colors evenly spaced on the color wheel, forming a triangle. It is vibrant and playful while maintaining balance.
Complementary: Made up of two colors that are opposite each other on the color wheel. This scheme creates high contrast and vivid looks but can be overwhelming if overused. It’s effective for drawing attention and creating a striking visual impact.
Compound: A variant of the complementary scheme, using a base color and the two colors adjacent to its opposite on the color wheel. It provides strong visual contrast but with less tension than complementary, making it more versatile.

Basemap Layer Groups

There are six different layer groups that represent various features of the physical and human-made environment. Below is a general overview of each of these categories:

🗺 Land: Represents the earth’s surface area not covered by water, including ground surfaces like forests, urban areas, fields, and deserts. This layer sets the foundational canvas of the map, providing the stage for other features to be overlaid.
💦 Water: Includes all bodies of water, such as rivers, lakes, oceans, and streams. The water layer is important for giving graphical context to define the landscape and influence the layout of features such as roads and boundaries.
🛣️ Roads: Encompasses all types of throughways, containing features like highways, main roads, minor streets, and paths. Roads are critical for depicting connectivity within and between regions, often serving as the primary focus in routing.
🛂 Boundaries: Political, administrative, and other demarcating lines such as countries, states, provinces, and property lines make up this layer. Boundaries are key to understanding jurisdictional and geographic divisions.
🏨 Buildings: Consists of individual structures and built-up areas, depicting residential homes, commercial, and public buildings. This layer adds depth and a three-dimensional context to the map.
🌳 Nature: Incorporates natural features, such as forests, parks, mountains, and grasslands. The nature category offers insights into land use, natural habitats, and environmental conditions.

Once you’ve finished styling the basemap layer groups, you have the ability to turn on the “Recolor icons & patterns” option. Note, however, that you will need to save the style before activating this feature.

Label Styling

There are five options for styling labels in the Quick Edit panel. These allow you to manipulate how text elements appear on the map. The five label options are:

Label colors: Set to the default of ‘Use selected colors’, when you click here, you’re given the option to ‘Pick label colors’, which allows you to change the color of the text on your map. There are two specific parts to changing label colors: label text and label halo. The label text color comprises the label itself, dominating the text’s look. The label halo is a border or glow around the text to help it stand out against any backgrounds.
Label contrast: Refers to the difference in color and brightness between the text and the map background. This option can only be changed when using the default label colors. The four contrast categories are ‘Low’, ‘Medium’, ‘High’, and ‘Maximum’. The lower the contrast, the more difficult it becomes to distinguish between the text and background colors.
Language: Select the language in which the labels are displayed. This option is most effective in a localized area for the chosen language. Otherwise, some place labels may not be affected by the language change.
Font: Controls the typeface for the map labels with this dropdown. Choose from various font options with a range of typefaces from serif and sans-serif to more decorative styles, as well as font weight and style (e.g., italic).
Label size: Controlled by incremental buttons, you can click the ‘Smaller’ or ‘Larger’ buttons to gradually vary the size of the labels on the map. Continuously clicking will increase or decrease the text size.

These different label stylings can be used to provide better visibility and integration with the map’s overall design. After styling your labels, ensure they are clear, readable, and aesthetically pleasing for maximum accessibility.

Other Options

In the Quick Edit panel of the VTSE, additional options involve manipulating road size and randomizing your colors.

Road width: Similar to ‘Label size’, you can customize the thickness of the roads by continuously pressing the ‘Narrower’ or ‘Wider’ button. Adjusting the road width can influence not only the map’s readability and visual appeal but also its functional clarity.
Randomize: This ‘randomize colors’ option provides a way to quickly change the color scheme of all the map’s layers at once. This feature is useful for exploring and discovering new visual styles without manually picking the layer colors. It can be quite useful in the initial phases of map styling, leading to potentially new creative findings.

Conclusion

The Quick Edit panel within the ArcGIS Vector Tile Style Editor serves as an excellent stylistic sandbox for web developers new to map styling. It makes personalizing maps fun and easy, while effectively conveying the desired visual message.

Stay tuned for my future articles, where we’ll div e deeper into the advanced styling features of the Vector Tile Style Editor, learn how to use these custom styles in a mapping application, and explore Photoshop-like effects, among other topics.

Pedagogy of Presenting: Transforming Conference Talks with Teaching Techniques

Courtney Yatteau — Thu, 29 Feb 2024 23:21:03 +0000

Pedagogy of Presenting: Transforming Conference Talks with Teaching Techniques

From Teaching to Tech: How I Apply Lesson Planning to Conference Talks

Before I became a Developer Relations professional, I was a teacher for 10 years. During my time as a teacher, I wrote numerous lesson plans. Now, as a Developer Advocate, I’ve been tasked with delivering various talks at conferences. Reflecting on my preparation for these talks, I realized that I was treating them like my classroom lessons. The concept of a lesson plan must be ingrained in my brain, so much so that I was applying it subconsciously. It’s funny how that happens. You apply your expertise in one area to another while remaining blissfully ignorant of the fact that you’re doing it.

Now that I’ve come to this realization, I’ve found that taking this “lesson plan” approach works quite well. Most lesson plans have many parts to them, so I’ve also realized there are some parts that I used in the classroom but have not yet implemented in a conference talk. In this article, I’ve laid out how the classroom structure, planning, and procedure have worked in my conference talks as well as some additional ideas of how and why I plan to implement them in the future.

Starter Strategies
Before the Presentation
During the Presentation
Presentation Extensions
Summary

Start

The Learning Target

When thinking about a talk, the first thing I usually do is come up with a “learning target”. In my classroom I used the following format: “Today I will… so I can… I will know I have it when…” It turns out, this approach works for adults too! For example, for my open source talk at FedGIS 2023, I came up with the following:

“Today I will learn the capabilities of open source mapping libraries, so I can utilize Esri’s services alongside these libraries to create powerful applications. I will know I have it when I can use Esri’s services to transform an existing open source application into an Esri-enhanced one.

Although I didn’t plaster this on the wall as I did in my classroom each day, this target is what I kept in mind while building my talk. The goal was to ensure the audience would be able to leave my talk feeling confident in their newly acquired skills, knowing they too could apply the technical skills demonstrated in my talk.

Opening

Traditionally, one of the first steps in presenting is to introduce yourself. In the classroom, I would share my email, room number, and office hours schedule to inform students when and where they could get additional help. I would also provide details about my background and experience to establish my expertise and share some fun facts about myself to break the ice. Similarly, in a conference setting, I tend to offer most of the same information. The difference, however, lies in sharing my social media handles to foster further connections, detailing where I’ll be for the rest of the conference to ideally spur later discussions, presenting my background and experience to lend credibility, and sharing a fun fact to be relatable.

After introducing myself, the next thing I like to do is give an overall schedule for the lesson/talk. This gives a sense of what the audience can expect to see. For students, I made sure the schedule had apparent activities to break up the lesson and keep things interesting. For conferences, I ensure the layout is clear so that audience members fully understand the direction and goal of the talk. Of course, this is the point at which some attendees may choose to leave, but that’s alright because it means you’re setting yourself up for your target audience! I bet students wish they had the option to do this in the classroom… haha.

Finally, I make sure to review any prerequisite knowledge and set expectations for the audience. Again, this could be an opportunity for conference goers to exit, but it also informs people about the skill level I aim to address. In a more positive light, this presents an opportunity to recommend other similar talks for those who may still be interested but don’t feel suited for that particular talk. This approach helps me connect with the audience in an authentic and empathic manner. Similarly, in the classroom, I would take this opportunity to discover students of all skill levels, taking into account those who may need additional help and those who may require more of a challenge. This concept is known as **differentiation, **a difficult skill to master but an effective one when properly applied.

Before

Materials

When setting up my classroom, there were important materials I ensured to have on hand every day. Now, before giving a conference talk, I’ve found many of these same materials can help calm nerves and set me up for success. Here are the top critical items I make sure to have when presenting:

Working Laptop 💻: This one is probably obvious. How in the world are you going to show anything on a screen without this?! The important part here is to ensure your laptop is in tip-top shape and ready to go! Make sure all unnecessary tabs and applications have been closed and that the computer has recently been restarted. Check for any necessary updates and make sure there are no scheduled updates during presentation time. Although I haven’t had any mishaps in my conference talks yet, I certainly had a few in the classroom. Imagine being in the middle of a lesson with thirty 16-year-olds, when suddenly your computer decides to force update, disrupting your plans. Yeah, it was almost impossible to keep control. In a conference setting, keeping the audience engaged through such a disruption would be equally challenging.
Computer Mouse 🖱: Although you might be accustomed to using a laptop trackpad, a mouse provides smoother and more accurate control during presentations. It minimizes distractions, allowing you to focus on delivering your message effectively. To ensure you’re always prepared, I recommend keeping a mouse in your computer bag at all times, separate from the one you use at home or work.
Slide Deck 🖼️: Think of your conference slide deck as the digital equivalent of classroom posters and visual aids. Utilize tools like Microsoft PowerPoint or Google Slides to create an engaging and visually appealing presentation. Incorporate text, images, graphs, and charts to make complex information digestible and interesting, capturing your audience’s attention as a teach would with students. A well-crafted slide deck not only conveys your message but also keeps your audience engaged.
Speaker Notes 📝: Speaker notes are the presenter’s secret weapon, similar to a teacher’s lesson plan. They guide you through each segment of your presentation, ensuring you cover all key points and provide context that may not be evident from the slides alone. Just as detailed lesson plans keep classroom lessons on track, speaker notes help you navigate your talk seamlessly, facilitating timely transitions and a steady flow of information. They serve as your personal roadmap for a confident and structured delivery.
Extra monitor🖥️ : Much like in a classroom where visibility is key, at a conference, an extra monitor can serve as your personal dashboard. It allows you to keep track of your presentation slides and view your speaker notes discreetly, while still being able to monitor the audience’s engagement and reactions.
Handouts 🧾: In the classroom, handouts such as worksheets, activities, and charts reinforce lessons and provide students with valuable reference materials. At conferences, handouts enrich the experience, ranging from detailed talk outlines to business cards for networking, and even swag items like branded stationery, creating a lasting impression. These materials aid not only in knowledge retention but also in fostering connections long after the event has concluded.
Essentials 🩹: It may not be the first thing you think of, but having items like water, throat lozenges, bandages, and tissues on hand to manage unexpected situations during your presentation could be a lifesaver. Sure, there’s likely to be safety or health personnel on-site to assist, but just like in a classroom where the nurse’s office isn’t always close by, being prepared yourself can save you from headaches.

Remember to tailor your materials to the specific needs and expectations of the conference and your audience. The right preparation and organization will help ensure a successful and impactful conference talk.

Setup Script

In the classroom, I made sure to have all of the student’s virtual activities assigned, my lesson slides open and ready, and any examples ready to be shown. In a conference talk, I ensure any links I want to show are working, my slides are open and ready, and my demos are all open and running. In either case, I’ve found it extremely helpful to have a well-organized list of tasks nicely laid out so there’s no chance of missing anything. I learned this the hard way when I once forgot to assign an activity to one class, even though I had prepared it for another. Thus, in any conference talk, but especially if you have more than one, be sure to have a custom setup script for each!

Be Inquisitive

Something I learned very early on in my teaching career was to be prepared for questions! In my second year of teaching, I specifically remember having my answer key to all of the questions I was going to have the students answer in hand. However, what I didn’t plan for were extensions and inquisitions. As a student, I often had questions beyond the scope of the content but took to looking for the answer myself before asking the teacher, as to avoid embarrassment or ridicule for asking too many questions. (Silly, I know but I was a bit shy academically). So when I started to have students ask questions beyond the scope of the content, I would sometimes feel unprepared. Not for lack of knowledge but for the unpredictability and time it would take to answer.

In a conference setting, it’s pretty much the same! Most people, when giving a talk, set aside a bit of time at the end for questions. And you better believe I do my best to prepare for this. When preparing for conference talks, I treat it just like I did with lessons. I compile a list of ways to extend a topic, come up with potential questions, and then answers to these. If there is just one piece of advice you take away from this article, this would be the one. **Be inquisitive, over research, and plan for those curve ball questions! **You and your audience will be happy you did, as you’ll look and feel more like an expert.

During

Transitions

In any lesson or talk, there are typically several topics or sections throughout. To maintain a consistent flow, I look for ways to transition smoothly from one topic to the next. For example, in the classroom, I often built upon specific topics, integrating each new element as I went along. Showing one example with a few steps (I was a math teacher, FYI), I then continued to gradually add steps with additional examples.

In a conference talk, achieving this seamless transition isn’t always possible, but it’s beneficial to consider how one topic could possibly lead into the next, even if that wasn’t initially your intention. In a talk I presented with a couple of colleagues, I had a few back-to-back demos on different services, where one of my colleagues would provide commentary between each. Rather than just conducting my demo on one topic, I made sure to either extend the demo to include the upcoming topic or at least mention how it could be relevant.

Connections and Relatability

When speaking to an audience, we all, of course, want to grab their attention. This skill can be a bit challenging, however. It’s not too difficult to get up in front of people and present information in a plain and dry fashion by simply reading off slides. However, the likelihood of that approach being effective is minimal. Having had to entertain teenagers all day as a teacher, I learned ways to be more engaging. One of these methods is to try and connect with them to make yourself more relatable. For example, when a student’s phone would go off in class, I would share the story of how my phone went off on the last day of school in a class where the teacher would take your phone for the day. This story reminds students that I too was once a student, and it’s a tale I can retell year after year.

In a conference setting, things are a bit different since you’re unlikely to encounter a spur-of-the-moment situation like in a classroom. However, it’s entirely possible to forge a planned connection if you think a bit outside the box. For instance, a colleague of mine recently gave a talk where they showcased a service that included many different pieces of data and values. Instead of opting for a common and simple variable, like population, they chose to discuss the number of dogs people owned in a certain area. This approach was fun and made the presentation more interesting! Plus, it gave them an opportunity to mention their love of dogs, thus appearing more relatable.

Timing

In conference presentations, just as in my classroom, managing time effectively is key. When I was teaching, I carefully segmented each lesson into manageable parts, each with its own time allocation, to ensure I covered all the necessary material within the class period. Now, as a presenter, I apply the same principle. I practice and time each segment of my talk, whether it’s a demonstration, discussion, or slideshow. This helps me deliver the content within the allocated time, keeping the audience engaged, just as I did with my students.

However, even with thorough planning, timings can often go off track, both in the classroom and at conferences. This is where time fillers, an essential skill in a teacher’s toolkit, become invaluable.

Extensions

Time fillers

No matter what, it’s unlikely that you’ll time your talk to exactly fit within your allotted timeslot. Time-fillers can be lifesavers in any presenting situation. Imagine stepping onto the stage, expected to fill 30 minutes, only to realize you’ve spoken much faster than anticipated and still have 10 minutes left. The audience may or may not be okay with this, as it leaves more time for questions. However, it’s likely that others will perceive this as a sign of being unprepared or possibly even apathetic. In the classroom, not having enough lesson content prepared to fill the class time can be a teacher’s worst nightmare, since leaving children with free time usually never ends well. Again, more time for questions, but also more time for potential pitfalls.

To avoid these situations, being prepared is crucial! Chunking and ranking content is key. Typically, when preparing a topic, I over plan and stuff my slides full of information. Then, I go back through and determine what’s essential and what can be omitted. From there, I take the potentially “removable” content and rank it from most interesting to least as my time fillers. Then, while presenting, be sure to keep an eye on the time and use your best judgment to seamlessly integrate time fillers where appropriate, if needed.

Vocabulary

The concept of a vocabulary list, so crucial in the classroom, also finds its place in conference talks. During my teaching days, vocabulary lists were essential to ensure students understood the key terms they would encounter during a lesson. Similarly, for my conference talks, I maintain a personal vocabulary list. This includes not only terms with which I am familiar and ensure a comprehensive understanding, but also new or complex terms I anticipate using or encountering. As I mentioned in my one-month article, having a running list of terms and definitions is a practice I have found immensely helpful. It’s not just about the words in my presentation; it’s about being prepared for any follow-up discussions with the audience.

This approach echoes my teaching days, where occasionally I would assign vocabulary research as homework, challenging students with both familiar and unfamiliar terms. Speaking of homework, this leads me to my next topic… Talk about a transition! 😜

Homework

Discussing homework in the context of adult conferences might seem unusual, but it has its place. Traditional homework in a classroom setting involves reinforcing and expanding upon what was learned. Similarly, at a conference, I encourage further engagement by inviting the audience to explore unfamiliar topics or terms, to provide feedback through surveys, to visit me at my booth, to attend other related talks, and to connect online. This approach can transform passive listening into active learning, fostering deeper engagement with the topic, much like homework does for students.

Exit Tickets

In the classroom, I often used ‘exit tickets,’ which are short prompts or questions given to students at the end of the lesson. They serve multiple purposes: assessing students’ understanding of the day’s topic, gathering feedback on the lesson, and engaging students in reflective thinking. This method not only helped me gauge the effectiveness of my teaching but also provided students with a moment to consolidate and reflect on what they had learned.

Though I haven’t yet tried this method in my presentations, I’m excited about its potential. In an upcoming conference talk, I plan to introduce an approach similar to exit tickets. I’ll pose a thought-provoking question or prompt at the end, aimed at encouraging the audience to reflect on the key takeaways. This could be through a quick digital poll or a brief Q&A session. Additionally, I’ll invite attendees to continue the conversation afterward, either personally or via social media and conference apps. The goal will be to engage the audience more deeply and gather valuable feedback for future talks.

Summary

As I reflect on the intersection between teaching and presenting, it becomes evident that the skills I developed in the classroom are tremendously useful on the conference stage. Both require clarity, engagement, adaptability, and an in-depth understanding of your audience. The fundamental principles are identical, whether you’re navigating students through a complex math problem or guiding developers in a technical demonstration: clarity, engagement, and the readiness to adapt are key.

Embracing the lesson plan approach in a conference talk can bring a much-needed structure and depth to a presentation, thus enhancing the overall experience for the audience. This method ensures that attendees leave with not only information but also the impression of having been a part of a learning journey.

To conclude, I encourage my fellow presenters in any field to consider the value of a well-structured lesson plan. This approach extends beyond traditional educational environments, improving our ability to communicate, teach, and inspire. Ultimately, at the core of every impactful lesson, whether delivered in a classroom or at a conference, lies the goal of imparting knowledge, stimulating curiosity, and promoting understanding.

Now Over to You!

We explored how the principles of teaching methodologies can transform presentations, making them more engaging, informative, and memorable. But the true power of these strategies is revealed through application and experimentation. Have you ever applied a teaching methodology in a presentation or in other unconventional areas? What was your experience like? Did you notice a difference in engagement or feedback? Share your stories, tips, or questions in the comments below.

Join Hacktoberfest 2023: Celebrate Open Source with Esri 🌎🎃

Courtney Yatteau — Mon, 02 Oct 2023 22:14:08 +0000

Join Esri this October 2023 for the world’s largest open source event, Hacktoberfest!

Are you ready for the annual extravaganza of open source collaboration? Hacktoberfest 2023 is here, and we’re excited to share that Esri is taking part in the month-long celebration of open source projects. We have a range of opportunities available to developers of all skill levels to get involved. To find out how you can join in on the fun, read on for more details! And if you happened to miss it, be sure to watch our Hacktoberfest livestream recording for additional insights.

Why Esri is participating 🌍

Starting in 2013), Esri began publishing repositories like Esri Leaflet and Terraformer. In fact, Esri Leaflet is one of the top Leaflet plugins based on Github stars. Since then, Esri’s commitment to open source has continued to grow, especially with the release of ArcGIS Platform a couple of years ago. Esri’s commitment to open source is evident through the developer demonstrations and comprehensive documentation, where you can find a wide range of open source integration options, including support for popular libraries like Leaflet, MapLibre GL JS, OpenLayers, and CesiumJS.

Esri’s Open Vision Initiative, established in 2015, exemplifies their dedication to maintaining ArcGIS as an open and interoperable system. This commitment encompasses their support for open source technologies, open specifications, open standards, and open data. Throughout recent years, Esri has initiated numerous open source projects, actively participated in third-party endeavors, and integrated open source solutions into many of its product offerings.

While Esri consistently encourages contributions to open source projects, the involvement in Hacktoberfest signifies a heightened commitment. Throughout the entire month of October, my colleagues and I are here to assist newcomers as they take their first steps into open source project contributions and to offer additional support to seasoned contributors.

Participation benefits for contributors 🧠

Contributing to open source repos can have several benefits including:

Skill development: To contribute you will likely need to study and understand the inner workings of the code, which may help you improve your technical skills (e.g. debugging, design patterns, etc.). It may also provide you with the opportunity to acquire new skills, such as testing, learning new programming languages, exploring frameworks, and using tools like Git, all while gaining practical experience through contributions to open-source projects and real-world projects.
Collaboration and networking: The opportunity to connect with like-minded individuals, share ideas, and build professional relationships within Esri and the broader open-source community will help you expand your network. Additionally, Esri will provide additional support throughout the entire month of October.
Satisfaction and reciprocity: If you choose to solve a bug that someone else has found, you will not only help them overcome the difficulty, but it will also bring a sense of satisfaction to you. Moreover, it can aid in your own learning journey and expand your network. Furthermore, you may also find that when you need assistance, there are more developers willing to help you.
Learning from others: An opportunity to learn from experienced developers is provided. You can learn from their code reviews, study their code, review their contributions, and gain insights into best practices and coding standards, which will improve your coding skills.
Building a portfolio: Contributing to open source projects allows you to showcase your work and build a strong portfolio. This can be valuable when applying for jobs, seeking career advancement within Esri, or pursuing freelance opportunities.
Recognition and reputation: It can help you establish a positive reputation and gain recognition for your contributions. Esri will highlight and acknowledge all contributors post-event on their website to show appreciation. This can lead to increased visibility within the company and potential career opportunities.
Rewards: By making valid contributions to one of the listed repos, you will be entered into the Esri contest, giving you the chance to win registration to the Esri Developer Summit. Additionally, you can register to receive the general Hacktoberfest rewards from Digital Ocean.
Influence and impact: Working on enhancements also provides you with the opportunity to influence the direction and development of the software. Your contributions can help shape the features, functionality, and quality of the projects, making a meaningful impact on the technology that many more developers use.

How to participate 👩‍💻

Participating in Esri’s Hacktoberfest event is straightforward. If you plan to participate, please join the Slack channel. While we encourage participants to ask questions related to specific issues in the repositories themselves, the Slack channel will be an additional way for you to get help and support from Esri employees and other contributors, as well as engage with other community members.

Next, select a repository from the Hacktoberfest designated list below. Within these repositories, you’ll find issues to contribute to labeled with “good first issue” or “help wanted”. Determine which issue you would like to work on and be sure to adhere to all our general open source guidelines and code of conduct before submitting a pull request.

Should there be any Esri premium services that you need to utilize when completing an issue, please contact us via Slack or email. We can provide a voucher for any valid requests, in this case.

Designated Hacktoberfest repositories list 📃

Rules

Valid contributions include:

Contributing to projects from the list of the selected projects between October 1st — October 31st.
Having a pull request (PR) accepted and merged.
No more than one “good first issue” per person.

Prize and points 🏆

To incentivize participation, we will be giving away one free registration to the Esri Developer Summit in either Berlin, Germany, or Palm Springs, CA (winner’s choice). The participant who receives the most points from their valid contributions will be awarded this registration.

The points allocated for each valid contribution type are as follows:

For a “good first issue”, the participant will receive 10 points. NOTE: Any one person may only earn 10 points once from completing a valid “good first issue” contribution.
For an issue labeled “help wanted”, the participant will receive 15 points.

An issue must have either the label “good first issue” or “help wanted” to be considered a part of the contest. If an issue has both “good first issue” and “help wanted”, then it is considered a “good first issue” issue and will be worth just 10 points. For more detailed information, please carefully read through all of the contest rules.

Conclusion

Esri is looking forward to participating in Hacktoberfest this year, and we hope that your own curiosity, along with the incentives offered by both the official Hacktoberfest presenters and Esri, will be the perfect excuse for you to participate this year. There are opportunities for individuals regardless of skill level. Reminder — if you have any immediate inquiries or feedback, join the Slack channel or send us an email.

My First Year as a Developer Advocate: Unveiling My Conference Experiences

Courtney Yatteau — Thu, 31 Aug 2023 13:21:52 +0000

My First Year as a Developer Advocate: Unveiling My Conference Experiences

From Teaching to Tech: A Year in my New Career (Aug 2022 — Aug 2023)

Well, here I am again writing about my experience as a developer advocate at Esri. Except for this time, instead of being one month in, I’m one whole year in! It’s been an incredible journey thus far, and I’d like to share the things I’ve experienced and accomplished through the Esri conferences I’ve had the privilege of attending this past year. So, without further ado, let’s dive into it!

Esri Conferences and Summits

Esri is renowned for its exceptional conferences — the venue, pre-conference workshops, plenary, technical talks, and amazing food and beverages. As an attendee, you have the opportunity to learn, make connections, and even receive some free swag! As an Esri employee, these conferences are a chance to meet users, partners, and colleagues face-to-face, fostering meaningful relationships.

In my first year as a developer advocate, I was lucky enough to be asked to present at four Esri conferences. These are the Esri European Developer Summit, the Esri Federal GIS Conference, the Esri Developer Summit, and the Esri User Conference. My experiences at each of these events have contributed to shaping and defining my role. I’ve had inspiring conversations with innovative engineers, I’ve gained a plethora of knowledge about Esri’s vast ecosystem of products and technology, and I’ve built lasting connections and trust with my colleagues and other developers.

Conference #1: Esri European Developer Summit

The first of the four Esri conferences I presented at was the Esri European Developer Summit 2022 in Berlin, Germany. To say I had a wonderful time here is an understatement. I was 2.5 months into my new role with Esri and already visiting another continent to which I had never been! At this conference, I was assigned a number of tasks to complete.

First, I was tasked with giving a “Developer Essentials and Resources” presentation to a group of distributors. This was a 30-minute presentation during a pre-conference workshop (ArcGIS Developer Training). I should mention that I did give this same presentation internally to Esri employees in the Vienna, VA, office a couple of weeks previously, so I did have a bit of practice. Nevertheless, I was super excited to be presenting in front of some Esri distributors for the first time. The intimate setting and banter from the distributors made my first conference presentation a welcoming and fun experience, and their feedback was invaluable.

My second order of business was to present on the plenary stage! If you’re unfamiliar with the way Esri conferences start, the plenary is the opening session full of new updates, information, and live demos by Esri’s engineers. These demos are thoroughly rehearsed, and presenters are expected to memorize every word and action by heart. No teleprompters, notes, or other assistance here! The Esri European Developer Summit plenary is recorded but not live-streamed, so the pressure isn’t quite as intense as other Esri conference plenaries. Nevertheless, this was my first time presenting technical demos in front of a few hundred people, so I was understandably nervous. The amazing part was that after getting that first sentence out, the rest came naturally. I found my stride, and my nerves were calmed by focusing on what I was presenting and not how I was presenting it.

The third task I was assigned was to co-present three technical talks with my lead mentor and colleague, Raul. Seeing as this was not only the first technical talk I presented but also my first tech conference in general, I didn’t really know what to expect. So I relied heavily on my lesson planning skills (as a former teacher) when approaching this situation. Creating a PowerPoint was certainly nothing new to me, and laying out a flow for how to present the information came naturally. What I didn’t do well with was time-managing the prep work. I was up until about 3 a.m. one night before our last talk just to ensure I was ready! I will admit that in these talks, being just 2.5 months into a completely new profession, I did quite a bit of “fake it til you make it”. Luckily, I wasn’t presenting alone, so I did have the ability to lean on Raul’s expertise to fill in my knowledge gaps.

My fourth and final task was to help “man” the ArcGIS Platform booth in the showcase area. At first, being assigned this task wasn’t something I was initially too excited about. I love teaching, listening, and collaborating with fellow developers, but being so new, I felt like I wouldn’t be able to contribute much. And on the teaching side of things, I generally didn’t have too much to offer yet as I was still learning Esri’s services. However, the conversations I had with developers were invaluable. I learned about new and exciting ways in which people are using Esri’s technology, all about how different products and pieces fit together in the ArcGIS ecosystem, and was inspired to help developers learn about all of the generally cool things they can do once they discover our technology. This is actually why I decided to create my video series called “Esri (ArcGIS) Developer Advent Calendar”.

Overall, the Esri European Developer Summit 2022 was an unforgettable event. The time I got to spend learning from other developers and my mentor Raul, the connections I made with colleagues, distributors, and partners, and the ideas I gathered for helping improve the Esri developer experience were all invaluable. This conference is quite unique in comparison to the other conferences I would later attend. The feelings of excitement, hard work, and general enthusiasm were at an all-time high, especially during social events. I didn’t know it at the time, but the experience I had in Berlin would turn out to be the most critical in helping me form and shape my developer relations role moving forward.

Conference #2: Esri Federal GIS Conference 2023

The second conference I was asked to speak at was the Esri Federal GIS Conference (FedGIS for short), which was held at the Walter E. Convention Center in Washington, D.C. Since I live in Alexandria, VA, and just a few minutes walk to a metro stop, this conference was both convenient and accessible for me. This conference, in general, is not developer-focused. However, there was a developer-day pre-conference track on Monday, February 6th. There was also a Developer Technologies area in the showcase expo area on Tuesday and Wednesday. At this conference, I was asked to do three things: demos in the opening developer-day session, an open source talk, and be present at the “Developer Experience” booth at the expo.

The developer-day opening session was full of great demos by Esri’s engineers and attracted a substantial audience, with over 200 people in attendance. It’s a bit like a mini-plenary,” and Jack Dangermond (Esri’s president and co-founder) made an appearance to start it off! During this opening session, I presented three open source demos. The first two were similar to the two I did in Berlin, and the third was to show off the new ArcGIS + CesiumJS integration. Like in Berlin, I managed to overcome my nerves within the first sentence or two, and everything turned out as planned! The one major downside to doing these demos is that the stage was arranged for us to sit down while presenting. For me, that was quite uncomfortable. It may be the former teacher in me, but I very much enjoy standing while speaking publicly. It generally makes me feel as though I have a better stage presence, and the more comfortable I am, the more likely I am to have a top-notch performance. Nevertheless, I managed by sitting up straight, making plenty of eye contact with the audience, and ensuring I was genuine with my mannerisms and tone of voice.

After the opening session, I had a bit of time to prepare for the first technical talk I would be presenting all by myself! In Berlin, I had the reassurance and assistance of Raul in each of the talks I co-presented. This time, it was all up to me! For this presentation, I put a lot of time and effort into learning how Esri’s services are designed to be integrated with several open source library options. The prep work I did consisted of watching previous similar conference talks, practicing using our services by building demo apps (both for practice and for the talk) and asking lots of questions to coworkers about a variety of topics. During the talk, I used a second screen for my notes while presenting (mostly to ensure I used proper terminology and to help mitigate my nerves). In the end, the talk was a success! All of my demos worked as intended, the room was completely full, and I received lots of questions and good feedback afterward.

My final task was to be at the “Developer Experience” booth in the showcase expo room. The expo had a “Developer Technologies” section that was the central hub for our different APIs and SDKs developer offerings. This task was similar to the one I had in Berlin; the main difference was the clientele. The majority of people I spoke with were government employees who didn’t have developer experience themselves but had general developer questions from the engineers they lead. A nice thing about government people is that many of them like open source since several institutions require it, so I was able to have some good conversations about that area of interest. The other popular crowd I spoke with were those just gauging general interest in what “Developer Experience” meant. I was able to answer these questions with ease and enjoyed showing many of the developer resources I had gathered for the pre-conference talk I gave in Berlin.

My time at the Esri Federal GIS Conference 2023 was less hectic than in Berlin, which allowed me to relax a bit more and enjoy my time with colleagues and customers under less pressure. I was able to attend a few of my colleagues’ sessions to learn from the experts. Since I live so close to Washington, D.C., I was able to meet with colleagues who live nearby and have met up a few times since, which is really nice since my position is fully remote. On the flip side, the general vibe at the conference felt much more professional and “business-like”. The lunches and social events were a bit more upscale than the events in Berlin, but that certainly didn’t stop them from being fun! My attendance at this conference really opened my eyes to the world of GIS and helped me see how important Esri is to the U.S. federal government. I was also able to gain confidence in my presentation skills after giving a technical talk alone and having it turn out to be a success.

Conference #3: Esri Developer Summit 2023

My third conference experience this past year was the Esri Developer Summit 2023 in Palm Springs, CA. This is Esri’s largest annual event for developers, so I knew I was in for a treat. Not only was this my first time in California, but it was also the first time I was able to meet all of my team members in person! Since my team is spread out all over the U.S. (and one in Spain!), I was thrilled that we were all going to be together at one event.

My first task was to present several demos on the plenary stage. This act wasn’t new to me at this point, but unlike in Berlin, the stakes were much higher. The crowd of people watching in person was at least five times as large, not to mention even more virtually, as the event was also simultaneously being live-streamed. The demos I presented were, in total, a bit longer than at FedGIS and in Berlin, so you better believe I was reciting my lines everywhere (in the shower, on the plane, while exercising, etc.)! The preparation for this was immensely more intense. When I arrived on Sunday, I went straight to a rehearsal for first-timers presenting there in Palm Springs, where I ran through each of my demos twice on stage.

The next day, we had another rehearsal where we first discussed the overall structure and expected etiquette, ran through a queue-to-queue, and individually performed our demos twice. Afterward, we went to dinner, and the next morning was go time! We all had our hair and makeup done behind the stage, our outfits were checked for quality, and pep talks were given. Once it was all said and done, everyone did an amazing job with their demos! This was the most relief and excitement I had ever felt after being on stage. It was truly exhilarating! If you’re interested, the entire plenary is available to watch on Esri’s MediaSpace.

Right after the plenary, I had just enough time for lunch, after which I was scheduled to give a demo theater talk. Demo theater talks are a bit different from technical talks or workshops in their format and structure. The room where I presented wasn’t a room at all but instead a closed-off space (with light “fake walls”) from the expo showcase room. So, all of the noise from people wandering and chatting at the expo booths came through. Not to mention, there was another person presenting right next door to me. So, when we both started speaking through our microphones, it felt a little like a battle to be heard. Also, I had the first demo theater talk of the day, so people were piling in late since they weren’t allowed into the expo area until right when my talk started. Even though the setup wasn’t ideal, the talk went well! This 30-minute talk was the same topic as the one I had previously given in Berlin, so I luckily didn’t have too much to prepare. As I mentioned, many showed up late, but within the first 7–8 minutes, the room was full with an overflow of people standing in the back! I was thrilled to be presenting in front of such a large group. Afterward, I was able to chat with many people, provide additional resources, answer their questions, and get some feedback.

Later that day, I signed up to participate in “SpeedGeeking”. This is a little like speed dating, but instead of “dating”, attendees rotate to different presenters and listen to a 5-minute short talk. There is about a minute between rotations, and this lasts for about an hour. Presenting in SpeedGeeking turned out to be exhausting but also an excellent way to interact with developers by showing them some cool ways I had customized apps with Esri’s technology. I may have gained a sore throat from speaking so quickly in bursts, but it was well worth it to see developers take some ideas from me, ask questions, and give me suggestions. I can’t wait to be able to do this again at future conferences!

For the rest of the conference, I was able to relax a bit as I was tasked with helping at a “developer experience” booth and assisting with user presentations. Hearing the different presentations and seeing the ways in which customers are using Esri’s technology was inspiring. I was able to chat with the customers about their experiences, take pictures of them presenting for their own personal use, and make a few notes for some future ideas.

As with each Esri conference, I attended this year, the social aspects of things were not lacking! As I mentioned, Tuesday evening was the “meet the teams” event full of great food and drinks. On Wednesday evening, I was invited to attend another social event with many of my coworkers in a nice poolside area. Then, Thursday evening was the fun end-of-the-event party! Along with even more good food and drinks, there was a fun adult bouncy house and a dodgeball tournament. The tournament is something people take seriously, so if you get to attend the Esri Developer Summit, be sure to watch so you can heckle, laugh, and cheer!

The Esri Developer Summit was an event I certainly plan to attend again in the future. It was an incredible experience to be surrounded by thousands of developers who are there to learn, teach, experience, and grow. I left this event having experienced some of the proudest moments in my new career, having connected with all of my team members, having reconnected with some distributors I had met in Berlin, and having collaborated with several other developers.

Conference #4: Esri User Conference 2023

The fourth and most recent conference I attended was Esri’s largest conference each year, the Esri User Conference (UC for short) in San Diego, CA. With over 15,000 attendees in person and even more virtually, this event was quite the production! The event was held at the enormous San Diego Convention Center, right near the water. Such a huge event required a large number of staff as well. I was thrilled to see people I had met at previous conferences everywhere I went. It was a bit comforting, and it motivated me to engage with even more people.

As a developer advocate, this conference wasn’t geared toward my target audience. However, like at FedGIS, there was a developer day, along with some developer-focused sessions. My first task was to co-present a technical talk with my manager and a fellow colleague during the first day of the event (other than the plenary). This was a talk titled “Esri’s Location Services for Developers”, which along with open source integrations, has been my main focus with Esri since I started, so I was more than happy to help present! The talk was well-attended, especially for a non-developer-focused conference, with about 75–85 people in attendance. Afterward, we each were asked a plethora of questions, which I was very happy to be able to answer. This was also a great opportunity for us to shout out the developer day track occurring the next day and the developer booths at the showcase expo.

Later that day, I attended a rehearsal for the developer day opening session. For this, I was tasked with presenting even more demonstrations than I had ever done before. I felt a mixture of excitement with a bit of nervousness. Unfortunately, we were set up to present while sitting down once again. I reminded myself to sit up straight to better engage with the audience. The next morning, the developer day opening session began at 8:30 a.m. About halfway through, there was a break, after which I was to go on stage to start the second half. However, these were only two of my demos. I later came back on at the very end to present a few more demos related to open source libraries. The time between my presentations was something I hadn’t quite experienced before, and the emotions were definitely a bit new. I was relieved to have done well on my first demos, but I found it difficult to wait until the end to present again. However, after getting back on stage a second time, I was actually quite happy to be able to go again, as I really do love presenting. After the session, I was able to have some great conversations with customers, with whom I was later able to show off more of our developer resources while at the booth.

My final task at UC was to help at the ArcGIS Platform booth in the developer section of the expo. The expo area in the San Diego Convention Center is huge, which was quite a sight to see but did make things a bit difficult, especially for my colleagues and me. This was because often, we’d get specific questions about location services, experience builder, and other less-developer-focused topics that we’d then be obliged to help walk over to the correct area. However, the experience was still wonderful, as I was able to chat with many new developers and users looking to advance or get into their development journey. The ability to speak with new audiences was quite invigorating and validated my newly found passions in my new career choice.

The time I spent at the Esri User Conference gave me insight into how passionate so many people are about GIS, in a way other conferences had not previously done. When looking for a new role, after deciding to leave teaching, I knew I wanted to get into tech and web development. I just wasn’t sure what kind of company and/or role would be right for me. When I discovered the position of Developer Advocate at Esri, I loved the sound of being able to present at conferences, do content creation, collaborate and inspire other developers, and assist with bettering the Esri developer experience. The role sounded adjacent to teaching in a lot of ways, which really grasped my attention and has thus far lived up to my expectations. What I did not know was the amazing world of geospatial thinking that I had never previously been exposed to but would soon come to love and embrace.

Summary

A year ago, I had no idea how lucky I would be to have all of these wonderful experiences. The time I spent presenting, collaborating, socializing, learning, and listening has been invaluable to my growth in my new career. Although attendance at these conferences has only made up a portion of my role and responsibility as an Esri Developer Advocate, these events have been some of the most impactful experiences for me and other developers.

Transitioning from a teaching career to a tech-focused role was one of the hardest and scariest things I’ve done in my life. However, my experiences at these conferences have validated my decision. Each conference added a unique layer to my understanding of developer advocacy, the developer experience, and the world of GIS. From overcoming nerves to relishing the thrill of presenting, I’ve come to embrace the role of a developer advocate with renewed enthusiasm and optimism.

If you attend one of these Esri conferences this upcoming year, I’d love to meet you! Let’s connect, chat about developer things, and share ideas. Also, keep an eye out for my next article where I’ll be sharing my advice and takeaways from these conference experiences. Here’s to this next year and the exciting possibilities it holds!

AI is a Teacher’s New Best Friend 🍎

Courtney Yatteau — Fri, 12 May 2023 18:46:15 +0000

AI is a Teacher’s New Best Friend 🍎

Thoughts from a former math teacher 👩‍🏫 and current developer 👩‍💻

Since the release of ChatGPT in November, many educators and schools have been panicking over its effect on their classrooms, lesson plans, and students. These concerns are rightfully warranted! However, instead of focusing on the potential risks that powerful AI tools can pose, I’d like to focus on how teachers can potentially use these tools to create better learning experiences for their students and maximize their productivity. After all, AI isn’t going anywhere, so why not look for reasons to love it?

Disclaimer: These are my personal ideas and opinions based on my teaching and coding experience.

Unique Test Question Generator

Creating interesting, different, and thoughtful questions for assessments as a teacher was the bane of my existence. To give non-teachers a bit of insight, imagine teaching the same course at three different class times on an alternating schedule. For example, one year I taught precalculus during 2nd period, 6th period, and 7th period. Our daily schedule was designed to have odd-numbered periods and even-numbered periods every other day (known as “red” and “blue” days). So, say I gave a test first on a “red” day. This would result in my even-numbered periods having the potential to hear about the test questions beforehand, giving them an unfair advantage. And don’t even get me started on the potential for cheating by reading a nearby partner's work. Having many versions of an assessment was always a necessity.

For a bit more context, having been a math teacher, I used to try to be clever with changing the numbers in factoring or slope problems, the language in word problems, and the strategy in derivative or combinatorics questions. Coming up with new questions for several versions of the same assessment would take several hours a week. By the end of my 10 years of teaching, I was burnt out, and honestly, a lot of times I would just say to heck with it and create only two versions.

Before public access to AI became popularized, I would use tools like Wolfram Alpha, Desmos, Kuta Software, and even my own math question generator I coded in my spare time. As you can imagine, having AI would have saved me a great deal of time in question creation for these assessments. Simply give the AI a prompt or topic, and watch the magic happen!

Entertaining Learning Tool

All good teachers, or most teachers, for that matter, know that in order to get students to really learn, you have to make your lessons engaging and entertaining. Simply standing up at the front of the room and lecturing isn’t enough and, frankly, isn’t even classified as “teaching” in my opinion. The best teachers know that “facilitate is how to educate”. In other words, a teacher should design lessons to be student-centered, where the students are in control of their learning and the teacher is there to guide and redirect them as needed. This, however, is easier said than done.

To get students to take control of their learning, teachers must come up with creative and fun ways to ensure they are interested in the topic. When I was a teacher, I would spend hours coming up with guided learning paths for different styles of learners using a plethora of resources. For example, instead of assigning all students a guided worksheet, I would give four options: 1) A guided worksheet, 2) A video-guided experience where students would interactively answer questions while watching a video, 3) A virtual lesson where students are guided through a series of “slides” and questions to answer throughout, 4) A physical or virtual “card game” that’s basically the same as the previous example, but the platform looks a bit different. Each of these virtual options came with different kinds of “rewards”, so students often picked one of these. The amount of time and effort each of these lessons would take to create was quite overwhelming.

Now, with AI tools at our fingertips, I imagine these learning experiences can be generated at a much quicker pace with a lot less effort. There are even learning tools that have started to embrace AI, making the process of finding and creating engaging lessons even easier.

Personal Email Responder

Having to answer emails is certainly not unique to teachers, but it is most definitely a time-consuming task. For teachers specifically, emails come in daily from parents, students, fellow educators, administrators, counselors, IEP managers, and so on. Giving the proper time and care to respond to each of these *usually *important messages can be overwhelming. There’s the task of simply reading the message, then coming up with a response, grammar-checking that response, having the response peer-edited, and finally sending it.

However, thanks to AI, each of these time-consuming processes can be significantly reduced. For the simple task of digesting the email, a voice reader can save time if hearing a message allows you to process information more quickly. Next, generating and grammar-checking a response is an easy enough prompt for an AI to handle. Peer editing is a bit trickier. I would suggest asking for the general tone of a message and/or sentences to gauge how the response may make a person feel. Once you’ve finished, sending the email is easy enough!

Answer Key Creator

As an IB Math teacher, there were times when I would come across a great sample question, but no answer would be provided. To get that answer, I generally came up with it on my own or with a little internet search assistance. However, if you’ve ever taken an IB or AP course, you know how difficult the content can be, and even with my Master’s Degree in Mathematics Education, there were occasionally times when I would be stumped. Shocker, I know! (*sarcasm) *Being a bit stubborn, I would often spend hours coming up with the solution to one question (if I liked it enough). And even then, I wouldn’t always be 100% sure about the validity of the answer.

AI to the rescue! Before I explain, I’m definitely not saying that AI will always give you the correct answer to all of your problems. It won’t. But give it an advanced mathematics problem, and it’s likely to give you a solution or at the very least guidance on how to get the solution. Here’s where AI-prompt writing skills can really shine!

Post-Analysis Report Generator

How is success measured in education? Many non-educators will probably tell you “test scores” or “overall student attitude”. However, educational success can be assessed through so much more. Teachers will often try out different techniques such as surveying students, using metrics across different classes, having colleagues give observations, and giving students impromptu check-ins. Teachers are constantly gauging the level of understanding among their students through formal and informal assessments. These techniques often require a lot of time and preparation.

Enter AI! Imagine having a tool that can listen in on a lesson and give detailed information back about student engagement based on voice tone and language. Or even judge common themes over multiple class periods. How about generating reports on the most missed questions or the most used vocabulary terms from short answer questions? The possibilities here really feel limitless.

Educator Advancement Tool

One of the main reasons I went into education and why so many teachers do is for a love of learning. Being a “lifelong learner” is vital to many fields, especially education. In fact, teachers in many states are required to gain a certain number of points before their license renewal is approved. These points can be earned through a variety of activities, most of which involve taking courses to further one’s education.

Now, I’m not saying that AI will be able to replace these required courses or tasks. However, educators can utilize AI to ensure they are up-to-date with the latest advancements in their field, ensuring their knowledge is current and relevant. This will not only make teachers’ lives easier when learning new things in their required classes but also help them convey the latest and greatest advancements to their students.

Cheating Device

Why not end this list on a more humorous note? Over my 10 years in education, I saw many trends among different types of students. One topic that seemed to pervade all students, regardless of status, was cheating. Every human has been tempted to cheat at some point, and most do. It’s only human to look for an easy way out at times. What does differ among students, especially when looking at financial means, is the degree of access to cheating. I have seen parents pay for “tutors” for their children only to have the “tutor” do all of the work. Or students gaining access to advanced, expensive tools, giving them an edge over less financially able students. It’s a topic that has always bothered me, but in the society we live in, it’s not surprising.

Welcome AI! You have come to the rescue. Or at least somewhat. With ChatGPT and other AI tools being readily and freely accessible to all students, regardless of financial status (to a degree), cheating has officially been “normalized”!

Summary

And that’s a wrap! I’ve laid out seven different reasons why teachers should truly embrace AI. All of these ideas come with caveats in that I have not implemented them in the classroom myself. I career-changed last August into tech and have no plans of looking back! Nonetheless, I hope this provides teachers with a bit of inspiration and maybe some new ideas!

Now, it’s time for you to move aside, you sweet-talking, apple-giving, sucking-up kiddos! A new teacher’s pet is in town, and its name is AI!

Courtney Yatteau, a Developer Advocate at Esri, wrote this article. The opinions in this article are solely Courtney’s opinions and do not necessarily represent the postings, strategies, or opinions of her employer. If you have any feedback, please like and/or comment. Also, you can contact Courtney through Twitter if you have any questions or comments that you’d prefer to send privately.

Virtual Programs that Help Women Break into Tech

Courtney Yatteau — Fri, 28 Apr 2023 13:33:50 +0000

In celebration of International Girls in ICT Day!

As a woman in tech, this topic is near and dear to my heart. Below, I have laid out a list of a few different 100% remote programs helping women break into tech!

SheCodes

Website: https://www.shecodes.io/
Course(s): SheCodes BASICS, SheCodes PLUS, SheCodes PRO, and SheCodes MAX
Location: 100% Online
Duration: 1 week — 8 months
Price: $99 — $1990
About: SheCodes is a company that offers self-paced coding workshops that teach women coding. These courses are geared around web development topics and are appropriate for almost any skill level (especially beginners!). Students who enroll in SheCodes have four options when signing up and new workshop course tracks start every Monday. SheCodes is rated 4.9/5 stars with over 150,000 women having taken SheCodes courses (including myself!), so it’s definitely worth looking into! **BONUS **— SheCodes now has its own AI that can help you solve your coding problems and practice your coding and interview skills!

Grace Hopper Fullstack Academy

Website: https://www.gracehopper.com/
Course(s): Full-time Software Engineering Immersive, Part-time Software Engineering Immersive, Intro to Coding Prep Course, and Bootcamp Prep Course
Location: 100% Online
Duration: 4–7 months
Price: $17,480 — $19,910 (with a $2,000 deposit needed upfront)
About: Grace Hopper started in January 2016 in an effort to help minimize the gender gap in the tech industry. They pride themselves on being centered on combating systemic barriers while offering a stellar curriculum and program. The courses offered include a full-time and a part-time option which helps individuals choose how much time they can take to dedicate to the bootcamp. Course curriculums are JavaScript focused setting up students for a career in web development. Grace Hopper has a rating of 4.8/5 stars and over 7,000 successful alumni with these students being hired into companies such as Google, Spotify, and Etsy.

allWomen

Website: https://www.allwomen.tech/
Course(s): Bootcamps and Courses related to ****Data Science, Data Analytics, Web Development, UI/UX Design, and Product Management
Location: 100% Online
Duration: 10 weeks — 24 weeks
Price: $493— $7659 (early bird & full-payment registration discount options are available)
About: This company is run by women and for women. ****allWomen is a bootcamp that puts an emphasis on developing female leaders and strengthing women’s interpersonal skills.

Hackbright Academy

Website: https://hackbrightacademy.com/
Course(s): Full-time Software Engineering Program, Part-time Software Engineering Program, and a Prep Course
Location: 100% Online
Duration: 5–24 weeks
Price: $250 — $12,900
About: Hackbright Academy focuses on helping women and non-binary people work towards a career in tech. The software engineering courses differ from the others above in this list in that their focus is primarily on Python. Students do still learn web tech basics (HTML, CSS, Bootstrap) but a JavaScript focus doesn’t exist. The company has a very high success rate with 99% of students graduating. Student alumni have gone on to work at places like Amazon, Eventbrite, and Dropbox.

Conclusion

Above are just four options that, after my research, appeared to be some of the best tech programs geared toward women. There are an exceptional number of other programs, bootcamps, and courses with a more general population focus, so be sure to do your own research to see what best suits your needs! HINT: I recommend CareerFoundry — it’s what helped me break into tech!

DEV Community: Courtney Yatteau

My Third Year as a Developer Advocate: Talks, Tech, and Teaching

CityJS Medellín

DevIgnition and Code & Cloud

CodeMash

Esri FedGIS and nor(DEV):Conference

Esri Developer & Technology Summit, RVAJS, and Frontrunners

Techorama Belgium

Esri User Conference and Nebraska.Code

dev up, Beer City Code, and KCDC

People Along the Way

Beyond Conferences

Wrapping Up Year Three

AI-Driven Mapping Data Insights from Gemini

Why Gemini + GIS?

1. Project Setup

1.1 Create your files

1.2 HTML skeleton

1.3 Include ArcGIS JS SDK & Calcite

1.4 ArcGIS API key

2. Build the UI

2.1 Layout the map and controls

2.2 CSS for layout

3. Gemini Query Logic

3.1 The fetchCountriesFromQuery function

4. Highlighting on the Map

4.1 Initialize map reference

4.2 The highlightCountries function

5. Wire Up User Interaction

6. Test & Iterate

Conclusion

Enhance Your ArcGIS Web App with OpenAI

AI + ArcGIS JS SDK Project Setup

HTML Setup

CSS Setup

JS Setup

Final App in Action

Conclusion

My Second Year as a Developer Advocate: A Journey Through Different Conferences

From Teaching to Tech: Year Two (Aug 2023 — Aug 2024)

FOSS4G NA 2023: Embracing the Open-Source Geospatial Spirit

Frontrunners Conference 2024: A DC Web Developer’s Event

Women in Tech Summit Spring 2024: Empowerment Through Education

React Rally 2024: Gamification and Frontend Fun

Carolina Code Conference 2024: A Fascinating Polyglot Experience

Wrapping Up Year Two

A Developer's Guide to Using Custom Basemaps in Your Web Apps

Table of Contents

Steps

Common Integration Steps

ID

Getting the Item ID of your Basemap

Steps to Get the Item ID

Leaflet

MapLibre

MapLibre GL JS

ArcGIS

ArcGIS Maps SDK for JavaScript

Hosting

Self-Hosting and Using JSON in Another Mapping App

Conclusion

Creative Map Styling Techniques for Web Developers

Choosing the Right Basemap 🗺️

Basemap Details

Applying Basemaps in Urban Settings

Customizing Layer Styles 🌐

Layer Styles Details

Real-World Layer Styling: Making Streets Pop

Color Editing 🎨

Color Details

Transforming Colors

Editing Icons and Patterns 📍

Icon & Pattern Details

Custom Icons in Action

Directly Editing the JSON 👩‍💻

JSON Style Details

Hands-On JSON Styling

Conclusion

Map Styling for Web Developers — Quick Editing

Introduction