Interaktiivisen kartan lisääminen esimerkiksi uutisartikkelin, yhteystietosivun, tapahtumasivun, matkakertomuksen, tai minkä tahansa muun jutun yhteyteen on nopeaa ja suoraviivaista. Kerron seuraavaksi miten temppu tehdään suosikkityökalullani ArcGIS Onlinella.

Askeleet ovat seuraavat:

  1. Kirjaudu ArcGIS Onlineen (Voit käyttää esimerkiksi ilmaiseksi Facebook-tunnustasi) ja avaa ArcGIS Onlinen kartantekotyökalu
  2. Zoomaa kartta valitsemaasi paikkaan
  3. Piirrä kartalle kohde käsin
  4. Tallenna kartta ja luo upotusta varten HTML-koodi
  5. Lisää HTML-koodi verkkosivullesi

Nyt sama hieman yksityiskohtaisemmin.

Avataan selaimessa osoite www.arcgis.com ja klikataan ylhäältä Map-tekstiä. Suomenkielisessä versiossa tuossa lukee Kartta.

karttasivulle10
Tältä näyttää http://www.arcgis.com etusivu, sieltä valitaan Map
Karttatyökalu aukeaa. Kirjaudutaan sisään oikeasta ylänurkasta löytyvästä Kirjaudu sisään-napista. Tämä tehdään siksi, että lopussa valmis kartta pitää tallentaa ennen kuin sen voi jakaa.

 

karttasivulle11
Kirjaudutaan sisään. Voit luoda maksuttomat tunnukset, tai ostaa kaupalliseen käyttöön sopivat.
Sitten zoomaillaan kartalla haluttuun paikkaan. Päätin tehdä kartan, joka kuvaa loistavan Hernesaaren rannan sijainnin, jotta kaikki löytäisivät sinne ja pääsisivät kokemaan sen mahtavuuden! 🙂 (Mausteeksi vaihdoin taustakartan OpenStreetMapiksi ylhäällä olevan Basemap-napin kautta)

karttasivulle1
Navigoidaan kartalla paikkaan, johon halutaan piirtää kohde
Sitten on piirtämisen vuoro. Piirtämään pääsee Add-napin takaa löytyvällä Add Map Notes-napilla.

karttasivulle2
Lisätään merkintä kartalle
Kun Add Map Notesia klikkaa avautuu mahdollisuus antaa nimi karttamerkintöjä sisältävälle karttatasolle. Lisäksi Template-alasvetovalikosta voi valita kätevästi käyttökelpoisia valmiita karttasymboleja. Jätin vähän tylsästi karttatason nimeksi Map Notes, ja käytin vakiosymboliikkaa.

karttasivulle3
Luodaan uusi karttataso
Työkalun vasempaan laitaan avautuu erilaisia karttasymboleja. Varsinainen piirtäminen on helppoa, ja vastaa tavallista piirto-ohjelmaa. Kartalle voi lisätä pisteitä, viivoja, alueita ja tekstiä. Symbolin ulkoasua voi muuttaa myös jälkeenpäin, ja näin teenkin kohta.

karttasivulle4
Valmiina tekemään merkintöjä kartalle.
Valitsin vihreän nuppineulan, jonka klikkasin kartalle. Tällä kertaa en piirtänyt alueita tai viivoja. Klikkauksen jälkeen avautuu puhekupla, johon voi kirjata kohdetta kuvaavia tietoja.

karttasivulle5
Nuppineula on nyt tökätty kartalle
Täytin puhekuplaan tekstiä, lisäsin kuvaa varten kuvan URLin ja linkkiä varten oman URLin. Description-kohtaan lisättävän tekstin ja linkkien muokkausmahdollisuudet ovat mukavan kattavat.

karttasivulle6
Tekstit ja kuva valmiina
Sitten vaihdetaan vielä nuppineulasymboli toisenlaiseksi klikkaamalla Change Symbol.

karttasivulle7
Vaihdoin symbolin siniseksi pompulaksi.
Tallennetaan kartta ylävalikosta löytyvän Save-napin avulla.

karttasivulle8
Täytin karttaa kuvaavat tiedot tallennusvaiheessa
Sitten painetaan Share-nappia, jotta saadaan upotustavarten tarvittava HTML-koodi. Tässä kohtaa on tärkeä muistaa klikata Everyone (public) laatikkoon väkänen, jotta julkisen upotuskoodin saa.

karttasivulle9
Klikataan väkänen Everyone (public) laatikkoon, jotta saadaan upotuskoodi
Painetaan Embed in Website-nappia, josta avautuu upotuskoodin sisältävä ikkuna.Upotettavan kartan ominaisuuksia voi täältä valita päälle ja pois. Voit tarjota kartan käyttäjälle esimerkiksi mahdollisuuden paikantaa osoitteen kartalle, näyttää kartan selitteen tai vaihtaa taustakarttaa.

karttasivulle10
Täältä löytyy HTML-koodi upotusta varten. Se löytyy tuon Copy and paste HTML to embed in website-tekstin alta.
Valmista tuli! Nyt voit liittää HTML-koodin www-sivulle.

Jos et ehdi itse luoda karttaa ja haluat vain kokeilla, toimiiko upottaminen julkaisualustallasi voi testata sitä Hernesaaren ranta-kartan koodilla:

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style>


Toimiko? Hieno piirre tässä harjoitellussa tavassa luoda kartta ja upottaa se, on ettei riviäkään koodia kirjoitettu käsin.

t.Antti

 

Advertisement