Beágyazott térkép használat (iframe, embed)

 Iframe (beágyazott keret)

Eddig a WEB lap teljes egészében térképpel foglalkozott. Most nézzük meg azt, hogy hogyan kell meglévő web lap egy területére térképet beilleszteni a különböző szolgáltatók segítségével.

A beágyazott keret lényegében egy adott méretű elkülönülten kezelt terület, amelyben egy külső weblapot tudunk megjeleníteni. Az iframe méretét az HTML befogadó lapban kell meghatározni.

Az iframe tag paraméterei:

globális attribútumok :Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class ,  contenteditable ,  contextmenu ,  dir ,  draggable ,  dropzone ,  hidden ,  id ,  lang ,  spellcheck ,  style ,  tabindex ,  title ,  translate.

src: a megjelenítendő állomány webcíme.

width: a beágyazott keret vízszintes mérete.

height: a beágyazott keret függőleges mérete.

srcdoc: a keretben megjelenő tartalom közvetlen megadása HTML kódokkal.

name: nevet adhatunk a beágyazott keretnek, hogy hivatkozhassunk rá.

sandbox: az iframe-be betöltött dokumentumra vonatkozó megszorításokat ill. engedélyeket lehet megadni benne. 

seamless: új logikai típusú attribútum, melynek beállításával elérhetjük, hogy a keret tartalma úgy jelenjen meg, mintha a szülő dokumentum közvetlen része lenne. 

allowfullscreen: logikai attribútum, mellyel megadhatjuk, hogy a beágyazott oldal megjelenhet-e teljes képernyőn.

pl.:

<iframe src="https://mierdekel.hu/bing/index.html" width="400" height="400" seamless>

</iframe>

<IFRAME SRC="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></IFRAME>

EMBED (tartalom beágyazás)

Az embed külső tartalom beágyazására szolgáló tag. Ez általában más (interaktív) alkalmazás (tipikusan nem HTML-állomány). HTML5 szabvány a beágyazásra javsolt használat.

Az embed tag paraméterei

globális attribútumok:Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class ,  contenteditable ,  contextmenu ,  dir ,  draggable ,  dropzone ,  hidden ,  id ,  lang ,  spellcheck ,  style ,  tabindex ,  title ,  translate.

src: a beágyazandó tartalom webcíme.

type: a beágyazandó tartalom mime-típusa.

width: a beágyazandó tartalom szélessége.

height: a beágyazandó tartalom magassága

pl..

<embed src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" width="300" type="image/svg+xml">

<EMBED SRC="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000">

Objektum beágyazás használattal is működik

<OBJECT DATA="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></OBJECT>

OSM minta:

<iframe height="400" width="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"  src="http://www.openstreetmap.org/export/embed.html?bbox=19.2972546935081484%2C47.59850757245689%2C18.97988545894623%2C49.60164362863992&amp;layer=mapnik&amp;marker=49.600075625759565%2C10.976216197013855" style="border: 1px solid black"></iframe>

MapQuest minta:

<iframe height="400" width="300" border="0" marginwidth="0" marginheight="0" src="https://www.mapquest.com/embed?center=47.42564118508169,19.210925102233887&zoom=16&maptype=map"></iframe>

MapTiler minta:

<iframe width="500" height="300" 

src="https://api.maptiler.com/maps/streets/?key=ptRri5SRXyugsx5Bdomf#14.0/40.70850/-74.00603">

</iframe>

MapBox minta:

<iframe width='500' height='300' frameBorder='0' 

src='http://a.tiles.mapbox.com/v3/vince78718.map-6z5j80z7.html#8/47.35710549396971/19.295889684'>

</iframe>

ESRI minta:

<iframe width="500" height="400" frameborder="0" 

scrolling="no" marginheight="0" marginwidth="0"

src="http://arcgis.com/apps/Viewer/index.html?appid=1fa6b89a300c4e9ebf84613dd5c44b9f">

</iframe>

GMAP minta:

      <iframe width="600" height="500" id="gmap_canvas" 

    src="https://maps.google.com/maps?q=budapest%2C%20k%C3%A9zdiv%C3%A1s%C3%A1rhely%20utca%20&t=&z=13&ie=UTF8&iwloc=&output=embed" 

frameborder="0" 

scrolling="no" 

marginheight="0" 

marginwidth="0">

  </iframe>

Bing MAP minta:

     <iframe width="500" height="400" frameborder="0" src="https://www.bing.com/maps/embed?h=400&w=500&cp=47.4309~19.203799999999987&lvl=11&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no">

     </iframe>