VisualStudio2017 > React 템플릿(core 2.1) > leaflet

환경

버전: asp.net core 2.1

asp.net core 2.0의 React 템플릿은 TypeScript 이었지만,
asp.net core 2.1에서 ES6 (JavaScript)로 바뀌어 create-react-app로 작성된 프로젝트가 기반이되었습니다.

이번에는 거기에 Leaflet을 추가합니다.

프로젝트 만들기

React.js 템플릿을 사용하여 프로젝트를 만듭니다.

package.json

leaflet을 추가합니다.

"dependencies": {
    "leaflet": "1.3.1"
}

components

불필요한 파일 삭제

ClientApp/src/components/부하의 불필요한 파일 삭제
다음 파일 그룹은 완전히 지워집니다.

FetchData.js

Counter.js

NavMenu.js

NavMenu.cs

파일 수정

App.js

파일을 삭제했기 때문에 라우터 설정도 변경한다.

App.js

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';

export default class App extends Component {
  displayName = App.name

  render() {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
      </Layout>
    );
  }
}

Layout.js

ClientApp/src/components/Layout.js
지도를 전체화면 표시로 한다.

Layout.js

import * as React from 'react';

export interface LayoutProps {
    children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, {}> {
    public render() {
        return <div id='root'>
            {this.props.children}
        </div>;
    }
}

index.css

ClientApp/src/index.css

맵을 전체화면으로 표시하기 위한 CSS 설정.

index.css

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#react-app, #root, #map, #mapUI {
    width: inherit;
    height: inherit;
    background-color: #fffff;
}

MapWorld.js

ClientApp/src/components/MapWorld.js 추가

※Leaflet을 표시하는 컴퍼넌트가 된다.

MapWorld.js

import React, { Component } from 'react';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export class MapWorld extends React.Component {
    componentDidMount() {
        let map = L.map('map').setView([35.6693863, 139.6012974], 5);
        let basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png');
        map.addLayer(basemapLayer);
    }

    render() {
        return <div id="mapUI">
            <div id='map'>a</div>
        </div>;
    }
}

Home.js

Leaflet을 표시하는 구성 요소를 표시합니다.

Home.js

import React, { Component } from 'react';
import { MapWorld } from './MapWorld';

export class Home extends Component {
  displayName = Home.name

  render() {
    return (
        <MapWorld />
    );
  }
}

결과

이상