Custom Markers with Leaflet

As I continue to dig into Leaflet, I was recently asked about custom markers based on data, so for example, some locations for a store may use one icon while others use another. I did some digging, and while it turns out Leaflet has deep support for customizing markers, it does take a little bit of work. Here’s what I found. First off, this is the default marker: Out of the box, this is it. Period. I can appreciate the library wanting to keep its size to a minimum, but I was a bit surprised. That being said, the library provides really flexible support for creating your own markers. The first thing I found was the tutorial, Markers With Custom Icons. In this tutorial, they describe the... more →
Posted in: JavaScript

Eleventy 3.0 Released (and in use here!)

This is just a quick note to let my readers know that Eleventy 3.0 has been released. This is a huge update and folks using it should read the full release notes here: Eleventy v3.0.0: Possums ❤️ ESM. I’ve been running a beta for a while. You can see the issues I ran into here: Upgraded to Eleventy 3.0 (Beta). I upgraded to the final version yesterday and ran into one issue, a template that output to a path without an extension. This was very clearly detailed in the error I got: [11ty] Problem writing Eleventy templates:[11ty] The template at './src/webfinger.liquid' attempted to write to './_site/.well-known/webfinger' (via `permalink` value: '.well-known/webfinger'), which is a target... more →
Posted in: JavaScript

Using Geocoding with Leaflet

When I first started talking about Leaftlet, I mentioned how it was "only" a map library, and by that I mean, only able to present a view/wrapper around tiles representing map data. There’s a heck of a lot of services that Google Maps, HERE, and so forth, add on top that won’t be present, things like routing, geocoding, and more. Considering the fact that Leaflet is, again, "only" a client-side JavaScript library, that’s just a fact of life. But I’ve been thinking about how I could integrate Leaflet with such services, and I thought I’d share a demo of just that – adding geocoding to Leaflet. WTF is Geocoding? Simply put, geocoding is converting... more →
Posted in: JavaScript

ColdFusion Component for Google Gemini

This week I had the pleasure to present on Google Gemini at the ColdFusion Summit. If you weren’t able to make it, I do plan on giving the talk again on the ColdFusion Meetup sometime later this year. After the presentation, I took my ‘rough and ugly’ code that called Gemini and decided to wrap it up in a nice ColdFusion component. This allows for (hopefully) easier use. For example: gemini = new gemini(key="your key", model="gemini-1.5-pro");result = gemini.prompt('why is the sky blue?'); And that’s it. The result variable will contain two keys, a raw value that is exactly what Gemini returned, and a text value that narrows down into the text response. Multimodal... more →
Posted in: JavaScript

Links For You (9/28/24)

Hello dear readers. I wish I could say I’ve got a restful weekend in front of me, but today we’re driving to New Orleans to pick up our eldest who has been in Germany for a year, and tomorrow we fly to Las Vegas for the Adobe ColdFusion Summit. Both are things I’m quite happy about, but it’s going to be a lot. I’m currently sitting, drinking coffee, and watching "Grey’s Anatomy", a good guilty-pleasure show. Before we get into the links, a few quick reminders. If you aren’t already a subscriber, use the form below or here to sign up for my mailing list. Right now it’s just tied to my posts and as a subscriber, you’ll get an email... more →
Posted in: JavaScript

Using Chrome AI to Rewrite Text

Earlier this month, I discussed how Chrome’s upcoming built-in AI support was adding new features specifically tailored to certain use-cases. In that post, I looked at the Summarizer API. For today, I decided to take a look at the rewriter API. As a quick reminder, this is very early on, and if you want to try this yourself, you should hit the sign-up form and read the intro post from the Chrome folks first. Obviously, everything I’m going to show below probably will, almost certainly will, change before shipping. Ok, with that out of the way, let’s talk rewriting, specifically, how the Chrome API operates. Given a set of source input, the API can shorten, or lengthen the input,... more →
Posted in: JavaScript

Dynamically Showing and Hiding Markers in Leaflet

This was originally going to be an example of using Leaflet with Alpine.js, but while working on that demo I discovered an interesting aspect of Leaflet that was a bit more difficult than I thought it would be – hiding and showing markers. Here’s how I approached the problem, and as always, if you know of a better way, leave me a comment below and share! Approach One For my first demo, I decided to start simple. First, I built a function to return a static set of data: async function getStores() { return new Promise(resolve => { let stores = [ { name: "Lafayette Store", open24Hours:true, location: { lat:30.216, lng: -92.033 }}, { name: "Baton Rouge Store",... more →
Posted in: JavaScript

Using Google Gemini’s File API with ColdFusion

I promise, I’m not turning this back into a ColdFusion blog, but as I prepare my presentation next week at Summit and update my Google Gemini code for some ColdFusion demos, I ran into a particularly gnarly bit that I wanted to share in a post. For the most part, I’ve had no issues using Gemini’s REST APIs in ColdFusion, but the File API ended up being more difficult. If you go the documentation for uploading, and use the ‘Shell’ language tab, you can see an example like so: MIME_TYPE=$ (file -b --mime-type "$ {IMG_PATH_2}")NUM_BYTES=$ (wc -c < "$ {IMG_PATH_2}")DISPLAY_NAME=TEXTtmp_header_file=upload-header.tmp# Initial resumable request... more →
Posted in: JavaScript
1 2 3 4 5 87