0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VisualStudio2017 > Reactテンプレート(TypeScript) > leaflet

Last updated at Posted at 2018-05-16

VisualStudio2017のReactテンプレートを使ってleafletを表示します。 (IE11対応)

環境

バージョン:asp.net core 2.0

asp.net core 2.0のReactテンプレートはTypeScriptになります。
よってTypeScriptで記述していきます。

プロジェクト作成

React.jsテンプレートを使ってプロジェクトを作成します。

image

package.json

leaflet と@types/leafletを追加します。

"devDependencies": {
    "leaflet": "1.3.1"
},
"dependencies": {
    "@types/leaflet": "^1.2.7"
}

components

不要ファイル削除

ClientApp/components/配下の不要なファイルを削除
以下のファイル群はすぱっと消す

  • FetchData.tsx
  • Counter.tsx
  • NavMenu.tsx

ファイル追加

マップ用のコンポーネント追加

  • MapWorld.tsx

現状で以下のような構成になる
image

ファイル修正

routes.tsx

ファイルを削除したのでルーター設定も変更する。

routes.tsx
import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
</Layout>;

Layout.tsx

マップを全画面表示にする。

Layout.tsx
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>;
    }
}

site.css

マップを全画面表示にするためのCSS設定。

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

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

MapWorld.tsx

Leafletを表示するコンポーネント

MapWorld.tsx
import * as React from 'react';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export class MapWorld extends React.Component<{}, {}> {
    componentDidMount() {
        this.init();
    }

    private init() {
        let map = L.map('map')
        let basemapLayer = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/github.map-xgq2svrz/{z}/{x}/{y}.png');
        map.addLayer(basemapLayer);
        map.setView([35.6693863, 139.6012974], 5);
    }
    public render() {
        return <div id="mapUI">
            <div id='map'>a</div>
        </div>;
    }
}

Home.tsx

Leafletを表示するコンポーネントを表示する。

Home.tsx
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { MapWorld } from './MapWorld';

export class Home extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return <MapWorld />;
    }
}

以上

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?