DEV Community: Arnaud Ferrand

Building a Powerful Geocoding Solution with OpenCage and Thunderforest Maps

Arnaud Ferrand — Tue, 05 Aug 2025 08:48:53 +0000

Interactive maps have become an essential component of modern web applications, from ride-sharing platforms to real estate websites. One of the most crucial features users expect is the ability to search for locations by typing addresses or place names – a process known as geocoding. While there are many geocoding services available, finding the right combination of accuracy, performance, and visual appeal can be challenging.

In this tutorial, we'll explore how to implement a robust geocoding solution using two powerful services: OpenCage's geocoding API and Thunderforest's beautiful map tiles. OpenCage provides reliable, worldwide geocoding with excellent coverage and detailed location data. At the same time, Thunderforest offers stunning, professionally designed map styles that can elevate your application's visual appeal far beyond standard map tiles.

Tutorial

First, sign up for the services, respectively:

OpenCage offers a free trial
Thunderforest offers a hobby project plan

Import the dependencies via the CDN unpkg:

<!-- Load MapLibre GL -->
<link
  rel="stylesheet"
  href="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.css"
/>
<script src="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>

<!-- Load MapLibre Geocoder plugin -->
<link
  rel="stylesheet"
  href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.css"
/>
<script src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.min.js"></script>

<!-- Load Opencage API Client -->
<script src="https://unpkg.com/opencage-api-client@2.0.0/dist/opencage-api.min.js"></script>

Anchor the map to an HTML div, and don't forget to give the map a height:

<div id="map"></div>

#map {
  height: 100%;
}

Create the map using a Thunderforest Vector Tiles style:

const map = new maplibregl.Map({
  container: 'map',
  style: `https://api.thunderforest.com/styles/atlas/style.json?apikey=THUNDERFOREST_API_KEY`, // Replace with your Thunderforest API key
  center: [-0.1275, 51.507222],
  zoom: 3,
  canvasContextAttributes: { antialias: true },
});

Please remember to replace the Thunderforest API key.

Then add the geocoder plugin:

map.addControl(
  new MaplibreGeocoder(geocoderApi, {
    maplibregl,
  })
);

All we need now is to define the geocoder API where we use the OpenCage Client API

const geocoderApi = {
  forwardGeocode: async (config) => {
    const features = [];
    try {
      const response = await opencage.geocode({
        key: 'OPENCAGE_API_KEY', // Replace with your OpenCage API key
        q: config.query,
        limit: 5, // Limit results to 5
        no_annotations: 1, // Exclude annotations for simplicity
      });
      if (response.results && response.results.length > 0) {
        for (const result of response.results) {
          const center = [result.geometry.lng, result.geometry.lat];
          const point = {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: center,
            },
            place_name: result.formatted,
            properties: result.components,
            text: result.formatted,
            place_type: ['place'],
            center,
          };
          features.push(point);
        }
      }
    } catch (e) {
      console.error(`Failed to forwardGeocode with error: ${e}`);
    }

    return {
      features,
    };
  },
};

The API request uses OpenCage's geocode method with the query and some configuration options (limiting to 5 results and excluding annotations for shorter responses). Please remember to replace the OpenCage API key. The results are then transformed from OpenCage's JSON format into GeoJSON Feature objects that MapLibre GL JS expects, with each location converted into a standardised structure containing coordinates, formatted address, and place properties.

Full Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Geocode with OpenCage</title>
    <meta
      property="og:description"
      content="Geocode with Opencage and the maplibre-gl-geocoder plugin."
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.css"
    />
    <script src="https://unpkg.com/maplibre-gl@5.6.1/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.min.js"></script>
    <script src="https://unpkg.com/opencage-api-client@2.0.0/dist/opencage-api.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: `https://api.thunderforest.com/styles/atlas/style.json?apikey=THUNDERFOREST_API_KEY`, // Replace with your Thunderforest API key
        center: [-0.1275, 51.507222],
        zoom: 3,
        canvasContextAttributes: { antialias: true },
      });

      const geocoderApi = {
        forwardGeocode: async (config) => {
          const features = [];
          try {
            const response = await opencage.geocode({
              key: 'OPENCAGE_API_KEY', // Replace with your OpenCage API key
              q: config.query,
              limit: 5, // Limit results to 5
              no_annotations: 1, // Exclude annotations for simplicity
            });
            if (response.results && response.results.length > 0) {
              for (const result of response.results) {
                const center = [result.geometry.lng, result.geometry.lat];
                const point = {
                  type: 'Feature',
                  geometry: {
                    type: 'Point',
                    coordinates: center,
                  },
                  place_name: result.formatted,
                  properties: result.components,
                  text: result.formatted,
                  place_type: ['place'],
                  center,
                };
                features.push(point);
              }
            }
          } catch (e) {
            console.error(`Failed to forwardGeocode with error: ${e}`);
          }

          return {
            features,
          };
        },
      };
      map.addControl(
        new MaplibreGeocoder(geocoderApi, {
          maplibregl,
        })
      );
    </script>
  </body>
</html>

Conclusion

The OpenCage API proved to be reliable and comprehensive, handling various types of location queries with impressive accuracy. At the same time, Thunderforest's map tiles added that professional polish that sets your application apart from the crowd. MapLibre GL JS served as the perfect foundation, providing smooth performance and extensive customisation options.

Key takeaways from this implementation:

OpenCage offers excellent geocoding accuracy with generous free tier limits
Thunderforest's styled maps can significantly enhance the user experience
MapLibre GL JS provides a robust, open-source foundation for modern mapping applications

What's Next?

