For Moonlight Garden Supply

Five Ways to Put Your Installations on a Map

A comparison of tools — from free journalism-grade embeds to fully custom illustrated maps — with hosting requirements, Shopify compatibility, and what you'd need to learn to execute each.

You've done real work in real places. A portfolio map shows that — clients browsing by region, clicking through to see what you installed, coming in already half-convinced. The tools to build this range from "working in an afternoon, no code" to "fully designed and coded, looks exactly like your brand." Hosting requirements and subscription costs vary significantly between them, and if your website runs through Shopify that shapes the decision considerably.

If your website is on Shopify

This came through a friend — if it's wrong, skip this section. But if Moonlight Garden Supply runs through Shopify, this is the most important part of the decision.

What Shopify can and can't host: Shopify hosts your store pages, product listings, and custom pages you create in their editor — but it's not a general web host. You can't upload arbitrary HTML files and serve them at a URL. What you can do is paste an iframe embed code into a Shopify page, which is exactly how Datawrapper, Flourish, and Mapme all work. Custom-built maps (MapLibre, SVG) can't live on Shopify itself, but they can live at a free subdomain that links seamlessly from your Shopify site.

✓ Works inside Shopify

  • Datawrapper — paste iframe into any Shopify page. Free.
  • Flourish — same. Free.
  • Mapme — same iframe embed. $30–55/mo subscription.
  • Individual installation landing pages can all be standard Shopify pages regardless of which map tool you use.

→ Links from Shopify, lives elsewhere (free)

  • Custom MapLibre map — hosted free on Cloudflare Pages at something like map.moonlightgardensupply.com. Invisible to visitors — just looks like part of your site.
  • Custom SVG illustrated map — same. Your Shopify pages can link to it or embed it in an iframe.
  • Cloudflare Pages hosting is free for this scale, no subscription.

$ Ongoing subscription costs

  • Mapme: $30–55/month — the only tool here with a required subscription after setup.
  • Datawrapper and Flourish are genuinely free (small attribution footer on embeds). No subscription, no trial expiry.
  • Custom builds: $0/month ongoing. One-time effort to build; free hosting forever.

Bottom line for Shopify sites: Datawrapper or Flourish embed directly into a Shopify page at zero cost — lowest friction path. Mapme does the same but costs $30+/month. A custom-built map needs free separate hosting but gives you full design control and no ongoing fees. The installation landing pages themselves can always be Shopify pages no matter what you choose for the map.

Before choosing a tool

Who updates it when you add a new installation?
If it's just you, a few times a year — any tool works. If multiple staff need to add content without touching code — you want Datawrapper, Flourish, or Mapme (CSV or spreadsheet update). A custom build requires editing a JSON file or having a developer add a row.
Should the map feel like your brand, or just work well?
No-code tools give you a competent, professional map fast — but it'll look like the platform. A custom build can look like anything. The illustrated SVG demo shows the ceiling of the custom path. Neither is better — they're different trades.

The aesthetic spectrum

Datawrapper
Flourish
Mapme
MapLibre
SVG
Clinical / journalistic Configurable Fully custom

The tools

Datawrapper

Locator map precision. Journalism-grade legibility.

Free (small attribution footer) No code ✓ Embeds in Shopify

Used by the New York Times and Reuters for data graphics. Their locator map tool places markers on a base map — each with a popup that includes text, a photo, and a link to an external page. Free tier gives unlimited maps and markers; the attribution is a small footer link.

You update locations by editing a CSV and re-importing. The embed is one line of iframe HTML that drops into any Shopify page.

Hosting & cost Datawrapper hosts the map. You embed it. No account needed beyond a free Datawrapper signup. No monthly fee, no trial that expires. If you only need the map in Shopify with no separate site, this is the shortest path.

What you'd learn

  • Structure a CSV with lat/lon columns
  • Datawrapper's map editor (visual, takes an hour)
  • Embed an iframe in a Shopify page

Resources

datawrapper.de — free signup academy.datawrapper.de — training library
Right when: You want something live fast, the journalism aesthetic is fine, and one person manages content via spreadsheet. Also the most resilient option — Datawrapper keeps running even if nobody touches it for months.

Flourish

More visual range than Datawrapper. Still template-bound.

Free (small attribution footer) No code ✓ Embeds in Shopify

Same category as Datawrapper — journalism-grade, free, CSV-driven — with more visual templates and icon options. Marker popups support images and external links. You can get closer to "designed" than Datawrapper allows.

Try both. They're both free. Spend 30 minutes with each and pick the output you prefer.

Hosting & cost Flourish hosts the map. Embed via iframe in Shopify. No monthly fee. Same deal as Datawrapper — completely free to start and maintain.

