Skip to content

Latest commit

 

History

History
 
 

leaflet

Example app with leaflet map

This is a very basic example of remix app with leaflet map.

Preview

Open this example on CodeSandbox:

Open in CodeSandbox

Example

This example shows how to use Leaflet with Remix.

Relevant files:

Leaflet cannot be rendered on the server side, so we're using the ClientOnly component to display a skeleton instead. It's important to add the .client.tsx suffix to the Map component file name, otherwise, you will get this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /remix/examples/leaflet/node_modules/react-leaflet/lib/index.js from /remix/examples/leaflet/build/index.js not supported.

The leaflet styles can be imported either from node_modules or CDN. If you choose to import the styles from node_modules, you'll need to add the leaflet assets in the /public folder. The assets can be found here: https://unpkg.com/browse/[email protected]/dist/images/

Related Links