react-leaflet-coordinates

1.0.1 • Public • Published

react-leaflet-coordinate

A react-leaflet control to display the coordinates under the cursor

NPM JavaScript Style Guide

About

A react-leaflet control to display the coordinates under the cursor. Supports decimal degrees and DMS.

Installation

npm install --save react-leaflet-coordinate
yarn install

Usage

Simply import the CoordinateControl and place as a child of the Map component.

import React, { Component } from 'react'
import { Map, TileLayer } from 'react-leaflet'
 
import { CoordinatesControl } from 'react-leaflet-box-zoom'
 
export default class App extends Component {
 
render () {
  return (
      <div className="map">
        <Map
          center={[44.635, 22.653]}
          zoom={12}
          zoomControl={false} >
 
          <TileLayer
            attribution="Google Maps"
            url="https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"/>
 
          <CoordinatesControl />
        </Map>
      </div>
    )
  }
}

Props

Name Default Description
position bottomleft Position of the control. Valid values are topleft, topright, bottomleft, or bottomright
style null A react css style prop for the button.
coordinates decimal Coordinate system to use. Valid values are decimal (decimal lat/lng) or degrees (degrees, minutes, seconds)

Development

This was created with create-react-library. To develop locally run the library in the root directory.

yarn install
yarn start

Then in a seperate console tab run the example app

cd example
yarn install
yarn start

License

MIT © ChrisLowe-Takor

Readme

Keywords

none

Package Sidebar

Install

npm i react-leaflet-coordinates

Weekly Downloads

155

Version

1.0.1

License

MIT

Unpacked Size

36.1 kB

Total Files

6

Last publish

Collaborators

  • chris_lowe