Je eerste MapLibre plugin creëren

Bij Nazka Mapps, wilden we iets teruggeven aan de opensource gemeenschap. Dus besloten we om onze eigen marker spiderfication oplossing te opensourcen als een MapLibre GL JS plugin. Ik kon geen documentatie vinden over het creëren van een Maplibre plugin dus heb ik mijn eigen onderzoek gedaan en besloot het hier met jullie te delen.

Wat maakt een goede plugin

Idealiter bereid je plugin de kernfunctionaliteiten van MapLibre GL JS uit zonder conflicten of inconsistenties te introduceren. Om dit te bereiken moet je proberen om de interactie van je plugin met de MapLibre code tot een absoluut minimum te beperken. Dit zal er hopelijk voor zorgen dat je plugin niet kapot gaat bij elke nieuwe MapLibre release.

Code structureren

De meeste MapLibre GL JS plugins zijn gebouwd als JS klassen. Als je plugin een map control heeft, dan is het kiezen voor JS classes een no brainer. Custom map controls in MapLibre moeten gebouwd worden als een klasse met een onAdd en onRemove methode. Je plugin kan gewoon een aangepast besturingselement zijn dat is gepubliceerd als een npm-pakket.

// goed start punt voor een control plugin

class HelloWorldControl {
    onAdd(map) {
        this._map = map;
        this._container = document.createElement('div');
        this._container.className = 'maplibregl-ctrl';
        this._container.textContent = 'Hello, world';
        return this._container;
    }

    onRemove() {
        this._container.parentNode.removeChild(this._container);
        this._map = undefined;
    }
}

Dit is slechts één optie, want er is geen verkeerde manier om de code van je plugin te structureren. Het is aan je eigen voorkeuren. De beste aanpak hangt vaak af van de behoeften van je plugin.

Als je inspiratie nodig hebt kun je altijd de aanpak van andere MapLibre plugins bekijken.

Er een NPM-pakket van maken

Er zijn veel tutorials die je hierbij kunnen helpen. Ik denk dat deze bijzonder nuttig is. Ik raad aan om "maplibre" in je pakketnaam te gebruiken omdat dit de zichtbaarheid ten goede komt.

The sky is the limit!

Als je een geweldig idee hebt, moet je er gewoon voor gaan. Schrijf je code op een manier die voor jou logisch is. Concentreer je op het verkrijgen van een proof of concept en denk er niet te lang over na want je kunt het achteraf altijd nog verbeteren.

Succes!