Strona główna → Wtyczki → Store Locator for OpenStreetMap

Własna wtyczka · WordPress + Bricks

Mapa punktów bez klucza Google Maps.

Wyszukiwarka sklepów, salonów albo punktów odbioru na mapie — zbudowana na Leaflecie i OpenStreetMap, więc bez konta w Google Cloud, bez karty płatniczej i bez rozliczeń za wyświetlenia mapy.

GPL-2.0-or-later WordPress 6.0+ PHP 8.0+ Leaflet + OpenStreetMap element Bricksa
element natywny

Widget Bricks Buildera w komplecie

Lokator nie jest shortcode’em wklejonym w kontener. To pełnoprawny element Bricksa: własne miejsce na liście elementów i własna ikona, trzynaście kontrolek w panelu, a mapa renderuje się na żywo w edytorze i przerysowuje po każdej zmianie ustawienia. Dla zespołu pracującego w Bricksie to różnica między ustawianiem mapy na ślepo a widzeniem efektu od razu.

Jak się taki element pisze — case study →

Co robi

Lokalizator, który prowadzisz sam.

✓

Mapa z punktami, wyszukiwarka po adresie i „blisko mnie” — wraz z filtrem kategorii i grupowaniem pinów, gdy jest ich dużo.

✓

Działa też poza Bricksem — ten sam lokator wstawisz zwykłym shortcode’em na dowolnym motywie, a generator składa go za Ciebie.

✓

Punkty jako zwykłe wpisy z własną kategorią — osoba prowadząca stronę dodaje je tak samo jak wszystko inne, z mapą w metaboksie.

✓

Geokodowanie masowe dla list wgranych hurtem oraz lista lokalizacji z podglądem współrzędnych.

✓

Panel ustawień w czterech zakładkach i generator shortcode’u — zamknięta lista opcji zamiast pola na dowolny kod.

Co mówimy wprost

Publiczny geokoder OpenStreetMap ma limit jednego zapytania na sekundę i nie wolno go używać do ciężkiego ruchu. Przy dużym sklepie potrzebna jest własna instancja albo płatny dostawca — mówimy o tym przed wdrożeniem, nie po pierwszym blokadzie.

Leaflet jest pakowany razem z wtyczką, nie ładowany z cudzego CDN-u. Strona nie przestanie działać dlatego, że ktoś inny wyłączył serwer.
Jak jest zbudowana

Zbudowana tak, żeby dało się ją utrzymać.

Pomysł wziął się z wdrożenia dla firmy z Holandii, gdzie mapa punktów miała działać bez Google Maps. To, czego nauczyliśmy się tam o sklepie z wieloma lokalizacjami, wróciło tutaj jako wtyczka napisana od podstaw.

Kod, który znamy w całości

Architektura, nazwy i struktura powstały u nas, więc każda zmiana idzie u źródła — nowa funkcja albo poprawka nie wymaga odgadywania, co ktoś inny miał na myśli. Przy pilnej poprawce to różnica między godziną a tygodniem.

Bez jQuery, bez npm, bez kroku budowania

Front to czysty JavaScript, komunikacja idzie przez REST zamiast admin-ajax, a repozytorium zawiera dokładnie te pliki, które trafiają na serwer. Nie trzeba niczego kompilować, żeby wprowadzić poprawkę.

Odczyt danych za jedną klasą

Całe czytanie punktów idzie przez repozytorium, więc przejście na własną tabelę przy kilku tysiącach lokalizacji to podmiana jednej klasy i migracja, a nie przepisywanie wtyczki.

Geokoder z cache i hamulcem

Zapytania o współrzędne idą przez własne proxy z pamięcią podręczną i limitem jednego zapytania na sekundę — tak, jak wymaga tego regulamin usługi.

Styl, który nie walczy z motywem

Arkusz jest rozłożony na warstwę układu, która działa zawsze, i skórkę, którą można wyłączyć jednym ustawieniem. Kontrolki dziedziczą typografię strony, a przyciskom można podać klasę z motywu.

Czego nauczyło nas pisanie tego

Trzy pułapki, które kosztowały najwięcej czasu.

Każda decyzja opisana wyżej ma swój test — zestaw PHP i JavaScriptu uruchamia się jednym poleceniem, bez bazy i bez instalacji WordPressa. Ale trzech rzeczy poniżej nie złapał żaden z nich.

Element znikał bez śladu. Na stronie renderowanej z szablonu treści Bricksa element nie wyświetlał się w ogóle — bez HTML-a, bez błędu PHP i bez niczego w konsoli. Takich rzeczy nie złapie żaden test jednostkowy; złapało dopiero wdrożenie na żywej stronie.

Mapa, która wygląda na zepsutą, a jest pusta. Domyślny środek mapy w okolicach zera to Zatoka Gwinejska — jednolity błękit, który każdy bierze za niewczytane kafelki. Drobiazg, który kończy się telefonem „mapa nie działa”.

Kilkaset testów nie zastąpi jednego kliknięcia. Cztery kontrolki w edytorze Bricksa były martwe mimo kompletu przechodzących testów JavaScript. Dlatego lista sprawdzeń ręcznych jest częścią planu wydania, a nie dobrą chęcią.

Zacznijmy

Potrzebujesz mapy punktów na swojej stronie?

Wdrożymy ten lokalizator u Ciebie albo napiszemy element Bricksa pod Twój konkretny przypadek. Napisz, ile masz punktów i skąd bierzesz ich listę.

Opisz swój przypadek →

Albo mailem: info@asymetria.com.pl