Last updated
Last updated
The Leaflet feature (@adminjs/leaflet
) integrates Leaflet () into AdminJS allowing you to visualize your maps and markers.
@adminjs/leaflet
package exports two features that you should use based on your use case.
leafletSingleMarkerMapFeature
should be used when your resource is the Marker
itself, and you only want to display a single marker on the rendered map. This should be used when, for example, you'd like to change a specific marker's location without displaying all your markers on a map.
leafletMultipleMarkersMapFeature
should be used when your resource is a collection of Marker
s. An example could be a Map
resource with Marker
being a separate resource. This feature will allow you to manage all associated markers.
leafletMultipleMarkersMapFeature
will not display the map when creating a new Map
record due to dynamic management of markers. Whenever you drag, edit, create or delete a Marker
, the change takes effect immediately which relies on your Map
to had been created before. If you want to manage your Map
markers, create the Map
first and you can manage them via edit
action.
The usage tutorial will be split into two sections related to the feature you're using but there are some common steps you must take to get the features working.
First of all, you have to import getLeafletDist
from @adminjs/leaflet
. Leaflet library has it's own CSS which is required for the maps to display properly but AdminJS core does not let you import CSS files directly into React components (as of version 6). As a workaround, @adminjs/leaflet
exports getLeafletDist
utility function which resolves a path to Leaflet dist files in your node_modules
. These dist files have to be exposed by your server framework. The example below shows how you can do it with express
.
Alternatively, you can provide a CDN link to leaflet.css
in styles
.
In the example above, we also instantiated a ComponentLoader
. Take note of that, as it will be used by Leaflet features later.
The AdminJS
configuration described above should be extended with your Marker
resource.
The feature goes inside features
in your resource specification. Take a look at the example below which includes comments on how you can configure the feature.
The AdminJS
configuration described above should be extended with your MapEntity
resource.
We use MapEntity
instead of simply Map
for entity name because Map
is a reserved name in Javascript.
The feature goes inside features
in your resource specification. Take a look at the example below which includes comments on how you can configure the feature.
leafletMultipleMarkersMapFeature
works best when combined with leafletSingleMarkerMapFeature
in your Marker
resource.
An example application can be found in .
@adminjs/leaflet
is still in its early development phase. If you have any ideas on how to improve it, add new features or if you find any bugs, please create an issue in its .
@adminjs/leaflet