While our JavaScript implementation works, the modern web development landscape is increasingly embracing TypeScript for its type safety and developer experience benefits, along with build tools like Vite for lightning-fast development workflows.

In our next blog post, we'll take this same concept and rebuild it using contemporary development practices. Stay tuned for a deep dive into web mapping development!

How to set up a Node Project using TypeScript in 2024

Arnaud Ferrand — Fri, 19 Jul 2024 11:57:23 +0000

Originally published at https://www.tsamaya.net/blog/2024-07-19-how-to-set-up-a-node-project-with-typescript-in-2024

I'm writing this down to make it easier to locate in the future because I've had to search for how to build a new Node project far too often. This is a brief, crude post with little background information.

Create the project

# create a new project folder
mkdir my-node-project
cd my-node-project/
echo "20" > .nvmrc
nvm use
# Found '/Users/arnaud/projects/tsamaya/my-node-project/.nvmrc' with version <20>
# Now using node v20.11.1 (npm v10.2.4)

Initialize the project

git init
# Initialized empty Git repository in /Users/arnaud/projects/tsamaya/my-node-project/.git/
pnpm init
# Wrote to /Users/arnaud/projects/tsamaya/my-node-project/package.json

# {
#   "name": "my-node-project",
#   "version": "1.0.0",
#   "description": "",
#   "main": "index.js",
#   "scripts": {
#     "test": "echo \"Error: no test specified\" && exit 1"
#   },
#   "keywords": [],
#   "author": "",
#   "license": "ISC"
# }

Install dev dependencies

pnpm add -D typescript ts-node @types/node
# Packages: +20
# ++++++++++++++++++++
# Progress: resolved 20, reused 19, downloaded 1, added 20, done

# devDependencies:
# + @types/node 20.14.11
# + ts-node 10.9.2
# + typescript 5.5.3

# Done in 1.4s

Initialize TypeScript

npx tsc --init

# Created a new tsconfig.json with:       TS
#   target: es2016
#   module: commonjs
#   strict: true
#   esModuleInterop: true
#   skipLibCheck: true
#   forceConsistentCasingInFileNames: true


# You can learn more at https://aka.ms/tsconfig

Customize

We are using node >= 20.6 then we can use:

The --watch flag was added in Node v18.11.0.
The --env-file=config flag was added in Node v20.6.0.

Add in the package.json file in the scripts section:

    "build": "tsc",
    "dev": "node --env-file=.env --watch -r ts-node/register src/index.ts",

Edit the tsconfig.json file.

In the Language and Environment section, find target and replace it with your target, I use es2022 :

  "target": "ES2022"

In the Emit section, find outDir, uncomment the line and use "./dist"

  "outDir": "./dist",

dotenv file

echo "TEST=World" > .env

Let's code

mkdir src
touch src/index.ts

edit the index.ts file

function main(): void {
  console.log(`Hello ${process.env.TEST}`);
}

main();

run with pnpm dev

pnpm dev

# > my-node-project@1.0.0 dev /Users/arnaud/projects/tsamaya/my-node-project
# > node --env-file=.env --watch -r ts-node/register src/index.ts

# Hello World
# Completed running 'src/index.ts'

Edit the src file; for example, adding ! will reload it and output the new value.

# Restarting 'src/index.ts'
# Hello World!
# Completed running 'src/index.ts'

💡 Editing the value TEST in the .env file won't reload; one needs to stop and start again.

`.gitignore` file

Don't forget your .gitignore file, run

curl "https://www.toptal.com/developers/gitignore/api/node" > .gitignore

Conclusion

That's all, folks. Happy coding!

Credits

Photo by Jorge Rosal on Unsplash

Using Opencage Gecoder API with REACT [2nd edition]

Arnaud Ferrand — Sun, 18 Jun 2023 17:38:50 +0000

Photo by Kelsey Knight on Unsplash

Overview

Previously, the tutorial was built around React classes that extended components. A few years ago, React hooks were released from beta. As a result, it is past time to go over this guide again.

We will continue to explore the integration of the Opencage API into a React application in this updated version of the tutorial.

The prerequisites are, of course, a OpenCage API key, (if you don’t have one, simply use this free registration link), a node platform with yarn or npm; and finally your favourite IDE/Text Editor.

Since setting up a build environment for React is not the focus of this tutorial, vitejs will be used.

Before we start, here is the source code. And a live version can be found here.

Setup the environment

npm create vite@latest opencage-react-app

It runs the interactive mode where we are going to choose the React framework and the JS+swc variant:

Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › JavaScript + SWC

Scaffolding project in /Users/arnaud/projects/tsamaya/opencage-react-app...

Done. Now run:

  cd opencage-react-app
  npm install
  npm run dev

Start hacking

First part

Let’s do the suggested commands above

cd opencage-react-app
npm install
npm run dev

The project is built in development mode and it opens your favourite browser on http://127.0.0.1:5173/.

The page will automatically reload if you make changes to the code. So let’s do it.

First of all download opencage svg logo and copy it to the src/assets folder.

Open your IDE or Text Editor with the folder opencage-react-app.

Edit the file ./src/App.jsx:

replace

import reactLogo from './assets/react.svg'

with

import reactLogo from './assets/opencage-white.svg'

The app has been rebuilt, and instead of the atomic react logo, you should now see the OpenCage logo revolving. Since it is white on white, this may be challenging, but we will simply fix it later or right now by adding a background-color: #a9a9a9; to the body in the src/index.css file.

Use CTRL + C to stop the development server.

We will now add dependencies to the project.

In order to keep this tutorial straightforward and focused solely on integrating the Opencage Geocode API, I chose Bulma, a javascript-free CSS framework. You can choose your preferred CSS framework for the style first (such as Bootstrap, a Material UI implementation, or Tailwind).