What you'd learn

  • Connect a Google Sheet as a live data source
  • Flourish's template editor and icon options
  • Same iframe embed as Datawrapper

Resources

flourish.studio — free signup, explore templates help.flourish.studio — documentation
Right when: Datawrapper's output feels too clinical and you want more visual control without writing code. Also good when multiple people need to add locations — connect a shared Google Sheet and anyone with access can update the map.

Mapme

Built specifically for portfolio maps. The subscription is the trade-off.

$30–55/month (required after 14-day trial) No code ✓ Embeds in Shopify

Unlike Datawrapper and Flourish (general data viz tools), Mapme is built for "where we've done work" portfolio maps — NGOs, consultancies, project-based businesses. Spreadsheet-driven, rich marker cards with photos and filtering, team collaboration. Looks more like a product than a visualization.

No free tier. After the 14-day trial, it's $30/month minimum. Mapme hosts the map; you embed it in Shopify via iframe, same as the free tools. Verify current pricing before committing — subscription costs change.

Hosting & cost Mapme hosts the map. Embeds in Shopify. $30–55/month ongoing — this is a subscription product with no free tier after the trial. Weigh this against the free options: Datawrapper and Flourish do 80% of the same job at $0/month.

What you'd learn

  • Mapme's visual editor and CSV format
  • Category taxonomy for filtering (system types, regions)
  • Same iframe embed in Shopify

Resources

mapme.com — 14-day free trial

Strategy: Don't start the trial until you have real content for 5+ installations. Evaluate it with actual data, not placeholders.

Right when: Budget allows $30–55/month, multiple staff manage content, and you want the fastest path to something that looks purpose-built. The cost buys you not having to maintain code.

Custom Build: MapLibre GL JS

Full design control. Geographic tile map. Free hosting.

$0/month (Cloudflare Pages) Requires JavaScript → Separate hosting (free)
See live demo →

MapLibre GL JS is the open-source fork of Mapbox GL — GPU-accelerated, vector tiles, smooth at all zoom levels. Free tile providers (Stadia Maps, Maptiler) have generous free tiers. You write JavaScript to initialize the map, load location data from a JSON file, and add styled markers. Everything — marker design, popups, surrounding page layout — is fully custom.

Location data lives in a clients.json file. Add a new installation by editing that file and pushing to GitHub. Cloudflare Pages re-deploys in under a minute.

Hosting & cost Can't be hosted on Shopify directly — needs its own home. Free hosting on Cloudflare Pages at a URL like map.moonlightgardensupply.com (you add one DNS record in your domain settings). Shopify pages link to it, or you embed it via iframe. $0/month ongoing, no subscription, you own the code. For the map tiles (the actual street map underneath), use a free Stadia Maps or Maptiler account — CartoDB raster tiles work for testing but have usage limits in production. Installation landing pages can still be regular Shopify pages.

What you'd need to learn

  • HTML, CSS basics
  • JavaScript: variables, functions, fetch()
  • JSON format for location data
  • MapLibre GL JS API (markers, popups, events)
  • Git + Cloudflare Pages for deployment

Realistic effort

Starting from zero: 20–40 hours to be comfortable. With Claude Code building it and explaining what it wrote: one weekend to a working v1.

Resources

maplibre.org — docs and examples MDN JavaScript Guide Cloudflare Pages — free hosting setup
Right when: You want to own the code and the design, you're willing to learn (or have Claude Code build and explain it), and you want a $0/month solution you fully control. Everything you learn transfers to any web project.

Custom Build: Illustrated SVG Map

A drawing that thinks it's a map. The highest design ceiling.

$0/month (Cloudflare Pages) Requires SVG + JS + design work → Separate hosting (free)
See live demo →

Instead of a geographic tile map, this starts with an SVG drawing of Utah — approximate, stylized, illustrated. You design the map as art. Markers are SVG shapes with custom icons. The whole thing can feel like a poster that happens to be interactive. The ceiling scales with your design ability; the platform doesn't constrain the palette, marker shapes, or typography.

