Web Tools Weekly
Tools for Web Developers

Issue #583  (No Code Map App Review, React, Testing, Git/CLI)09/19/24

The following is a paid product review for No Code Map App, a platform for building custom interactive maps from almost any data source, no coding required.

It's pretty common to find maps on websites and apps today. Whether you're a solo developer or working for an agency or other business, it's possible you regularly need to implement some kind of mapping solution.

That's where No Code Map App comes in. No Code Map App is a simple but powerful solution for easily building and including interactive and fully branded maps in any app or website, powered by Google Maps.

No Code Map App

Some of the primary features of No Code Map App are:

  • Import up to 50 columns of custom data from any spreadsheet, Google Sheets, Airtable, or Webflow CMS
  • No coding required, so it's easy for beginners but feature-rich and powerful for professional engineers
  • Customize anything and everything, including color, font, map filter, image,  language, and more
  • Performance data allows you to track how well your maps are doing

After you sign up for an account, you can immediately start building your custom maps using a simple 3-step process.

Step 1: Choosing a Template
The first step is to select one of the prebuilt templates. Current available templates include general, timeline, event calendar, restaurant, product locator, property, and real estate.
Choosing from prebuilt templates on No Code Map App
Choosing from prebuilt templates on No Code Map App

Step 2: Choosing a Data Source
After you've selected a template, step two is to import your data. You can copy and paste from a spreadsheet or import from Google Sheets, Airtable, or Webflow CMS. Depending on the data source you choose, you'll be asked to enter the necessary info (URL, API key, etc.) to generate the map using your data.

Choosing a data source to generate your No Code Map
Choosing a data source to generate your No Code Map

If you're using Google Sheets, Airtable, and Webflow CSM, after you've connected your data, you can set up automatic data sync so you don't need to login again to sync new data. You can choose how frequently you want to update your data – daily, weekly, biweekly, or monthly. Hourly data sync is also in the pipeline and will be available starting next week.

CSetting up auto data sync in No Code Map App
Setting up auto data sync in No Code Map App

Step 3: Customizing Your Map
Once you've selected your data source, the third step is to customize your interactive map using more than a dozen different settings including:

  • Add custom map filters that users can apply to the current map view
  • Embed images, audio, and video to each location
  • Add calls-to-action and connect your favorite apps to your map
  • Adjust the font and colors for various map elements
  • Customize what items to show in the pop-up box when a location is selected
  • Change the appearance of the map marker
That's just a small sample of the 15 or so settings, many of which have various ways they can be customized, making the customization options quite extensive while being easy to use.
Viewing the different customization options in No Code Map App
Viewing the different customization options in No Code Map App

The customization settings also allow you to add or remove various elements to supercharge your map's interactivity, including custom map zoom, a search bar, and visitor's current location.

Maps commonly allow users to click locations directly on the map itself or view those same locations with further info in a list view. No Code Map App allows you to customize your map's list view by choosing one or two columns and defining which fields to show and what kind of data to display for each location.

Customizing a map's list view in No Code Map App
Customizing a map's list view in No Code Map App

One popular map type that's available using one of the templates is the Store Locator map. This could be used by businesses that want to list all store locations or all possible vendors for their products. You can check out an example store locator map here.

An example of an interactive Store Locator map
An example of an interactive Store Locator map

If you want to create your own store locator map, select the "Product Locator" template before entering your data source. From there you can customize as needed using any of the aforementioned settings depending on the needs of your map.

Publishing Your Map
Once your map is complete, you can use the Publish button to make the map public. Toggle the "Publish this map" option to enable publishing for the map, then you'll have the option to either link directly to the standalone page or use the provided embed code.

Publishing a map using No Code Map App
Publishing a map using No Code Map App

Even after a map is live, you can update the data in your data source at any time and the changes will be reflected in the live view for anyone visiting and interacting with the map.

If you want to see some examples of No Code Map App used on real websites, you can check out their use cases page. Here you'll find a small but diverse sampling of real-world maps used by real businesses.

A customer using No Code Map App
A customer using No Code Map App for a cafe locator app

No Code Map App is an impressive solution for businesses looking to make custom, interactive maps accessible to both programmers and those who aren't so tech savvy. Just about anyone can create a beautiful, branded, easy-to-use map with this platform.

No Code Map App offers a 7-day free trial, no credit card required. After that, you can consider one of the paid plans.

So be sure to check out No Code Map App if you're in the market for a simple to use but robust interactive map building solution.

Now on to this week's tools!
 

 

React Tools

nextjs-billing — A Next.js-based demo app that can be used as a base for building subscription-based SaaS apps with Lemon Squeezy.

Gudam — A robust yet lightweight React/TypeScript state management library with a small footprint of just 1kb, featuring quick execution, straightforward implementation, and scalability.