npm install -S bulma

It outputs:

added 1 package, and audited 30 packages in 2s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

let’s create a Header component:

App.css should be renamed to Header.css. Then modify Header.css so that we may just place the centre text in the header, avoiding the nauseating infinite loop animation. It will only be a header and not the entire viewport page.

/* ./src/Header.css */
.App {
}

.App-logo {
  animation: App-logo-spin 10s linear;
  height: 40vmin;
}

.App-header {
  text-align: center;
  background-color: #20b282;
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Create ./src/Header.jsx file:

// ./src/Header.jsx
import React from 'react'
import logo from './assets/opencage-white.svg'
import './Header.css'

function Header() {
  return (
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        OpenCage <b>Geocoding</b> API
      </p>
    </header>
  )
}

export default Header

Edit ./src/main.jsx, adding

import 'bulma/css/bulma.css'

instead of

import './index.css'

Now edit App.jsx, we first use the Header Component and then we prepare 2 columns.

import React from 'react'
import Header from './Header'
function App() {
  return (
    <div>
      <Header />
      <div className="columns">
        <div className="column">1</div>
        <div className="column">2</div>
      </div>
    </div>
  )
}

export default App

Now add packages dependencies like the OpenCage API client, LeafletJS, and classnames:

npm install -S  opencage-api-client leaflet react-leaflet classnames

opencage-api-client is the client library for Opencage Geocoder API
LeafletJS is the well-known web mapping API
classnames is a javascript utility lib to help build className attributes

We can re-start the dev server with npm run dev

This is how the app appears right now:

We will build up the form using the search input parameters in the first column. The results will appear as multiple tabs in the second column, with the first tab being the readable results (formatted address and coordinates) and the second tab containing the raw JSON result from the API. GeocodingForm and GeocodingResults are the two key components we will develop, as you can see in the following design.

Create a file ./src/GeocodingForm.jsx:

import React, { useState } from 'react'
import './GeocodingForm.css'

function GeocodingForm(props) {
  const [isLocating, setIsLocating] = useState(false)
  const [apikey, setApiKey] = useState('')
  const [query, setQuery] = useState('')

  function handleGeoLocation() {
    const geolocation = navigator.geolocation
    const p = new Promise((resolve, reject) => {
      if (!geolocation) {
        reject(new Error('Not Supported'))
      }
      setIsLocating(true)

      geolocation.getCurrentPosition(
        (position) => {
          console.log('Location found')
          resolve(position)
        },
        () => {
          console.log('Location : Permission denied')
          reject(new Error('Permission denied'))
        }
      )
    })
    p.then((location) => {
      setIsLocating(false)
      setQuery(location.coords.latitude + ', ' + location.coords.longitude)
    })
  }

  function handleSubmit(event) {
    console.log('Form was submitted with query: ', apikey, query)
    props.onSubmit(apikey, query)
  }

  const { isSubmitting } = props

  return (
    <div className="box form">
      <form
        onSubmit={(e) => {
          e.preventDefault()
        }}
      >
        {/* <!-- API KEY --> */}
        <div className="field">
          <label className="label">API key</label>
          <div className="control has-icons-left">
            <span className="icon is-small is-left">
              <i className="fas fa-lock" />
            </span>
            <input
              name="apikey"
              className="input"
              type="text"
              placeholder="YOUR-API-KEY"
              value={apikey}
              onChange={(e) => setApiKey(e.target.value)}
            />
          </div>
          <div className="help">
            Your OpenCage Geocoder API Key (
            <a href="https://opencagedata.com/users/sign_up">register</a>
            ).
          </div>
        </div>
        {/* <!-- ./API KEY --> */}

        {/* <!-- Query --> */}
        <div className="field">
          <label className="label">Address or Coordinates</label>
          <div className="control has-icons-left">
            <span className="icon is-small is-left">
              <i className="fas fa-map-marked-alt" />
            </span>
            <input
              name="query"
              className="input"
              type="text"
              placeholder="location"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            <div className="help">
              Address, place name
              <br />
              Coordinates as <code>latitude, longitude</code> or <code>y, x</code>.
            </div>
          </div>
        </div>
        {/* <!-- ./Query --> */}

        <div className="field">
          <label className="label">Show my location</label>
          <div className="control" onClick={handleGeoLocation}>
            {!isLocating && (
              <button className="button is-static">
                <span className="icon is-small">
                  <i className="fas fa-location-arrow" />
                </span>
              </button>
            )}
            {isLocating && (
              <button className="button is-static">
                <span className="icon is-small">
                  <i className="fas fa-spinner fa-pulse" />
                </span>
              </button>
            )}
          </div>
        </div>

        {/* <!-- Button Geocode --> */}
        <button
          className="button is-success"
          onClick={handleSubmit}
          disabled={isLocating || isSubmitting}
        >
          Geocode
        </button>
        {/* <!-- ./Button Geocode --> */}
      </form>
    </div>
  )
}

export default GeocodingForm

Then create a file ./src/GeocodingResults.jsx:

import React, { useState } from 'react'
import classnames from 'classnames'

import ResultList from './ResultList'
import ResultJSON from './ResultJSON'

import './GeocodingResults.css'

const RESULT_TAB = 'RESULT_TAB'
const JSON_TAB = 'JSON_TAB'

function GeocodingResults(props) {
  const [activeTab, setActiveTab] = useState(RESULT_TAB)

  function renderTab(title, tab, icon, activeTab) {
    return (
      <li className={classnames({ 'is-active': activeTab === tab })}>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault()
            setActiveTab(tab)
          }}
        >
          <span className="icon is-small">
            <i className={icon} aria-hidden="true" />
          </span>
          <span>{title}</span>
        </a>
      </li>
    )
  }

  const results = props.response.results || []

  return (
    <div className="box results">
      <div className="tabs is-boxed vh">
        <ul>
          {renderTab('Results', RESULT_TAB, 'fas fa-list-ul', activeTab)}
          {results.length > 0 && renderTab('JSON Result', JSON_TAB, 'fab fa-js', activeTab)}
        </ul>
      </div>

      {/* List of results */}
      {activeTab === RESULT_TAB && results.length > 0 && <ResultList response={props.response} />}
      {/* JSON result */}
      {activeTab === JSON_TAB && results.length > 0 && <ResultJSON response={props.response} />}
    </div>
  )
}

