Forum Academy Marketplace Showcase Pricing Features

Formatting Custom Map Markers Correctly (Even Circles)

Hey all, I wanted to share how I was able to save my custom map markers in a dynamic way!

Problem

I have business users in my app, where I wanted to show their logos on a map. These are logos they upload, so I can’t control the dimensions they upload it in. As a result, almost all of the map markers were appearing GIANT on the map.

Example of this problem from an image I found in the forum:

Solution

The key to fixing this problem is to resize your map marker image at the point when it is uploaded. We want standardized sizing for each map marker; when one of my businesses uploads their logo, a map marker gets saved at precisely 48 x 48px (what I’ve found to work best).

Here’s the steps I did for my app:

  1. Download the plugin Croppie
  2. Go to wherever you’re uploading your map marker. For me, this was a popup like this.
    CleanShot 2022-09-22 at 09.28.29
  3. Add a “Croppie” element to the page (it’s the little green square there in my popup). I want circle map markers, so here was my settings:

    Notice how I have it set to 48 x 48px, and it saves as a png. Important if you want circles!
  4. Add the workflow to “Browse a Croppie”. This is what triggers when you click “Upload Logo”
    CleanShot 2022-09-22 at 09.31.13
  5. Add a workflow to save your Croppie. This is what triggers in my popup when I click “Add Logo”
  6. Add the workflow “When <your_croppie> is saved”. This is how you save the map marker to something, and is what triggers after the previous workflow runs. In my example, I use a search box to find the thing I want to save it to.
    CleanShot 2022-09-22 at 09.42.56
  7. Set your map marker to be dynamic. Make sure your saving it to the list of things you’re showing on your map.
    CleanShot 2022-09-22 at 09.45.31

There you have it! Here’s how my map looks:


1 Like