230% Maantieteellisen tiedon tehokkuuden lisääminen interaktiivisten verkkokarttojen avulla.

Innowise on kehittänyt kevyen SVG-kartan, jolla voidaan tarkastella maantieteellisiä tietoja ja seurata asiakkaan kansainvälisiä hankkeita.

Asiakas

Teollisuus
Alue
US
Asiakas vuodesta
2022

Asiakkaamme on yksi merkittävimmistä rahoituslaitoksista, joka myöntää avustuksia ja lainoja keskeisiin julkisiin ja yksityisiin hankkeisiin. Sillä on yli 100 toimipistettä eri puolilla maailmaa, ja se tarjoaa kestäviä ratkaisuja, joilla pyritään vähentämään köyhyyttä toteuttamalla pääomahankkeita.

Yksityiskohtaisia tietoja asiakkaasta ei voida luovuttaa NDA:n määräysten nojalla.

Haaste: Paperityön taakan voittaminen interaktiivisen karttatiedon visualisoinnin avulla.

Perustamisestaan lähtien asiakkaamme on valvonut tuhansia taloudellisia, sosiaalisia, energeettisiä, koulutus-, ympäristö- ja muita hankkeita yhteistyössä hallitusten ja kansainvälisten yritysten kanssa. Niiden tavoitteena on vähentää köyhyyttä, lisätä yhteistä vaurautta ja edistää kestävää kehitystä rahoittamalla strategisesti tärkeitä avainhankkeita.

Vaikka asiakkaallamme oli selkeä ja perusteellinen työnkulku ja tietojen esitystapa, heillä oli haasteita tekstimuotoisen tiedon analysoinnissa ja arvioinnissa. Vuorovaikutteisen kartan sijaan tietojen visualisointi Tietojen analysoinnissa he tukeutuivat monisivuisiin raportteihin, mikä usein vaikeutti tietoon perustuvien päätösten tekemistä.

Koska asiakkaallamme on monipuolinen maailmanlaajuinen hankesalkku, hän etsi skaalautuvaa, interaktiivista ja mukautettavaa ratkaisua, jossa on maantieteellisiä karttoja, joiden avulla asiakkaat voivat nopeasti tarkastella lyhyitä tietoja nykyisistä hankkeista ja saada tietoa kiinnostuksen kohteista, kuten alueista, maista ja mukautetuista alueista.

Ratkaisu: Interaktiivisten karttojen kehittäminen, joissa esitellään räätälöityjä hankkeita ympäri maailmaa.

Asiakkaan pyynnön analysoinnin jälkeen Innowise ehdotti SVG-kartan (skaalautuva vektorigrafiikka) kehittämistä. Toisin kuin pikselipohjaisissa kartoissa, SVG-kartoissa käytetään matemaattisia yhtälöitä kartan elementtien määrittelyyn, mikä mahdollistaa saumattoman skaalauksen ylös- ja alaspäin ilman laadun heikkenemistä.

Sijaintitietojen visualisoinnissa suosittuja vaihtoehtoja ovat esimerkiksi Google Mapsin ja Open Street Mapsin kaltaiset kirjastot. SVG-kartat ovat kuitenkin kevyitä, muokattavissa ja lisenssivapaita, joten ne ovat hyvä valinta, kun ei tarvita suurta resoluutiota eikä tarkkoja yksityiskohtia.

Ratkaisun löydyttyä projektiryhmämme eteni useiden eri vaiheiden kautta interaktiivisten SVG-karttojen tuottamiseksi.

ENSIMMÄISEN TASON HALLINNOLLISET YKSIKÖT

Ennen kuin syvennyimme peruslogiikkaan, Innowise selvitti SVG-kartan tärkeimpiä kokonaisuuksia. Maiden oikeiden maantieteellisten rajojen määrittämisen lisäksi meidän oli varmistettava myös tarkka ja ajantasainen hallinnollinen ja alueellinen jako. Esimerkiksi eri maat on jaettu erilaisiin hallinnollisiin jakoihin, kuten Yhdysvaltojen osavaltioihin, Kanadan provinsseihin ja Ranskan alueisiin.

Tämän vuoksi pyrimme keräämään Natural Earth -ohjelmasta tarkat karttatiedot, jotka heijastavat näitä alueellisia hallinnollisia eroja. Natural Earth on ilmainen karttapalvelu, joka tarjoaa sekä rasteri- että vektorimuotoisia tietoja mittakaavoissa 1:10m, 1:50m ja 1:110 miljoonaa, ja se toimii sopivana pohjana visuaalisesti houkuttelevien ja asiantuntevasti laadittujen digitaalisten karttojen luomiseen GIS-ohjelmistojen avulla.