export default GeocodingResults

We need to create files ./src/ResultList.jsx and ./src/ResultJSON.jsx:

// ./src/ResultList.jsx
import React from 'react'

function ResultList(props) {
  const rate = props.response.rate || {}
  const results = props.response.results || []

  return (
    <article className="message">
      <div className="message-body">
        <p>
          Remaining {rate.remaining} out of {rate.limit} requests
        </p>
        <p>&nbsp;</p>
        <ol>
          {results.map((result, index) => {
            return (
              <li key={index}>
                {result.annotations.flag} {result.formatted}
                <br />
                <code>
                  {result.geometry.lat} {result.geometry.lng}
                </code>
              </li>
            )
          })}
        </ol>
      </div>
    </article>
  )
}

export default ResultList

// ./src/ResultJSON.js
import React, { Component } from 'react'

import './ResultJSON.css'

function ResultJSON(props) {
  return (
    <article className="message">
      <div className="message-body">
        <pre>{JSON.stringify(props.response, null, 2)}</pre>
      </div>
    </article>
  )
}

export default ResultJSON

Wire the application with those two key components (GeocodingForm and GeocodingResults) to complete the first stage:

Edit the ./src/App.jsx file:

import React, { useState } from 'react'
import Header from './Header'
import GeocodingForm from './GeocodingForm'
import GeocodingResults from './GeocodingResults'

import * as opencage from 'opencage-api-client'

function App() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [response, setResponse] = useState({})
  return (
    <div>
      <Header />
      <div className="columns">
        <div className="column is-one-third-desktop">
          <GeocodingForm
            isSubmitting={isSubmitting}
            onSubmit={(apikey, query) => {
              setIsSubmitting(true)
              console.log(apikey, query)
              opencage
                .geocode({ key: apikey, q: query })
                .then((response) => {
                  console.log(response)
                  setResponse(response)
                })
                .catch((err) => {
                  console.error(err)
                  setResponse({})
                })
                .finally(() => {
                  setIsSubmitting(false)
                })
            }}
          />
        </div>
        <div className="column">
          <GeocodingResults response={response} />
        </div>
      </div>
    </div>
  )
}

export default App

To add the fontawesome icons, edit the project's root file index.html, and add the following line beneath div id="root">/div>:

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Here is how the app currently appears:

Second part

In this second stage, we'll update the results area to include a map tab.

First, let’s create a ./src/ResultMap.js file:

import React, { useEffect, useRef } from 'react'
import { MapContainer, Marker, Popup, TileLayer, FeatureGroup } from 'react-leaflet'

// import Leaflet's CSS
import 'leaflet/dist/leaflet.css'
import './ResultMap.css'

const redIcon = L.icon({
  iconUrl: 'marker-icon-red.png',
  iconSize: [25, 41], // size of the icon
  iconAnchor: [12, 40], // point of the icon which will correspond to marker's location
})

function ResultMap(props) {
  const mapRef = useRef(null)
  const groupRef = useRef(null)

  const position = [40, 0]

  useEffect(() => {
    const map = mapRef.current
    const group = groupRef.current
    if (map && group) {
      map.fitBounds(group.getBounds())
    }
  }, [props])

  return (
    <MapContainer ref={mapRef} id="map" center={position} zoom={2}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <FeatureGroup ref={groupRef}>
        {props.response.results &&
          props.response.results.map((e, i) => (
            <Marker key={i} position={e.geometry}>
              <Popup>
                {i + 1} - {e.formatted}
              </Popup>
            </Marker>
          ))}
      </FeatureGroup>
    </MapContainer>
  )
}

export default ResultMap

Download the pin icon from marker-icon-red.png and save it to public/ folder.

As the map needs a height, we create a ./src/ResultMap.css file:

#map {
  width: auto;
  min-height: 350px;
  height: 40vmin;
}

Back in ./src/GeocodingResuls.jsx add the tab in the ul section:

{
  results.length > 0 && renderTab('JSON Result', JSON_TAB, 'fab fa-js', activeTab)
}

and with the other results content add the map:

{
  activeTab === MAP_TAB && results.length > 0 && <ResultMap response={props.response} />
}

There is now a map in the application:

The end

I sincerely hope you found this to be useful. If it was, kindly let me know so that I can create more articles similar to this one. You may always contact me on Mastodon or Twitter and, once again, if you read this tutorial all the way through, I'm really proud of you.

Resources

Opencage Data Geocoder: https://opencagedata.com/
Source code repository on GitHub: https://github.com/tsamaya/opencage-react-guide-v2
Demo version on Netlify: https://glowing-trifle-49c0ea.netlify.app/

Geocode with OpenCage and MapLibre

Arnaud Ferrand — Wed, 22 Mar 2023 09:39:17 +0000

OpenCage is an API Provider offering two services a geocoding service and a geosearch service
MapLibre is an Open-source mapping libraries for web and mobile app developers.

