26 Cze 2020

Dodawanie, przesuwanie i kasowanie markerów – Leaflet

Ten wpis pokaże w jaki sposób dodać, przesuwać oraz kasować markery. Przykład ten można fajnie wykorzystać. Jeżeli chcemy poznać współrzędne np. firmy. Moglibyśmy zrobić formularz w popupie który przechwyci kliknięcie i współrzędne geograficzne, jakieś pole na nazwę firmy, pole na opis firmy. Przydał by się również przycisk który zapisze te dane w bazie, a później wyświetlić te informacje wraz z markerem na produkcyjnej mapie.

To jak konfigurujemy prostą mapę opisałem tutaj alternatywa dla google maps OSM oraz leaflet więc nie będę się już rozpisywał na ten temat.

<div class="marker-position">click on the map, move the marker, click on the marker</div>
<div id="map"></div>
16 Cze 2020

Użycie GeoJson z Leaflet

Wracamy do serii artykułów w których opisuję różne użycia Leaflet. Dzisiaj poruszymy temat GeoJson.

GeoJson jest to nic innego jak plik JSON, który reprezentuje cechy geograficzne. Nie posiada on formalnych standardów, może reprezentować punty, adresy i lokalizacje, kraje, prowincje i wiele innych elementów. Zerknijcie na wpis w wiki

30 Sty 2020

Jak do Open Street Map i Leaflet dodać routing – OSRM

Słowo się rzekło, a więc o to krótki wpis o tym jak podłączyć ruting do OSM.
Będziemy opierać się o OSRM Open Source Routing Machine oraz skorzystamy z pluginu Leaflet Routing Machine.

Na wstępie uprzedzę że przykład może nie działać za każdym razem, będę używać nominatim.openstreetmap.org w wersji demo. W związku z tym pod każdym kodem będę zamieszczał „print screen” 😉

Nie jest to także opis instalacji środowiska, maszyny z bazą danych. Taki opis możecie znaleźć tutaj osrm backend, a jeżeli komuś się zamarzyło postawienie takiej maszyny u siebie lokalnie niech najpierw przeczyta ten opis disk and memory requirements 😉

13 Sty 2020

Alternatywa dla google maps – Open Street Map oraz Leaflet

Inspirację do napisania tego wpisu było zebranie całej wiedzy w jednym miejscu. Nigdzie nie spotkałem się z całościowym artykułem, wszystko jest porozrzucane po internecie i trzeba nieźle się naszukać.

Wszystkie przykłady będą opierały się o OSMOpen Street Map jest darmowa i dostępna dla wszystkich. Oczywiście jeżeli chcesz ją wykorzystać w większym zakresie to lepiej samemu postawić serwer, który będzie serwować mapy do tego również warto dodać serwer z routingiem bo OSM ich nie posiadają.

Aby mapa w ogóle miała sens należy użyć jakieś biblioteki do obsługi tejże mapy. W naszym przypadku użyjemy Leaflet.

Do każdego punktu postaram się dodać przykłady zrobione w https://jsfiddle.net, najlepiej kliknąć w Edit in JSFiddle aby zobaczyć wynik bo nie zawsze poprawnie na tej stronie się wyświetlają przykłady.

Niestety jedną wielką bolączką OSM jest to, że nie ma w nich zaszytego routingu tak jak w google maps. W związku z tym nie jesteśmy w stanie wyznaczyć trasy a punktu A do punktu B. Jest oczywiście inny serwis który to wspiera i można to z powodzeniem połączyć z OSM.
Więcej informacji za i przeciw mapom OSM w podsumowaniu.

16 Paź 2019

Jak dodać kolorowe markery w postaci svg oraz legendę do map z leaflet

Założenia naszego przykładu to:
– markery w różnych kolorach
– kolory markerów opisane w legendzie po prawej stornie na dole

Markery

Aby markery miały różne kolory najlepiej wykonać je w svg a kolory uzyskujemy przez dodanie parametru fill=”nasz-color”. Oczywiście jest wiele innych możliwości, jak wykorzystanie png, czy nawet font awesome i kolorowanie odpowiednie i wiele innych.

Zaczynamy od stworzenia html, do którego w sekcji head dodajemy style oraz js z cdn dotyczące leaflet. Html posiada div z id map, do którego będziemy „pakować” całą mapę 😉

< !DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"/>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
</head>

<body>
  <div id="map"></div>
  <script src="script.js"></script>
</body>

</html>

Następnie w pliku script.js dodajemy poniższy kod który odpowiada za wyświetlenie mapy a dokładnie mapy z Warszawą.

const map = L.map('map').setView([52.237049, 21.017532], 13)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)