SHP:STÄ SVG:KSI

Sopivien karttamallien valinnan jälkeen projektiryhmämme muutti alkuperäiset monimuotoiset shapefile-tiedostot (SHP) skaalautuvaksi vektorigrafiikaksi. Nämä grafiikat tarjosivat polut kuhunkin hallintoalueeseen, ja ne esitettiin SVG-tiedostona, joka on XML-tiedosto, joka sisältää geometrisia objekteja, kuten ympyröitä, viivoja, neliöitä ja muita. Nämä objektit upotettiin SVG-tunnisteina, mikä varmisti, että kuvat pysyivät tasaisina ja oikeasuhteisina.

PYTHON SCRIPT

Vaikka SVG-tiedoston jokaisella oliolla on oma polkutunnisteensa, tietojen järjestelmällinen järjestäminen olisi tehokkaampaa projektin vaatimusten täyttämiseksi. Lajittelimme SVG-tiedoston tiedot aakkosjärjestykseen maan ja hallinnollisen osaston mukaan käyttäen apuna Python käsikirjoitus. Tuloksena saatiin tietokokonaisuus, joka sisälsi yli 4500 ensimmäisen tason hallinnollista osastoa 153 maassa eri puolilla maailmaa, joissa asiakkaalla on joko käynnissä olevia hankkeita tai hän aikoo investoida varoja.

KOODIN MUOKKAAMISESTA PROGRESSIIVISEEN VERKKOSOVELLUKSEEN

Kun SVG-karttatiedot oli ladattu käännettäväksi, tiedostokoko ylitti 16 Mt pelkkää tekstiä. Koska pikkutarkka digitalisointi aiheuttaisi jäätymisiä, häiriöitä ja muita suorituskykyongelmia, asiantuntijamme päättivät käyttää Javascriptiä muuttaakseen interaktiivisen kartan progressiiviseksi verkkosovellukseksi. Sen vuoksi projektiryhmämme sisällytti SVG-tiedostot HTML-merkkaukseen. Koska koodi kuitenkin ylitti 4500 riviä, ohjelmistosuunnittelijamme lisäsivät inline-kehykset ( HTML-elementit, jotka lataavat toisen HTML-sivun asiakirjan sisällä) ja erillisen SVG:n sisältävän HTML-tiedoston. Tämä auttoi optimoimaan järjestelmän kuormitusta ja varmistamaan sujuvan suorituskyvyn. Lisäksi rakensimme paikallisen palvelimen, jotta useiden käyttäjien ristikkäiset pyynnöt olisivat mahdollisia.

KÄYTTÖLIITTYMÄ

Lisäksi projektiryhmämme loi käyttäjäystävällisen käyttöliittymän, joka helpottaa kartalla navigointia. Väritimme kartan ja määrittelimme sävyt sen mukaan, kuinka monta hanketta tietyssä maassa on. Lisäksi kehittäjämme rakensivat käteviä suodattimia tiettyjen hankkeiden etsimistä varten ja korostivat alueita hankkeen tilan perusteella (aktiivinen, suljettu, keskeytetty). Hankkeet on luokiteltu niiden käyttötarkoituksen (sosiaalinen suojelu, terveys, maatalous, energia jne.), soveltamismaiden ja kumulatiivisten kustannusten mukaan. Kun käyttäjät ovat määritelleet hankkeet, he voivat ladata PDF-raportteja saadakseen lisätietoja niistä.

Kaiken kaikkiaan Innowise:ssä on toteutettu sellaisia ominaisuuksia kuin karttataustat (topografinen, kuvakartta, jossa on merkintöjä ja muita), kartan konfigurointi (oletus 2D- tai taulukkomuoto), kehittyneet hakuominaisuudet (sijainnin nimen tai maantieteellisten koordinaattien perusteella desimaaliasteina / DMS-muodossa) ja zoomauksen lisäys- ja vähennysasetukset.

Teknologiat

React, React-kysely, MaterialUI, D3.js
NodeJS, Express.js, Python
MongoDB
VCS
Github
Docker, Jenkins, AWS

Prosessi

Koko liiketoimintakartoitusohjelmiston kehitysprosessin ajan Innowise noudatti ketteriä toimintatapoja ja mukautui asiakkaan tarpeisiin. Projektiryhmä noudatti Scrum-menetelmää viikoittaisten sprinttien, päivittäisten tiimikokousten sekä jatkuvan integroinnin ja testauksen avulla. Viestimällä asiakkaan kanssa Microsoft Teamsin välityksellä pystyimme helposti mukauttamaan muutokset laajuuteen ja jakamaan tehtävät tiimin jäsenten osaamisen mukaan.

