Zadání úkolu: Ionic + React – Mapa a API

Cíl: Vytvořit aplikaci, která umožní vyhledat místo podle názvu (pomocí externího API) a zobrazit jej na mapě včetně uložení do seznamu. Očekává se, že pro vypracování úkolu logicky propojíte jednotlivé komponenty.

Užitečné odkazy:

1. Příprava a instalace

Nejprve do projektu nainstalujte knihovnu Leaflet pro práci s mapami.

npm install leaflet react-leaflet
npm install -D @types/leaflet

Nezapomeňte do souboru s mapou naimportovat základní CSS styl: import 'leaflet/dist/leaflet.css';

2. Struktura komponent

Vaším úkolem je vytvořit alespoň tyto tři komponenty ve složce src/components a následně je propojit na hlavní obrazovce (Home.tsx):

Nápověda:
Stav obsahující pole všech nalezených míst (např. const [places, setPlaces] = useState<any[]>([]);) by měl být definován ve vaší rodičovské komponentě (Home.tsx). Teprve z ní se musí stav poslat do všech tří komponent přes parametry (props).

3. Požadavky na jednotlivé části

A) CityForm (Vyhledávací formulář)

Může obsahovat komponenty IonInput pro zadání názvu a IonButton. Při kliknutí zavoláte přes fetch veřejné API Nominatim: 

https://nominatim.openstreetmap.org/search?format=json&q=NAZEV_MISTA

Z odpovědi z API (což je pole JSON objektů) si vezměte první prvek a vytáhněte z něj vlastnosti:

Z nich můžete vytvořit objekty a vložit je do pole. Pokud hledané místo na API neexistuje, můžete uživateli ukázat varování.

B) MyMap (Zobrazení mapy)

Využijte komponenty z react-leaflet. Budete potřebovat minimálně MapContainer, TileLayer a pak Marker s vloženým textem (Popup).

Základní ukázka Leaflet mapy v Reactu:
Tady je malá nápověda, jak vypadá naprostý základ s jedním pevným bodem: 
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export default function MyMap() {
  return (
    <MapContainer center={[49.8209, 18.2625]} zoom={8} style={{ height: '70vh', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      
      <Marker position={[49.8209, 18.2625]}>
        <Popup>Ostrava</Popup>
      </Marker>
    </MapContainer>
  );
}
Nápověda pro vykreslování v Reactu:
Pro vykreslení více bodů do mapy můžete využit .map
{places.map((place, index) => ( <Marker ... /> ))}

C) PlaceList (Seznam historie)

Vykreslete nalezená místa jako Ionic list (IonList a IonItem) a celé to obalte do karty (IonCard).

4. Rozšíření

Jako rozšíření je možné celou aplikaci rozdělit na dvě záložky pomocí komponenty IonSegment.