In this article we will learn how to geocode with OpenCage and the maplibre-gl-geocoder plugin.

First, one need an OpenCage API Key, it is free for testing, signup for your own key here.

This example will be based on a simple HTML page.

Header

The header will then contain a viewport:

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

Some CSS and JS for MapLibre and the geocoder plugin

<!-- STYLES -->
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
<link href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.2.0/dist/maplibre-gl-geocoder.css" rel="stylesheet" />

<!-- scripts -->
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.2.0/dist/maplibre-gl-geocoder.min.js"></script>

<!-- CSS -->
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

Body

Now let's look at the body of this HTML page

<div id="map"></div>

Pretty sleek, isn't it?

Script

Map

Indeed the magic happens in JS. The first part is the map using MapLibre GL JS. Here, I used a simple openstreetmap basemap using a raster source. The SDK offers various sources link.

var map = new maplibregl.Map({
  container: "map",
  // Use a minimalist raster style
  style: {
    version: 8,
    name: "Blank",
    center: [0, 0],
    zoom: 0,
    sources: {
      "raster-tiles": {
        type: "raster",
        tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
        tileSize: 256,
        minzoom: 0,
        maxzoom: 19
      }
    },
    layers: [
      {
        id: "background",
        type: "background",
        paint: {
          "background-color": "#e0dfdf"
        }
      },
      {
        id: "simple-tiles",
        type: "raster",
        source: "raster-tiles"
      }
    ],
    id: "blank"
  },
  center: [0, 51],
  zoom: 4,
  antialias: true
});

Geocode

We define the geocoder API. From the documentation Any geocoder api that supports the functions reverseGeocode and forwardGeocode and returns a response which includes a FeatureCollection of results

We use the OpenCage API and its GeoJSON format, but as you can see, because this is JS, one can use the classical JSON response from the API and transform into GeoJSON.

// Replace it with your API Key. 
// The test key returns only 
// "Friedrich-Ebert-Straße 7, 48153 Münster, Germany" 
// whatever the input is
var YOUR_API_KEY="6d0e711d72d74daeb2b0bfd2a5cdfdba";

var geocoder_api = {
  forwardGeocode: async (config) => {
    const features = [];
    try {
      let request =
        "https://api.opencagedata.com/geocode/v1/geojson?q=" +
        config.query +
 "&key="+YOUR_API_KEY+"&no_annotations=1";
      const response = await fetch(request);
      const geojson = await response.json();
      for (let feature of geojson.features) {
        let point = {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: feature.geometry.coordinates
          },
          place_name: feature.properties.formatted,
          properties: feature.properties,
          text: feature.properties.formatted,
          place_type: ["place"]
        };
        features.push(point);
      }
    } catch (e) {
      console.error(`Failed to forwardGeocode with error: ${e}`);
    }

    return {
      features: features
    };
  }
};

now add the Geocoder API to the plugin and attached it to the map

map.addControl(
  new MaplibreGeocoder(geocoder_api, {
    maplibregl: maplibregl
  })
);

and we are all set.

Demo

A live example using the test API key (returning only Münster) is available on codepen

The end

Thanks for reading 🙏

Resources

The code fragments are available on this gist
Photo by delfi de la Rua on Unsplash

ESLint and Prettier configuration for React project

Arnaud Ferrand — Tue, 21 Mar 2023 04:53:52 +0000

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Prettier is an opinionated code formatter. It ensures a consistent style by parsing your code and re-writing it with its rules.

If you are using VScode, and already have the ESLINT and PRETTIER plugins, as you are goigng to change the configuration as you follow the tutorial, you might have linter/prettier errors displayed, the solution is to restart VSCode.

In your git working folder running the following command will guide you with the ESLint configuration, we are going to use the airbnb style guide:

npm init @eslint/config
? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

Select To check syntax, find problems, and enforce code style

? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

For React / React-Native, you probably use import/export!

? Which framework does your project use? …
❯ React
  Vue.js
  None of these

Use React, but it also works with Vue.js.

? Does your project use TypeScript? › No / Yes

up to you. Here I went for No.

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

I tend to use both (even for pure React project)

? How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style

and now we can choose the style:

? Which style guide do you want to follow? …
❯ Airbnb: <https://github.com/airbnb/javascript>
  Standard: <https://github.com/standard/standard>
  Google: <https://github.com/google/eslint-config-google>
  XO: <https://github.com/xojs/eslint-config-xo>

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

I prefer using an .eslintrc.js but up to you if one prefer a different flavour.

Checking peerDependencies of eslint-config-airbnb@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.28.0 eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0
? Would you like to install them now? › No / Yes

Select yes to install the dependencies. And choose your package manager:

? Which package manager do you want to use? …
❯ npm
  yarn
  pnpm

Installing eslint-plugin-react@^7.28.0, eslint-config-airbnb@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.3, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-react-hooks@^4.3.0

up to date, audited 208 packages in 1s

85 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.js file in XXX/YYY

Today is a good day, all packages are safe with 0 vulnerabilities.

Now, your package.json file contains these dev dependencies

  "devDependencies": {
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0"
  }

Now let's have a look at the eslintrc file. It looks like that:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {},
}

Adding prettier to the configuration

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

added 5 packages, and audited 213 packages in 4s

86 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

create a .prettierrc.js file

module.exports = {
  singleQuote: true,
}

Read more about the other options on prettier website.

Time to update the .eslintrc.js file, adding the prettier recommended plugin

  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],

add two scripts in the package.json file

  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint -fix ."
  },

then you will be able to run

npm run lint

just to check your code

npm run lint:fix

