Simple tricks for map solution

In the past, we used the map google map service for the map solution. As the project grew, google map began to write high amounts of cost. We looked for a few solutions here and, divided our needs into 2 parts.

1. Dynamic display of latitude and longitude data. (embed)
2. Find latitude and longitude data using street, shop and home address. (geocoding)

Embed solution

Here are a few alternatives. (openstreetmap, google map, mapbox vs...) I will evaluate the difference between google map and mapbox.

• Legacy solution: Google Map: SKU: Dynamic Maps

  For more than 100,000 requests:

  - 5.60 USD per 1000
  

  Example: 500.000 (100k free) requests: 2.240 USD

• New solution: Map Loads for Web

  For more than 50,000 requests:

  - (50,001 to 100,000) 5.00 USD per 1000
  - (100,001 to 200,000) 4.00 USD per 1000
  - (20,001 to 1000,000) 3.00 USD per 1000
  

  Example: 500.000 (50k free) requests: 1.560 USD

Profit : 680 USD

Development process

I was using the react-leaflet library in the front. (openstreetmap) The Leaflet library is very convenient and convenient. You can define api as Custom.

Highly recommend the react-leaflet. :)

import { Map as LeafletMap, TileLayer } from 'react-leaflet';

<LeafletMap>
    <TileLayer url={`https://api.mapbox.com/styles/v1/{#username}/{#project}/tiles/{z}/{x}/{y}?access_token={#token}`}/>
</LeafletMap>

Geocoding solution

There is no alternative to this substance at this time. The alternatives are quite inefficient. It negatively impacts user experience. I recommend using Google Map.