Custom Markers with Leaflet / / No Comments 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 Tagged with: custom, Leaflet, Markers
Dynamically Showing and Hiding Markers in Leaflet / / No Comments 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 Tagged with: Dynamically, Hiding, Leaflet, Markers, showing