Beilleszthető elterjedéi térkép

Egy új funkciót szeretnék bemutatni. Mostantól lehetőség van arra, hogy egy külső weboldalra bárki beilleszthesse egy adott faj elterjedési térképét. A térkép használatát az ázsiai márványospoloska - Halyomorpha halys poloskával fogom bemutatni.
Tegyük fel, hogy egy rovarokkal foglalkozó weboldalam van, vagy újságíró vagyok egy online felülettel rendelkező lapnál. Ismeretterjesztő cikket szeretnék írni az invazív poloskafajokról. A cikkben szeretném bemutatni, hogy az ázsiai márványospoloska hogy terjedt el Magyarországon. Ezt nagyon egyszerűen megtehetem, ha a weboldalamba beillesztek egy rövid kódrészletet.

Először is látogassunk el a faj oldalára..
Itt a térkép alatt látni fogunk egy linket a következő szöveggel: 'Illeszd be az előfordulási térképet a weboldaladba'.
Rákattintva megjelenik egy kis ablakban a beillesztéshez szükséges kódrészlet.
kép Az itt lévő iframe taget kell beilleszteni a forrásunk azon részébe, ahol szeretnénk, hogy a térkép megjelenjen. Szükség esetén meg kell változtatni a szélességét és a magasságát, úgy, hogy az oldalunk méreteihez illeszkedjen. A mintakódban lévő érték 720x420 pixeles, ezeket az arányokat megtartva szabadon lehet méretezni a dobozt. Pl. 1440X840 pixelesre.

Nézzünk a beillesztett tartalomra egy példát. A cikk a beillesztett térképpel így nézhet ki:

Az ázsiai márványospoloska Magyarországon

cikk eleje... cikk szövege... cikk szövege...


cikk szövege... cikk szövege... cikk vége...


Ez az előfordulási térkép bermelyik csoport fajára használható, lepkékre, szitakötőkre, bogarakra, stb.
Ingyenes és bárki számára elérhető, felhasználható, nem regisztrációhoz kötött.


Haladó felhasználás

Ha a weboldalunk reszponzív, mérete alkalmazkodik a megjelenített nézőtér szélességéhez, akkor a fix szélesség és magasság megadása nem fog a tartalomhoz illeszkedve változni. Ez szerencsére könnyen orvosolható a felhasználó oldaláról.
Rakjuk be az iframe-et keretbe, pl. <div class="iframe-wrap"></div>. Majd alkalmazzuk a következő css szabályokat:

.iframe-wrap {
  position: relative;
  padding-bottom: 58.33%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

.iframe-wrap iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
                

Írta: Károlyi Balázs 2017.12.05.