Let's meet the react-map-gl at StackBlitz

[yuiseki]

Actual Examples

most simple react-map-gl on vitejs

• https://stackblitz.com/edit/vitejs-vite-fok6zt?file=src%2FApp.tsx

layer of react-map-gl on vitejs

• https://stackblitz.com/edit/vitejs-vite-eehfq3?file=src%2FApp.jsx

How to start your own react-map-gl project at StackBlitz

Open https://stackblitz.com/

Sign up with GitHub Account

Click + New Project

Click Vite

Click react-ts

Input Terminal

npm i -f maplibre-gl react-map-gl

Edit src/App.tsx

import {
  Map,
  GeolocateControl,
  NavigationControl,
} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Map
        initialViewState={{
          longitude: 139.795897,
          latitude: 35.723547,
          zoom: 12,
        }}
        style={{ width: '100%', height: '100%' }}
        mapStyle="https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json"
      >
        <GeolocateControl position="top-right" />
        <NavigationControl
          position="top-right"
          visualizePitch={true}
          showZoom={true}
          showCompass={true}
        />
      </Map>
    </div>
  );
}

export default App;

Input Terminal

npm install --legacy-peer-deps && npm run dev

[hfu]

Thanks @yuiseki, it works with me, too.
https://stackblitz.com/edit/vitejs-vite-4it7c9?file=src%2FApp.tsx

[hfu]

PMTiles を使えるようにして、hash をつけることに成功しました。
https://stackblitz.com/edit/vitejs-vite-dl3ktd?file=src%2FApp.tsx

[hfu]

#274