Scriptcase + Leaflet

Létrehoztam egy External library-t a ScriptCase-en belül a Leaflet számára. Ezen library tartalmazza a Leaflet JS és CSS fájljait, valamint a markerek ikonjait.

  • External library-k elérése: External libraries
  • Új library létrehozása: Create a new library
  • Név és láthatóság megadása, ahol a láthatóság: Project vagy Publikus
  • Library szerkesztése az Edit gomb által, aktivizálása pedig a checkmark-ra való kattintás során lehetséges.
  • Szerkesztés során lehet felvinni a fájlokat Upload segítségével. De mi is létrehozhatunk új fájlokat a New file által, vagy új könyvtárt a New directory által.
  • Fájlokat egyenként is feltölthetünk, de lehetőség van egy ZIP fájl felvitelére is, amit a rendszer utána automatikusan kitömörít.
  • Szerkesztői módból való kilépés pedig a Close által.
  • External libraries oldalon lehetőség van még a library-k átnevezésére és törlésére is.
  • Módosítások elmentése a Save the project libraries gomb megnyomása által.

Eddig feltelepített Leaflet és kiegészítők

  • Leaflet - Leaflet térkép készítése
  • Leaflet Draw - Adatok felvitele Leaflet térképen keresztül
  • Leaflet Label - Formázható és HTML-t tartalmazó label
  • Leaflet Routing Machine - Két pont közötti legrövidebb útvonal mutatása és az útvonal leírása

Scriptcase alkalmazás esetén

  • Events > onApplicationInit alatt elhelyeztem a hivatkozást erre a külső library-ban lévő fájlokhoz, Control alkalmazás esetén pedig az Events > onLoad alá.
  • Javascript esetén a href, valamint a CSS esetén az src alatt az alábbi parancs használata, hogy hivatkozzak az external library alatt lévő fájlokhoz: sc_url_library
  • sc_url_library első paramétere a projekt láthatósága (Publikus esetben sys, Projekt esetben prj), második paraméter az external library neve, a hamradik paraméter pedig a fájl elérhetősége az adott library-n belül
  • Leaflet esetén:

    <link rel='stylesheet' href='".sc_url_library('sys','Leaflet','leaflet.css')."' />

    <script src='".sc_url_library('sys','Leaflet','leaflet.js')."'></script>
  • Külön Javascript gombokat hoztam létre, amivel a térképen is módosításokat tudok végezni
  • Geocoding esetén a Google API megoldását alkalmaztam, amit AJAX kéréssel lehet elérni és JSON tömböt ad vissza válaszként.
  • Térképjelölők koordinátáit a táblázatok megfelelő mezőjében tárolt koordináták jQuery általi kiolvasása biztosítja. De ezen kiolvasást csak akkor hajtom végre, amikor már a táblázat teljesen betöltődött és a további függvényeimet is csak ezután hajtatott végre.

Függvények

  • MapLoader - Térképet tartalmazó DIV létrehozása, majd benne a térkép létrehozása, de még jelölők nélkül, valamint két jelölő kinézetének a leírása és a markereket tartalmazó csoport létrehozása.
  • MarkerLoader - jQuery segítségével a táblázatból való kiolvasása a koordinátáknak és ezek megejelenítése a térképen úgy, hogy mindegyik látható legyen rajta.
  • OnMarkerClick - TiMi moderátor térképe esetén, ha kék volt a jelölő, akkor pirosra vált és a táblázat hozzá tartozó soránál a jelölőnégyzet aktív lesz, Ha piros volt, akkor kék lesz, valamint a jelölőnégyzet is ki fog kapcsolni. Majd a HideUnchecked() függvény meghívása.
  • HideUnchecked - Ha a táblázat soránál a jelölőnégyzet inaktív, akkor az adott sor nem fog megjelenni.
  • LoadChosen - SELECT mezők esetén a Chosen aktivizálása.

Gombok

  • ShowOnMap - A térképen a jelölő új helye a koordináta mezőkben megadott értékek lesznek.
  • ShowUploaded - A kiválasztott, már előre feltöltött helyszínt mutatja a térképen és a koordináta mezőkben.
  • Geocoding - A térképjelölő új helye a megadott cím lesz. (Google Geocoding alkalmazása)
  • Reverse Geocoding - A cím mezőkbe bekerül a térképjelölő címe.(Google Geocoding alkalmazása)

Geocoding

  • Mintapélda:

    var googleAPI = 'http://maps.googleapis.com/maps/api/geocode/json?';

    $.getJSON( googleAPI, {

        address: addressCombined, // Itt kell megadni a címet és vagy a koordináták

        sensor: 'false'

      })

    .done(function( data ) {

        console.log(data);

        lat = data.results[0].geometry.location.lat;

        lng = data.results[0].geometry.location.lng;

    })

    .fail(function( error ) {

        console.log(error);

    });
  • JSON tömb esetén az i-dik eredmény lekérdezése

    data.results[0].address_components[i].type[0] tartalmazza az elem típusát (pl: házszám -> street_number, utca neve és típusa -> route, város -> locality, irányítószám -> postal code, stb....)

    data.results[0].address_components[i].short_name tartalmazza az elem rövid nevét.

    Viszont egyes típusok hiányozhatnak, így a típusok sorrendje a tömbben is változó! Vagyis például nem fix, hogy hanyadik elem lesz mondjuk az irányítószám!

    data.results esetén több altömb van. A 0-s sorszámú tartalmazza a legtöbb információt, az 1-es kevesebbet, a 2-es mégkevesebbet, stb.... Szintén nem fix, hogy mennyi altömb van!

Elkészített alkalmazások

kép: 
Control alkalmazásGrid alkalmazásForm alkalmazás - TiMi moderátor térkép, alapállapotForm alkalmazás - TiMi moderátor térkép, néhány jelölő kijelölése után
ScriptCase kategóriák: