Leaflet map shenanigans with React

Map discovery for ECards

When the COVID 19 pandemic hit, we as a start-up had to come up with a solution for our users as well as out merchants. Now, most businesses don't have that much of a buffer to support themselves for the long term without any revenue. So we came up with a campaign to #saveourfave. During (what seemed like a hackathon) a 3 day time period. We came up with

Fave: Save our fave

We started with making a decision to start with :
→ ParcelJS
→ tailwindcss

Thanks to the product and the product design team for coming up with this idea and the designs within a couple of days. So the website was up and running. We could see that people were exploring our Ecards but we wanted to make things more explorable for them.

That’s when the idea of maps was put forward. A map would help user know that there are nearby E-Cards to be pre-purchased and that would give them more power to pick and choose as they had this new spatial awareness of where they could redeem their cards.

We knew we had a choice to make as in shall we go with GMaps, which would honestly make life very easy for us as it comes with a bunch of presets that are a delight to work with, but the caveat here was that it needed a lot of resources, financially. The whole point of this initiative was to drive business and we would have even invested but based on the initial analytics we knew that the ROI would not be worth it. So after some discussion amongst the engineering team, we decided to roll along with OSM, particularly leaflet.

So we start working on it and that is when we realized we will have to do a lot of things by ourselves. Like:

Markers

<Marker
ref={markerRef}
key={marker.id}
position={[marker.latitude, marker.longitude]}
icon={logoIcon(companyLogoUrl)} //our own custom Icon
onClick={() => onClickMarker(marker, markerRef)}
/>

Icons

It took a long time for some reason, not ample examples available online to read about custom icons.

import L from 'leaflet'
import LocationLogo from '../../assets/icons/my-location.png'
export const LocationIcon = new L.Icon({
  iconUrl: LocationLogo,
  iconRetinaUrl: LocationLogo,
  iconSize: new L.Point(76, 84.25),
  className: 'location-logo'
})
export const logoIcon = logo => {
  return new L.divIcon({
    iconUrl: logo,
    iconRetinaUrl: logo,
    iconAnchor: [69.415, 74.9],
    iconSize: new L.Point(138.83, 74.9),
    className: 'leaflet-logo',
    html: `<img src="${logo}"/>`
  })
}

PopUps(The main issue)

The reason why is custom pop-ups were behaving very notoriously as, if a pop-up scaled outside of the map container, the map code would break and we were left with our heads in our hands. We looked around for a hint in the documentation as to why this was happening, zilch, nothing! So we made the decision to re-center the map to the pop-up whenever someone clicked on it.

const handleOnClickMarker = (marker, markerRef) => {
    //API CALL
    eCardInfo.marker = marker
    setEcard(eCardInfo)
    gaViewEcard(eCardInfo.id)
    setMapCenter(markerRef.current.props.position) //Where we did it
    setZoom(map.current.viewport.zoom)
}

Map discovery for ECards

Upon doing all of this we were finally able to launch a version at the end of the week.

But there was still one issue that needed to be resolved and that was clusters of cards. When there were a bunch of clusters at a place, then it was not very apparent for people to check which card is where.

So we had to use an option of SpiderFy …

<MarkerClusterGroup 
 spiderfyDistanceMultiplier={3.5} 
 spiderLegPolylineOptions={{ weight: 1, color: '#222', opacity: 1 }}
 maxClusterRadius={80}>
      { ecards && 
        <MapMarkers markers={ecards} 
        onClickMarker={handleOnClickMarker}/>
      }
</MarkerClusterGroup>

Which made things look like:

Clustering

So when you clicked on any of the clusters, it created a web of navigation friendly markers which can be further clicked and explored.

That was a quick project that was fun for everyone working on it, I mean, most of the time 😛. But nonetheless, major props to everyone who was involved from, product to product design to the engineering team. Also to the marketing team who drove this campaign which put our efforts to be seen by our customers.

We all are still recovering from this pandemic and we dealt with uncertainty the way we could, by adapting. Do check out our website,

Fave: Save our fave

And also while you are at it, buy a couple of E-Cards that you can use.