to check and automatically fix what can be fixed.

Pre-commit Hook with lint-staged

Running lint-staged...
husky - Git hooks installed
husky - created .husky/pre-commit

This adds husky to hook the pre-commit and run the lint-staged script added to the project’s package.json file

Resources

Photo by Andrea De Santis on Unsplash

OpenCage API integration with AWS Cloud

Arnaud Ferrand — Wed, 17 Mar 2021 07:42:04 +0000

A few years ago, I started to enjoy serverless, or what we can more precisely call Function As A Service (FAAS). I created a tutorial "How to simply wrap the OpenCage Geocoding API into an AWS Lambda function".

NodeJS and AWS lambda have evolved, the tutorial is still valid to learn how to use the serverless framework with AWS Lambda functions; today this post is more about quicky deploy an OpenCage Geocoding API proxy in your own AWS infrastructure.

Let's get started with the usual prerequisites:

An AWS account to run a lambda function
An OpenCage API Key
NodeJS

The three steps will take less than 5 minutes to complete
1-Clone
2-Setup
3-Deploy

1- Clone this repository

git clone https://github.com/tsamaya/opencage-lambda-proxy.git
# or use the ssh version
git clone git@github.com:tsamaya/opencage-lambda-proxy.git

2- Setup

cd /path/to/repository

npm install # or yarn install

Create an environment file containing the API Key (YOUR-API-KEY):

echo "OPENCAGE_API_KEY=YOUR-API-KEY" >> .env

3- Deploy
And now, deploy the proxy with

npx serverless deploy

it will output

Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Creating Stack...
Serverless: Checking Stack create progress...
........
Serverless: Stack create finished...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service opencage-lambda-proxy.zip file to S3 (1.54 MB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..............................
Serverless: Stack update finished...
Service Information
service: opencage-lambda-proxy
stage: dev
region: eu-west-1
stack: opencage-lambda-proxy-dev
resources: 11
api keys:
  None
endpoints:
  GET - https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/geocode
functions:
  geocode: opencage-lambda-proxy-dev-geocode
layers:
  None

The proxy is ready to use within your applications.

You can test this curl command (updating the xxxxxxxxxx with the values seen in the deploy command)

curl 'https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/geocode?q=lyon'

That is it, please enjoy it and let me know if you have any questions.

Resources

cover image: Photo by Lucas George Wendt on Unsplash

From Medium to Markdown to Dev.to

Arnaud Ferrand — Wed, 11 Nov 2020 22:06:49 +0000

Recently, I've been transferring my Medium posts to DEV.to, mainly for philosophical reasons 😇

One thing I love about Dev.to is that you write in plain markdown. Editing an article is then editing Markdown. Nothing simpler.

Medium to Markdown

Sadly, Medium doesn't give a simple way to get the markdown of your post.

Luckily mediumexporter from @xdamman is a very useful CLI tool.

You will need nodejs to use it. Nowadays, node comes with npx, no need to install mediumexporter globally nor set up a local working dir with it.

Simply, download your article with :

npx mediumexporter https://medium.com/your-medium-url > your_post.md

After executing that command, your Medium post is located in the current directory named your_post.md.

Resources

Photo by Jake Blucker on Unsplash

OpenCage API and ArcGIS API for JavaScript

Arnaud Ferrand — Sun, 10 May 2020 12:30:37 +0000

How to use the OpenCage Data Geocoder API with ArcGIS API for JavaScript

This tutorial will walk you through how to create a map with ArcGIS API for JavaScript and a custom search widget using OpenCage Data Geocoder API.

Get started

We will need a OpenCage Data API key, it is free, signup for your own key here
Your favorite editor: local or online

Local

The Mozilla Developer Network has an excellent guide on setting up a local development server.

Online

You can use sites such as CodeSandbox, JS Bin, CodePen and our own ArcGIS API for JavaScript sandbox

Tutorial

Reference the ArcGIS API for JavaScript

First, set up a basic HTML document:

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>ArcGIS Search widget with OpenCage Data API</title>
  </head>

  <body></body>
</html>

Inside the <head> tag, reference the ArcGIS API for JavaScript using a <link> tag:

<link
  rel="stylesheet"
  href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>

Inside the <body> tag, reference the ArcGIS API for JavaScript using <script> tag:

<script src="https://js.arcgis.com/4.15/"></script>

Create a map

In the <head> section add a <style> tag:

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

In the <body> section add a <div> tag before the <script> tag. This <div> will be the map view container:

<div id="viewDiv"></div>

At the end of the <body>, add a <script> tag and an AMD require statement to load the Map and MapView

<script>
  require(['esri/Map', 'esri/views/MapView'], function (Map, MapView) {
    var map = new Map({
      basemap: 'topo',
    });

    var view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [-2.547855, 54.00366], // lon, lat
      scale: 4000000,
    });
  });
</script>

Run your code to view a map centered on the United Kingdom

Add the search widget

In the require statement, add a reference to the Search module.

