10 dni temu pisałem, że chciałbym pokończyć kilka projektów, które zacząłem wiele lat temu, ale z różnych powodów nie zostały skończone. Ostatnio wspomniałem o mapie z placami zabaw.
https://www.hejto.pl/wpis/odgrzebalem-kolejny-projekt-ktory-robilem-okolo-5-6-lat-temu-i-to-chyba-dobry-mo
Projekcik jest bardzo mały i składał się z kilku etapów.

1. Najpierw musiałem stworzyć Overpass query aby pobrać interesujące mnie dane z OSM. Tym zapytaniem chwaliłem się przy okazji poprzedniego wpisu. Posiada ono jeszcze kilka informacji, których aktualnie nie używam np. stworzyłem taki dynamiczny tag, który jest generowany na podstawie tego co się znajduje wewnątrz placu zabaw. Teoretycznie mógłbym robić takie sprawdzanie po stronie klienta, ale byłoby to dość skomplikowane. W przyszłości użyję tego do filtrowania wyników, które pojawiają się na mapie.
   
2. Ponieważ dawno nie pisałem frontendu (a szczególnie takiego małego) to musiałem znaleźć jakieś rozwiązanie, które by odpowiednio konwertowało kod TS na JS. @marmot polecił ParcelJS i muszę przyznać, że był to strzał w 10.
   
3. Na koniec zostało już napisanie strony internetowej, ale magii tam nie ma. Kilka klas, które są odpowiedzialne na pobieranie danych z OpenStreetMap i wyświetlanie ich na mapie. Dodatkowo aby nie pobierać za dużo danych na raz jest zrobione kafelkowanie i pobieranie danego obszaru. Następnie dane są zapisywane w localstorage aby nie obciążyć zbytnio serwerów overpass.
   

W sumie na całość poświęciłem około 5-6 godzin (miałem pewne ułatwienie w postaci projektów, które kiedyś pisałem i nie musiałem wszystkiego wymyślać od zera) łącznie ze zrobieniem prymitywnych ikonek w inkscape i może projekt nie jest bez wad, ale staje się powoli używalny. W wolnych chwilach czeka mnie czyszczenie kodu dodanie komentarzy oraz kilka funkcjonalności, które już dawniej planowałem.
Efekt jest tutaj:
https://dotevo.github.io/ludparko/#51.1214,17.0520,18
https://github.com/dotevo/ludparko/tree/master/src
W sumie to polecam używanie OpenStreetMap i tworzenie projektów przy użyciu np. OverpassAPI. Może mój projekt kogoś zainspiruje do mapowania lub tworzenia projektów opartych na OSM.
#openstreetmap #opensource #programowanie

Odgrzebałem kolejny projekt, który robiłem około 5-6 lat temu i to chyba dobry moment, aby go dokończyć - a w sumie to zrobić od zera bo kod gdzieś zaginął.
Projekt powstawał, gdy mój syn miał około 2 lata. Wtedy sporo spacerowałem z nim po Wrocławiu i chodziliśmy po różnych placach zabaw. W pewnym momencie pomyślałem, że fajna byłaby strona, która pokazuje co na danym placu zabaw jest np. huśtawki, piaskownica itd. Dodatkowo aby była możliwość pofiltrowania i takie tam. W tym czasie robiłem całkiem sporo projektów w #openstreetmap   np. indoor Map, mapę dla rowerzystów i takie tam projekciki. Często bardziej istotne było aby zrobić je w jeden - może dwa dni niż, żeby były ładne zarówno od strony użytkownika jak i kodu.
Pierwszy krok mam zrobiony, czyli zapytanie do overpass, które pomoże wyświetlić mi dane:
https://overpass-turbo.eu/s/1vbg
Gdy znajdę chwilkę czasu to pewnie przy użyciu leaflet ogarnę stronkę z wyświetlaniem.
#programowanie #mapy

Miał ktoś może styczność z #openstreetmap i bibliotekami Leaflet oraz wyświetlaniem warstw z WMS Geoportalu przy udziale Leaflet.WMS?
Chce na mapę zaciągnąć warstwę Hydro i ni jak nie wyświetla się.
Warstwa:
wms:[http://mapy.geoportal.gov.pl/wss/service/img/guest/HYDRO/MapServer/WMSServer?FORMAT=image/png&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=1&STYLES=&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}{header(User-Agent,Mozilla/5.0](http://mapy.geoportal.gov.pl/wss/service/img/guest/HYDRO/MapServer/WMSServer?FORMAT=image/png&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=1&STYLES=&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}{header(User-Agent,Mozilla/5.0) (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0)}
Mój kod:
  <script>
    //definicja mapy
var map = L.map('map');
//dodanie warstwy OSM
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);
//definicja parametrów WMS
var wmsUrl = 'https://mapy.geoportal.gov.pl/wss/service/img/guest/HYDRO/MapServer/WMSServer';
var layerName = '1';
var projection = 'EPSG:3857';
//definicja warstwy WMS
var hydroLayer = L.tileLayer.wms(wmsUrl, {
  layers: layerName,
  format: 'image/png',
  transparent: true,
  version: '1.1.1',
  crs: L.CRS.EPSG3857,
  uppercase: true,
  attribution: '© Geoportal'
});
//dodanie warstwy WMS do mapy
hydroLayer.addTo(map);
//wycentrowanie mapy na obszarze pokrytym warstwą WMS
map.fitBounds([[49.8, 14.2], [54.9, 24.6]]);
  </script>
</body>