Skip to content

Latest commit

 

History

History
160 lines (136 loc) · 5.01 KB

README.md

File metadata and controls

160 lines (136 loc) · 5.01 KB
Raw

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 library
is used in example. See demo here.

NPM Code Style

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, receives
two arguments: selected location object
and 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}` : '')
  );

License

MIT © nikolovskialeksandar