Trade-off: location placement is approximate (you're placing dots on an illustration, not at GPS coordinates), and it doesn't zoom like a geographic map. For a portfolio map that's fine — you don't need GPS precision.

Hosting & cost Same as the MapLibre custom build — can't live on Shopify, needs free Cloudflare Pages hosting at a subdomain. $0/month ongoing. Shopify pages link to it or embed it. No subscription, you own everything.

What you'd need to learn

  • SVG path syntax for the Utah outline
  • SVG shapes and coordinate math for marker placement
  • JavaScript event listeners (click, hover)
  • Inkscape or Illustrator for drawing the map

The design path

Draw the Utah outline in Illustrator → export as SVG → paste into HTML → style with CSS → add marker elements → wire up click interactions. The demo shows this working.

Resources

MDN SVG Tutorial inkscape.org — free SVG tool mapsvg.com — free Utah SVG outline to start from
Right when: The map should feel like the brand, not like a tool you used. You have design skills the platform tools don't have room for. Higher upfront effort — significantly higher ceiling.

Before you build

What you need regardless of tool

The tool is only as good as what goes into it. This content is portable — it works in every option above.

Lat/lon for each location (right-click in Google Maps → copy coordinates)
4–6 installation photos per location — hero shot plus a before/after pair if available
One-paragraph plain-English description per installation (written for someone new to hydroponics)
System type taxonomy — what categories will markers filter by?
Location and likeness release confirmed with each client (public mapping, photos, name use)
Decision on client name visibility — named business or "a restaurant group in Murray"
The hybrid worth considering Use Datawrapper or Flourish for the map (free, no hosting, maintained by someone else, embeds in Shopify) and build the installation landing pages as Shopify pages. Zero monthly cost. Full design control on the pages that actually do the selling. The map is just the navigation.
How this guide was made

This guide was built using Claude Code — the same tool mentioned in the MapLibre section. Here's what that process actually looked like.

1

The ask

A friend who works at Moonlight Garden Supply wanted to put their client installations on a map. No spec — just the idea: "show where we've done work, let people click through to see what we built." The business runs on Shopify. The designer is capable. No one knew what tool to use.

2

First research pass

An AI research agent surveyed the landscape: fetched the Moonlight Garden Supply website for context, then surveyed available mapping tools. The first draft covered eight options — Google My Maps, StoryMapJS, Felt, ArcGIS StoryMaps, Webflow + Mapbox, plain Leaflet, and a couple of others.

What was wrong with it: Datawrapper, Flourish, and Mapme — three of the most relevant tools for this use case — were entirely absent. Framer was incorrectly recommended (it has no native map component). The guide suggested Leaflet when MapLibre GL JS is the current standard for this kind of work. No Shopify compatibility section. No guidance on the design question ("cute or professional?").
3

Critique before building

Rather than publishing the first draft, we wrote an explicit critique of it — identifying every gap and questionable claim. This became the spec for a second, more targeted research pass: confirm whether Datawrapper and Flourish actually support the clickable-marker-to-external-page workflow, verify Mapme's pricing and embed capability, confirm MapLibre's current production status.

The critique step is where most of the value was generated. It's also the step that's easiest to skip.
4

The Shopify constraint reframes everything

The second research pass confirmed the missing tools — but the more important realization was structural. If the business is on Shopify, the hosting question isn't a footnote; it's the central decision. Three tools embed directly via iframe. Two require free separate hosting. One requires a paid subscription for the same iframe capability. That distinction shapes the choice more than any feature comparison.

The Shopify section moved to the top of the guide. Every tool card got an explicit hosting callout. The spectrum shifted from "simple to complex" to "clinical to fully custom," which is the more honest dimension for this decision.

5

Working demos, not mockups

The MapLibre and SVG demos are functional — click markers, filter by type, see a detail panel appear. The code sections are annotated with real comments. The SVG demo uses actual coordinate math to place markers at accurate lat/lon positions. A screenshot would have conveyed the point. A working demo tells you something a screenshot can't: this is actually buildable, and here's approximately how.

The SVG demo carries an explicit disclaimer: "This is vibes, not a design direction." The designer receiving this guide is more capable than the demo. The point was to show what's technically possible, not to propose a palette.
6

Pre-ship critique

Before deploying, we went back through every factual claim. Three things needed fixing: Mapme's pricing section had no caveat that prices change; the MapLibre hosting callout didn't explain that CartoDB tiles have production usage limits; the code walkthrough claimed ~120 lines of JavaScript when the actual demo is ~200. The claims that held up: Datawrapper/NYT citation, Flourish free tier, MapLibre as open-source Mapbox fork, all external URLs live.

7

Deployment

Four static HTML files and one CSS file. Hosted on Cloudflare Pages — the same free hosting the guide recommends for custom map builds. No build step, no framework, no dependencies beyond MapLibre GL JS loaded from a CDN. Total time from first file to live URL: under two minutes.

The meta point: This guide was produced through roughly the same process it describes for the custom map paths — iterative research, explicit critique, working demos, pre-ship review. Claude Code wrote the code; a human directed the research, caught the gaps, decided what mattered, and made the judgment calls about framing. The guide took one working session. The demos are functional. That's what the tool is for.