info @ image ia .com
×

Embedded Maps

Interactive maps can be embedded within the content of any Web page. A div HTML tag with the class name 'mapContainer' is the only requirement. Interactive maps can be loaded when the Web page loads or it can be loaded on demand when the map container is visible in the browser window.

Page Width

A common layout of Web pages is the display of an image that adapts its width to the width of the browser window followed or preceded by text content. Below is an interactive map with radiant dots loaded on demand.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ex tempor nibh fermentum egestas quis vitae nulla. Sed non facilisis enim, eget eleifend nibh. Nam lacinia dolor purus, vitae rutrum lectus porta sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque molestie accumsan interdum. Proin in erat sed urna mattis eleifend sed eu lacus. Curabitur in gravida massa.

Ut commodo tortor risus, eget molestie velit finibus ut. Sed nec est non libero facilisis interdum. Donec eu quam in mi ornare elementum. Integer vitae justo luctus lacus dapibus dictum. Proin ut convallis orci, eu convallis turpis. Phasellus semper quam elementum enim hendrerit, dapibus laoreet quam rutrum. Nullam pharetra metus pharetra erat facilisis laoreet. Phasellus scelerisque, est eget maximus aliquet, mauris arcu fermentum eros, eget viverra leo massa sed tortor. Proin rhoncus nibh eget placerat maximus. Nam pellentesque mauris non ultricies volutpat. Pellentesque aliquet feugiat sapien nec tempor. Praesent facilisis ultrices tincidunt.

Wrap Around

Interactive maps live within a div HTML tag so a map can exist anywhere a div can be placed. The interactive map below is a "floated" div tag. The 'float' CSS style rule allows text to wrap around the "floated" div. The hotspot layer above the image is loaded on demand when the "floated" div is visible in the browser window. A 'media' query in CSS is used to remove the 'float' CSS style rule when the browser window is displayed on smaller screen devices like a table or mobile phone.

Vestibulum gravida justo euismod neque tristique dictum. Sed posuere urna quis venenatis tristique. Cras nec mollis quam, in luctus sapien. Sed convallis orci nisl, sit amet egestas elit egestas vel. Ut dignissim diam elit, non ultrices dolor aliquet sed. Etiam interdum, mauris sit amet scelerisque molestie, arcu justo fringilla massa, ac mollis nibh ante a metus. Praesent efficitur tellus ac ipsum egestas sodales. In tristique enim tellus, eget porta erat condimentum non. Quisque quis commodo ex, sit amet bibendum erat. Morbi a imperdiet mauris. Vestibulum vitae lacinia nunc, eu blandit est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel ex tempor nibh fermentum egestas quis vitae nulla. Sed non facilisis enim, eget eleifend nibh. Nam lacinia dolor purus, vitae rutrum lectus porta sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque molestie accumsan interdum. Proin in erat sed urna mattis eleifend sed eu lacus. Curabitur in gravida massa.

Columns

A pseudo-3D level map that is loaded on demand when the map container is visible in the browser window. The map container is displayed in an adaptive column: the width of the column changes depending on the width of the browser window.

Sed pretium convallis augue fringilla pellentesque. Fusce sed tortor nibh. Integer metus mauris, pulvinar congue dolor eget, suscipit placerat mi. Vestibulum placerat eu dolor eu tempus. Vivamus lectus arcu, malesuada et enim non, convallis sodales erat. Etiam molestie semper ligula et ultrices.

Preview image
Loading
×