Projektin vision mukaisesti lanseerasimme täysimittaisen MVP:n, jossa oli perustoiminnot. Tällä hetkellä asiakas harkitsee uusien ominaisuuksien lisäämistä ja SVG-kartan integroimista ulkoisiin palveluihin, ja tiimimme tarjoaa käyttöönoton jälkeistä tukea ja ylläpitoa.

Joukkue

1
liiketoiminta-analyytikko
1
Projektipäällikkö
3
Front-End-kehittäjät
2
Back-End-kehittäjät
1
UI/UX-suunnittelija
1
DevOps
2
QA Engineers

Tulokset: Tietojen läpinäkyvyyden, skaalautuvuuden ja vuorovaikutteisuuden parantaminen.

Innowise on kehittänyt liiketoimintakarttaohjelmiston, jonka avulla voidaan seurata tietoja asiakkaan hankkeista eri puolilla maailmaa. Olemme toimittaneet yhden luukun alustan, jossa asiakas voi hallita meneillään olevia projekteja, lajitella niitä eri tekijöiden mukaan ja päästä käsiksi projektin yksityiskohtiin. Kehittämämme kauniit SVG-kartat tarjoavat asiakkaalle useita etuja, kuten:

  • Skaalautuvuus. Koska SVG-kartat ovat vektoripohjaisia, niitä voidaan skaalata suuremmiksi tai pienemmiksi ilman, että niiden laatu heikkenee tai niistä tulee pikselimäisiä. Tämä mahdollistaa sisällön näyttämisen eri zoomaustasoilla tai -kokoluokissa, mikä lisää joustavuutta.
  • Vuorovaikutteisuus. SVG-karttojen avulla käyttäjät voivat olla vuorovaikutuksessa digitaalisten elementtien kanssa napsauttamalla eri piirteitä tai viemällä niitä hiirellä ja näyttämällä tiettyyn maantieteelliseen alueeseen liittyviä tietoja.
  • Kevyt. SVG-karttojen tiedostokoko on yleensä pienempi kuin muiden formaattien, kuten rasterikuvien. Tämän ansiosta niitä on helpompi ladata ja näyttää verkkosivulla, mikä takaa saumattoman käyttökokemuksen.
  • Mukauttaminen. Projektiryhmämme muokkasi ja muotoili kartan CSS:n avulla, jolloin kartan ulkoasua voitiin hallita pitkälle. Tämä mahdollistaa erityispiirteiden korostamisen ja kartan sovittamisen asiakkaan brändin mukaiseksi, mikä antaa kartalle yksilöllisen ilmeen.
Hankkeen kesto
  • Kesäkuu 2022 - Jatkuva

500+

hankkeita 150 maassa

230%

paikkatiedon tehokkuuden lisääminen

    Ota yhteyttä

    Varaa puhelu tai täytä alla oleva lomake, niin otamme sinuun yhteyttä, kun olemme käsitelleet pyyntösi.

    Lähetä meille ääniviesti
    Liitä asiakirjoja
    Lataa tiedosto

    Voit liittää 1 enintään 2 Mt:n tiedoston. Hyväksytyt tiedostomuodot: pdf, jpg, jpeg, png.

    Klikkaamalla Lähetä, annat suostumuksesi siihen, että Innowise käsittelee henkilötietojasi meidän Tietosuojakäytäntö antaa sinulle asiaankuuluvia tietoja. Antamalla puhelinnumerosi suostut siihen, että voimme ottaa sinuun yhteyttä puheluiden, tekstiviestien ja viestisovellusten kautta. Puhelu-, viesti- ja datahintoja voidaan soveltaa.

    Voit myös lähettää meille pyyntösi
    osoitteeseen contact@innowise.com

    Mitä tapahtuu seuraavaksi?

    1

    Kun olemme vastaanottaneet ja käsitelleet pyyntösi, otamme sinuun yhteyttä ja kerromme yksityiskohtaisesti projektin tarpeet ja allekirjoitamme NDA-sopimuksen luottamuksellisuuden varmistamiseksi.

    2

    Tutkittuaan toiveesi, tarpeesi ja odotuksesi tiimimme suunnittelee projektin ehdotuksen, jossa esitetään työn laajuus, tiimin koko, aika- ja kustannusarviot.

    3

    Järjestämme kanssasi tapaamisen, jossa keskustellaan tarjouksesta ja sovitaan yksityiskohdista.

    4

    Lopuksi allekirjoitamme sopimuksen ja aloitamme projektisi toteuttamisen heti.

    nuoli