next-safe-action — A library that takes full advantage of the latest and greatest Next.js, React and TypeScript features to let you define type safe Server Actions and execute them inside React Components.

Meco — Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds.    SPONSORED 

React-Ace — A React implementation for the popular Ace embeddable code editor. Includes a playground that lets you see the available props in action.

PlaceholderJS — A free placeholder service that integrates seamlessly with React and Next.js, offering SVG-based placeholder images via CDN or as a customizable React component.

PlaceholderJS

React Tag Autocomplete — A simple, accessible, tagging component ready to drop into your React projects, allowing users to add "tags" to a textarea, with lots of customization options.

LetsForm — A feature-rich form designer that allows you to create React forms from simple JSON using Material UI, Mantine, React Bootstrap, AntDesign, RSuite, or just React.

spin-delay — A loading spinner component for React that only shows the spinner after a slight delay, avoiding unnecessarily showing the spinner for short load times.

Sortable — A smooth drag-and-drop sort library built with Next.js, shadcn/ui, Tailwind, and dnd-kit.
 

Testing & Debugging Tools

Redirect Checker — A URL redirect analysis tool that allows you to check your redirects and status codes with detailed path analysis, bulk redirect checking, and custom user-agent selection.

Web Inspector — A web inspector similar to DevTools for iPhone and iPad that expands Mobile Safari with ability to view, inspect, edit, and search elements that make up the DOM.

Appium UiAutomator2 Driver — A test automation framework for Android devices that automates native, hybrid, and mobile web apps, tested on emulators and real devices.

Celp — A CLI tool that generates contextually relevant unit tests for Typescript-based Node.js projects, via intelligent code parsing.

Meco — Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds.    SPONSORED 

LogTape — A simple logging library with zero dependencies that offers structured logging with support for Deno, Node.js, Bun, edge functions, and browsers.

Poku — A cross-platform test runner for JavaScript that makes testing easy for Node.js, Bun, and Deno.

Poku

Croner — A dependency-free cron library for JavaScript and TypeScript, to trigger functions or evaluate cron expressions in Node.js, Deno, Bun, and the browser.

OneUptime — A comprehensive, open-source observability platform for monitoring and managing your online services.

speedbump — A TCP proxy written in Go that allows you to simulate variable yet predictable network latency.
 
Advertisement

Listen to Articles as Podcasts
Tired of finding time to read all those articles and newsletters?

With Listen Later, you can turn them into podcasts! Simply email the content, and our AI will convert it into human-like narration for your personal podcast feed.

Listen Later

Perfect for busy schedules—listen on any podcast app, wherever you are.

Get started with $2 in free credits and enjoy audio versions of your favorite reads, newsletters, and PDFs today! Sign up and make the most of your time, hands-free!

Try for Free →

 

Git, GitHub, & CLI Tools

yocto-spinner — A tiny terminal spinner that's fast, has customizable color, text, and animations, and has a single dependency.

doggo — A modern command-line DNS client written in Go that outputs information in a neat and concise manner and supports protocols like DoH, DoT, DoQ, and DNSCrypt.

ngtop — A Go-based command-line program to query request counts from nginx's access.log files.

Snitch — A Node.js package to automate GitHub issues reporting, with five different report styles to choose from in either markdown or plain text.

The Growth Newsletter — Join more than 100,000 subscribers and get top strategies and tactics used by fast-growing startups in a twice-weekly email consisting of real-world examples and data.    SPONSORED 

Git Granary — A Git Large File Storage (LFS) server implementation written in TypeScript.

fetchgit — A TypeScript package to easily download files and directories from a GitHub repository, with support for Node.js, Bun, and Deno.

Devmoji — A TypeScript-based command line tool that adds color to conventional commits, using emojis inspired by Gitmoji.

Devmoji

Opengist — A self-hosted pastebin powered by Git, where all snippets are stored in a Git repository and can be read and modified using standard Git commands, or with a web interface.

termshot — A terminal screenshot tool that takes the console output and renders an output image that resembles a user interface window.
 

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.
Blacksmith – Speed up GitHub Actions by running them on high-performance gaming CPUs.
Techpresso – A free daily email with the most interesting tech news and insights in 5 min.    AD 
Retcon – A macOS app that enables you to easily rewrite your Git history using drag-and-drop functionality.
Autoflow – A cross-browser automated testing tool for modern QA teams, no coding required.
Tech Productivity – A weekly newsletter for tech professionals who want to get stuff done.     AD 
BotGauge – A generative AI, low-code test automation tool for comprehensive end-to-end testing.
reposhare – A platform to monetize your GitHub repositories securely in minutes.

An X Post for Thought

I suppose this was innovative at the time but soon to be completely unnecessary.
 
An X Post for Thought

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Shiptalkers allows you to "find out if the person you're losing an argument to on Twitter actually ships code or if it's all just shiptalk." There's even a leaderboard! 😂

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris