React-Leaflet

React-Leaflet · ⚛️ React components for 🍃 Leaflet maps

webプロジェクト作成

package.jsonに追加

    "leaflet": "1.3.1",
    "@types/react-leaflet": "1.1.5",
    "@types/prop-types": "15.5.2",
    "react-leaflet": "1.9.1"

site.css

.leaflet-container {
    height: 400px;
    width: 100%;
}

boot.tsx

/ClientApp/boot.tsx

// leaflet css
import '../node_modules/leaflet/dist/leaflet.css';

routes.tsx

/ClientApp/routes.tsx

import { MapWanNavi } from './components/Map';

export const routes = <Layout>
    <Route path='/Map' component={MapWanNavi} />
</Layout>;

Map.tsx

/ClientApp/components/Map.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { LatLngLiteral } from 'leaflet';


interface ReactLeafletState {
    lat: number;
    lng: number;
    zoom: number;
}


export class MapWanNavi extends React.Component<RouteComponentProps<{}>, ReactLeafletState> {
    constructor() {
        super();

        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13,
        }
    }


    render() {
        var position: LatLngLiteral = { lat: this.state.lat, lng: this.state.lng};

        return (
            <Map center={ position }  zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={ position }>
                    <Popup>
                        <span>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </span>
                    </Popup>
                </Marker>
            </Map>
        )
    }
}

result

link

Installation · React-Leaflet