require([ 'esri/Map', 'esri/views/MapView', 'esri/widgets/Search' ],
function(Map, MapView, Search) {

At the end of the code in the main function, create a Search widget and set the view. Add the widget to the top right corner of the view.

// Search widget
var searchWidget = new Search({
  view: view,
});

view.ui.add(searchWidget, 'top-right');

Run the code and try searching for the following:

London
Buckingham Palace
///index.home.raft (sorry joking, it is a different example)
-0.20358600,51.521251

Add the custom source : OpenCage Data

In the require statement, add references to the modules:

SearchSource the custom source,
Graphic so the Search widget can display a point result,
Point used with the Graphic,
geometryEngine to compute a buffer around the searched location,
request for the API request to OpenCage Data API.

require([
  'esri/Map',
  'esri/views/MapView',
  'esri/widgets/Search',
  'esri/widgets/Search/SearchSource',
  'esri/Graphic',
  'esri/geometry/Point',
  'esri/geometry/geometryEngine',
  'esri/request',
], function (
  Map,
  MapView,
  Search,
  SearchSource,
  Graphic,
  Point,
  geometryEngine,
  esriRequest
) {
  // ...
});

Create a function for the geocoding operations at the beginning of the module (AMD require is only here for hint purpose):

require([
  // ...
  'esri/request',
], function (
  // ...
  esriRequest
) {
  var API_KEY = 'YOUR-API-KEY';
  var OPENCAGEDATA_URL = 'https://api.opencagedata.com/geocode/v1/json';

  function geocode(options) {
    return esriRequest(OPENCAGEDATA_URL, {
      query: {
        key: API_KEY,
        q: options.query,
        proximity: options.proximity,
        no_annotations: 1,
        limit: 6,
      },
      responseType: 'json',
    });
  }
  // ...
});

Before the Search widget create the custom SearchSource:

// Custom SearchSource
var opencageSearchSource = new SearchSource({
  placeholder: 'example: W10',
  minSuggestCharacters: 3,
  getSuggestions: function (params) {
    var address = params.suggestTerm.replace(/ /g, '+');
    return geocode({
      query: address,
      proximity: view.center.latitude + ',' + view.center.longitude,
    }).then(function (response) {
      var suggestions = response.data.results.map(function (feature) {
        return {
          key: 'name',
          text: feature.formatted,
          location: {
            longitude: feature.geometry.lng,
            latitude: feature.geometry.lat,
          },
          sourceIndex: params.sourceIndex,
        };
      });
      return suggestions;
    });
  },
  // Provide a getResults method to find
  // results from the suggestions, the device location or the text input
  getResults: function (params) {
    var query;
    // Perform a different query if a location is provided
    // HTML5 device location or suggestion selected
    if (params.location) {
      query = params.location.latitude + ',' + params.location.longitude;
    } else {
      query = params.suggestResult.text.replace(/ /g, '+');
    }

    return geocode({
      query: query,
    }).then(function (results) {
      // Parse the results of your custom search
      var searchResults = results.data.results.map(function (feature) {
        // Create a Graphic the Search widget can display
        var graphic = new Graphic({
          geometry: new Point({
            x: feature.geometry.lng,
            y: feature.geometry.lat,
          }),
          attributes: {
            name: feature.formatted,
            label: feature.formatted,
            props: feature.properties,
          },
        });
        var buffer = geometryEngine.geodesicBuffer(
          graphic.geometry,
          250,
          'meters'
        );
        // Return a Search Result
        var searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature.formatted,
        };
        return searchResult;
      });

      // Return an array of Search Results
      return searchResults;
    });
  },
});

Update the search widget, disabling the Esri's World Geocoder:

var searchWidget = new Search({
  view: view,
  sources: [opencageSearchSource],
  includeDefaultSources: false,
});

Congratulations, you're done!

Your app should look something like this:

Try searching for the following:

London
Buckingham Palace
51.521251,-0.20358600 (yes here it is latitude, longitude)

Thank for reading 🙏

You can find the sources in this GitHub repository

tutorial.html this step by step tutorial where you only have to change YOUR-API-KEY,
index.html an advanced version with an API key prompt, using localStorage for further usage and a basemap widget, as you can also be an addict to the National Geographic basemap, and split files (html, css, js).

Was this post helpful? Don't forget to share because Sharing is Caring.

Resources

cover image : Photo by Vincent Guth on Unsplash
OpenCage Data API documentation
ArcGIS API for Javascript Search widget with custom source

Using Opencage Gecoder API with REACT

Arnaud Ferrand — Sun, 22 Mar 2020 09:07:43 +0000

Photo by Kelsey Knight on Unsplash

🆕 Newer version available Using OpenCage Gecoder API with React (2nd-edition)

This post was previously published on Medium

Overview

In this tutorial, we will discuss about the integration of Opencage API into a React application.

The prerequisites are, of course, a OpenCage API key, (if you don’t have one, simply use this free registration link), a node platform with yarn or npm; and finally your favourite IDE or Text Editor.

I assume you are familiar with JavaScript. In this tutorial, we’re going to use some ES6 features like arrow functions, classes, let, and const statements.

This tutorial is not about setting up a build environment for React, so for the easy use, we will use create-react-app.

Before we start, here is the source code. And a live version can be found here.

Setup the environment

As current node version, when writing this guide, is 10.12; I assume you can use npx as it is available since version 5.2.

$ npx create-react-app opencage-react-app

it outputs :

Creating a new React app in \[...\]/opencage-react-app.Installing packages. This might take a couple of minutes.  
Installing react, react-dom, and react-scripts...yarn add v1.10.1  
\[1/4\] 🔍  Resolving packages...  
\[2/4\] 🚚  Fetching packages...  
\[3/4\] 🔗  Linking dependencies...  
\[4/4\] 📃  Building fresh packages...  
success Saved lockfile.  
success Saved 11 new dependencies.  
info Direct dependencies  
├─ react-dom@16.5.2  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
info All dependencies  
├─ babel-plugin-dynamic-import-node@2.2.0  
├─ babel-preset-react-app@5.0.4  
├─ confusing-browser-globals@1.0.4  
├─ eslint-config-react-app@3.0.4  
├─ eslint-plugin-jsx-a11y@6.1.2  
├─ object.assign@4.1.0  
├─ react-dev-utils@6.0.5  
├─ react-dom@16.5.2  
├─ react-error-overlay@5.0.5  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
✨  Done in 79.89s.Initialized a git repository.Success! Created opencage-react-app at \[...\]/opencage-react-app  
Inside that directory, you can run several commands: yarn start  
    Starts the development server. yarn build  
    Bundles the app into static files for production. yarn test  
    Starts the test runner. yarn eject  
    Removes this tool and copies build dependencies, configuration files  
    and scripts into the app directory. If you do this, you can’t go back!We suggest that you begin by typing: cd opencage-react-app  
  yarn startHappy hacking!

Start hacking

First part

Let’s do the suggested commands

$ cd opencage-react-app  
$ yarn start

The project is built in development mode and it opens your favourite browser on http://localhost:3000.

The page will automatically reload if you make changes to the code. So let’s do it.

First of all download opencage svg logo and copy it to the src/ folder

Open your IDE or Text Editor with the folder opencage-react-app

Edit the file ./src/App.js

replace

import logo from './logo.svg';

with

import logo from './opencage-white.svg';

The app is rebuilt and instead of the atomic react logo, you should now have a Open Cage logo.

use CTRL + C to stop the development server.

We will now add dependencies to the project.

First the style, you can pick up your favourite CSS framework (flexbox, bootstrap or material UI), for this tutorial I picked up Bulma as it is javascript free, then no react wrapper is needed to keep this tutorial simple and focused only on opencage geocode API integration.

$ yarn add bulma

it outputs

yarn add v1.10.1  
\[1/4\] 🔍  Resolving packages...  
\[2/4\] 🚚  Fetching packages...  
\[3/4\] 🔗  Linking dependencies...  
\[4/4\] 📃  Building fresh packages...success Saved lockfile.  
success Saved 3 new dependencies.  
info Direct dependencies  
├─ bulma@0.7.2  
├─ react-dom@16.5.2  
└─ react@16.5.2  
info All dependencies  
├─ bulma@0.7.2  
├─ react-dom@16.5.2  
└─ react@16.5.2  
✨  Done in 8.61s.

let’s create an Header component:

Rename App.css into Header.css. Then edit Header.css, we will avoid being see sick with the infinite loop animation and place the center text in the header only. The header will be a header not whole view port page.

Create ./src/Header.js file:

Edit ./src/index.js, adding

import 'bulma/css/bulma.css';

after

import './index.css';

now edit App.js, we first use the Header Component and then we prepare 2 columns.

Now add packages dependencies like the opencage API client, LeafletJS, and classnames:

$ yarn add opencage-api-client leaflet classnames

opencage-api-client is the client library for Opencage Geocoder API
LeafletJS is the well-known web mapping API
classnames is a javascript utility lib to help build className attributes

We can start the dev server with $ yarn start

For now the app looks like this

In the first column we will set up the form with the search input parameters. In the second column, we will have the results as multiple tabs, starting with the readable results (formatted address and coordinates), and a second tab with the raw JSON result from the API. As you can see in the following design, we will create two main components and GeocodingFormand GeocodingResults

Create a file ./src/GeocodingForm.js

Then create a file ./src/GeocodingResults.js

We need to create files ./src/ResultList.js and ./src/ResultJSON.js

To finish the first part, wire the application with those two main components (GeocodingForm and GeocodingResults)

Edit the ./src/App.js file, first the imports:

now add a constructor

the App handles input text changes and the submit.

So first add the handleChange method

Followed by the handleSubmit method

Last touch for this first part, we add the main components in the render method:

Here is what the app now looks like

Second part

In this part we will add a map tab in the result section.

First let’s create a ./src/ResultMap.js file :

Download the pin icon from marker-icon-red.png and save it to public/ folder.

As the map needs a height, we create a ./src/ResultMap.css file :

Back in ./src/GeocodingResuls.js add the tab in the ul _s_ection

and with the other results content add the map:

The app now contains a map

I really hope this was helpful for you. If it was, please, do let me know so that I can write more posts like this. You can always reach me out on Twitter and again if you followed this tutorial along till the end, I am really proud of you guys.

Resources

Opencage Data Geocoder: https://opencagedata.com/
Source code repository on github : https://github.com/tsamaya/opencage-react-guide
Demo version on netlify : https://unruffled-kirch-3cd76e.netlify.com/

DEV Community: Arnaud Ferrand

Building a Powerful Geocoding Solution with OpenCage and Thunderforest Maps

Tutorial

Full Code

Conclusion

What's Next?

How to set up a Node Project using TypeScript in 2024

Create the project

Initialize the project

Install dev dependencies

Initialize TypeScript

Customize

dotenv file

Let's code

run with pnpm dev

.gitignore file

Conclusion

Credits

Using Opencage Gecoder API with REACT [2nd edition]

Overview

Setup the environment

Start hacking

First part

Second part

The end

Resources

Geocode with OpenCage and MapLibre

Header

Body

Script

Map

Geocode

Demo

The end

Resources

ESLint and Prettier configuration for React project

Pre-commit Hook with lint-staged

Resources

OpenCage API integration with AWS Cloud

Resources

From Medium to Markdown to Dev.to

Medium to Markdown

Resources

OpenCage API and ArcGIS API for JavaScript

How to use the OpenCage Data Geocoder API with ArcGIS API for JavaScript

Get started

Tutorial

Reference the ArcGIS API for JavaScript

Create a map

Add the search widget

Add the custom source : OpenCage Data

Congratulations, you're done!

Thank for reading 🙏

Resources

Using Opencage Gecoder API with REACT

Overview

Setup the environment

Start hacking

First part

Second part

Resources

`.gitignore` file