30 warstw map do Leaflet JS, w tym wastwa Google Maps bez wykorzystania API Google

W tym artykule znajdziesz:

  • rozwiązanie map alternatywne do Google Maps
  • wtyczkę do WordPress, dzięki której osadzanie map będzie bajecznie proste
  • mapy Google bez wykorzystania API Google
  • 30 warstw do biblioteki Leaflet JS

 

Mapy do darmowego wykorzystania na stronach i alternatywa do Google Maps

Założę się, że developerzy wordpressa/koderzy JS, raz szukali fajnego rozwiązania z umieszczeniem map na swoich stronach. Są popularne i darmowe Google Maps, oferujący sporo możliwości, niestety jak czytamy w oficjalnej dokumentacji limit 25000 wyświetleń mapy w ciągu 24h może nie być wystarczający w przypadku bardziej popularnych witryn. Tu z pomocą mogą przyjść inne rozwiązania GIS, np. Open Street Map, czy Leaflet JS, którą łatwo wdrożyć wprowadzając kod w sekcji head oraz body dokumentu html, albo odpowiednio skonfigurujemy jakąś wtyczkę do systemu CMS.

Co fajnego do WordPressa?

W tym drugim przypadku warta polecenia jest wtyczka Leaflet Map Plugin do WordPressa, dająca całkiem spore możliwości dla osób, które htmla’a nie mają w małym palcu.

Za pomocą mechanizmu shortcode czyli minikodu, który umieszczony w nawiasie kwadratowym wywołuje określoną treść lub zdefiniowaną funkcję możemy np.

  • osadzić mapę z kilkoma znacznikami
  • osadzić mapę z chmurkami/popupami zawierającymi treść a także linki
  • osadzić mapę zawierającą linię pomiędzy zdefiniowanymi punktami

 

Na stronie biblioteki Leaflet JS znajdziemy kilkanaście warstw. Niemniej jednak nie ma śród nich warstwy, którą dobrze znamy z Google Maps.

Aby w Leaflet Map Plugin skorzystać z map Google bez wykorzystania API Google można skorzystać z:

https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i349018013!3m9!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0

i wpisać ten adres URL w pole „Map Tile Url”, co pokazuje poniższy zrzut:

30 warstw/tafli (tiles) do Leafleat Map Plugin

Oczywiście możemy zmieniać wygląd samej mapy. W tym celu możemy posłużyć się dowolnym obrazkiem lub gotowymi warstwami z mapami.

  1. http://tile.openstreetmap.org/!z/!x/!y.png
  2. http://{abc}.tile.openstreetmap.de/tiles/osmde/!z/!x/!y.png
  3. http://{abc}.tile.openstreetmap.fr/osmfr/!z/!x/!y.png
  4. http://{abc}.tile.opencyclemap.org/cycle/!z/!x/!y.png
  5. http://tile.öpnvkarte.de/tilegen/!z/!x/!y.png
  6. http://korona.geog.uni-heidelberg.de/tiles/roads/x=!x&y=!y&z=!z
  7. http://toolserver.org/tiles/hikebike/!z/!x/!y.png
  8. http://{abc}.tile.openstreetmap.fr/hot/!z/!x/!y.png
  9. http://{abc}.tile2.opencyclemap.org/transport/!z/!x/!y.png
  10. http://{abc}.tile3.opencyclemap.org/landscape/!z/!x/!y.png
  11. http://{abc}.tile.opencyclemap.org/outdoors/!z/!x/!y.png
  12. http://{abc}.tile.stamen.com/toner/!z/!x/!y.png
  13. http://{abc}.tile.stamen.com/toner-lite/!z/!x/!y.png
  14. http://{abc}.tile.stamen.com/watercolor/!z/!x/!y.png
  15. http://tile.osmz.ru/veloroad/!z/!x/!y.png
  16. http://{abcd}.tiles.maps.sputnik.ru/!z/!x/!y.png
  17. http://{abcd}.tile.osm.kosmosnimki.ru/kosmo/!z/!x/!y.png
  18. https://{abc}.tile.opentopomap.org/!z/!x/!y.png
  19. http://tiles.openseamap.org/seamark/!z/!x/!y.png
  20. http://toolserver.org/~cmarqu/hill/!z/!x/!y.png
  21. http://korona.geog.uni-heidelberg.de/tiles/asterh/x=!x&y=!y&z=!z
  22. http://korona.geog.uni-heidelberg.de/tiles/asterc/x=!x&y=!y&z=!z
  23. http://pt.openmap.lt/!z/!x/!y.png
  24. http://www.openfiremap.org/hytiles/!z/!x/!y.png
  25. http://tile.waymarkedtrails.org/hiking/!z/!x/!y.png
  26. http://tile.waymarkedtrails.org/cycling/!z/!x/!y.png
  27. http://tile.waymarkedtrails.org/mtb/!z/!x/!y.png
  28. http://tile.waymarkedtrails.org/riding/!z/!x/!y.png
  29. http://tile.waymarkedtrails.org/skating/!z/!x/!y.png
  30. http://tile.waymarkedtrails.org/slopemap/!z/!x/!y.png