React-geonames NPM

react-geonames

Geocoder react component that is using Geonames API. Geonames is geographical database with various free webservices, this component is using webservice for location search. You can use it with Mapbox map service or another map service. React mapbox libraryis used in example. See demo here.

Install

npm install --save react-geonames

Usage

import React, { Component } from 'react';

import Geocoder from 'react-geonames';
import ReactMapGL from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// Importing additional styles
import 'react-geonames/dist/geonames.css';

const queryParams = {
  type: 'json',
  maxRows: 10,
};

class App extends Component {
  state = {
    viewport: {
      width: 700,
      height: 500,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 10,
    },
    place: {},
  };

  onSelect = (place, placename) => {
    this.setState((prevState) => ({
      viewport: {
        ...prevState.viewport,
        latitude: +place.lat,
        longitude: +place.lng,
        zoom: 10,
      },
      place: {
        latitude: +place.lat,
        longitude: +place.lng,
        placename: placename,
      },
    }));
  };

  onClear = () => {
    this.setState({ place: {} });
  };

  render() {
    return (
      <div>
        <Geocoder
          username=[YOUR_GEONAMES_USERNAME]
          https
          queryParams={queryParams}
          placeholder="Search"
          onSelect={this.onSelect}
          onClear={this.onClear}
        />
        <ReactMapGL
          {...this.state.viewport}
          onViewportChange={(nextViewport) => this.setState({ viewport: nextViewport })}
          mapboxApiAccessToken=[YOUR_MAPBOX_TOKEN]
          mapStyle="mapbox://styles/mapbox/streets-v11"
        />
      </div>
    );
  }
}

export default App;

Props

Property	Type	Description	Default
onSelect	function (required)	Function that sets viewport or marker, receivestwo arguments: selected location objectand formated location name	-
username	string (required)	Geonames username	-
onClear	function	Function triggered when clear button is clicked or input field is cleared	-
timeout	number	Debounce time between requests while typing	300
https	boolean	Use HTTPS Geonames endpoint(HTTP is used in their documentation examples)	false
placeholder	string	Input field placeholder	'Search'
label	string	Input field label	-
queryParams	object	Geonames search parametars, you can see documentation here	{ type: 'json', maxRows: 10}
formatResult	function	Function for formating single result	See below
formatSelectedResult	function	Function for formating selected result shown in input field	See below

Styling

Component has no style out of box, you can style it yourself using classes from the list or import styling

import 'react-geonames/dist/geonames.css';

as shown in example above.

Class list

Element	Class
Geocoder container	.react-geonames
Input area	.react-geonames-input-area
Input element	.react-geonames-input
Clear button	.react-geonames-clear-button
Results list	.react-geonames-results
Single result	.react-geonames-item

Element hierarchy

Geocoder container
  └── Input area
  │    ├── Input element
  │    └── Clear button
  └── Results list
       └── Single result

Formating results

Formating single result

Single result can be customized by passing function to formatResult prop. For additional administrative regions add style: 'full' to queryParams prop.

Default:

  formatResult = (place) => (
    <div>
      <span>{place.toponymName}</span>
      <div style={{ color: 'gray' }}>
        {place.adminName1 ? ` ${place.adminName1}, ` : ''}
        {place.countryName ? ` ${place.countryName}` : ''}
      </div>
    </div>
  );

Formating selected result

By passing function to formatSelectedResult you can customize selected result displayed in input field, which is also returned as argument to onSelect prop.

Default:

  formatSelectedResult = (place) => (
    place.toponymName
      .concat(place.adminName1 ? `, ${place.adminName1}` : '')
      .concat(place.countryName ? `, ${place.countryName}` : '')
  );