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: , ,

Using Geocoding with Leaflet

/ / No Comments
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 Tagged with: , ,

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: , , , ,

Using Asynchronous Content in Leaflet Popups

/ / No Comments
Today in my <Code><Br> stream (I’ll share a link to the video at the bottom), I spent some time digging into Leaflet and worked on a demo that made use of the National Parks Service API. This is a fun API I’ve used many times in the past, especially at my last job at HERE. For the stream today, I wanted to build the following: Create a map that loads a geojson file of NPS parks. The geojson file contains the code and name for each park. On clicking one of the markers, use the NPS API to get more information about the park. In general, I’ve found everything in Leaflet to be stupid easy, but this particular aspect turned out to be a bit more difficult, which of course... more →
Posted in: JavaScript Tagged with: , , , ,

Using CSV Data with Leaflet

/ / No Comments
As I continue to play with, and really freaking enjoy Leaflet, I thought it would be interesting to show a demo of using CSV data with it. This also coincides with an interesting dataset I got from the Data is Plural newsletter, a collection of datasets covering just about any topic you can imagine. A few weeks back, they shared ancient shipwrecks covering the years from 1500 BC to 1500 AD. I know, that’s a bit random, but I thought it was kinda cool. The dataset covers near two thousand unique shipwrecks and includes information, at times, about the cargo that was being carried. I thought this would be fun to map, and here’s how I did it. Working with CVS Disregarding the map, the... more →
Posted in: JavaScript Tagged with: , ,

Building a General Purpose GeoJSON Viewer with Leaflet

/ / No Comments
Last week I shared my initial experiences with Leaflet and I thought I’d share a small demo I built with it – a general purpose GeoJSON viewer. GeoJSON and Leaflet As I mentioned at the end of my last post, GeoJSON is a specification for encoding ad hoc geographic data. Here’s an example: { "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": { "Code": "FRLA", "Name": "Frederick Law Olmsted National Historic Site" }, "geometry":... more →
Posted in: JavaScript Tagged with: , , , , ,

Mapping with Leaflet

/ / No Comments
If you missed my <Code><Br> episode earlier this week you missed (imo) a great episode. I’ll share a link to the video at the end, but I spent the session raving about how great the Leaflet JavaScript library is for maps. I had it on my list to look into for a few months now and while having a layover recently I took the time to dig into it. I was – blown away. I’ve got a lot of experience over the years working with maps on the web. I really dig Google Maps, both the JavaScript library and APIs, and I spent some time as a developer evangelist for HERE helping others learn about their offerings. I’m obviously a bit biased but I really dug their offerings as... more →
Posted in: JavaScript Tagged with: ,

Leaflet provides open source map solution – TechRepublic

/ / No Comments
Leaflet provides open source map solutionTechRepublicWhile they are standard features on our computers and devices, there are plenty of options for easily integrating full-featured maps into your applications. This week I take a look at one such option – the open source JavaScript library called Leaflet. javascript map – Google News… more →
Posted in: Interactive Maps Tagged with: , , , , ,