Introduction and setup map questions

Page: 1

Author Post
Member
Registered: Jun 2018
Posts: 4
Greetings,

Our newly created website BaydeNoc.org is a travel/natural education web site map created with basically one 2800x3500 image. The functioning Floatbox site is running and I have successfully opened Floatbox items.

In a year I will probably understand more of how the options function, but for now I would like to start the project on the right foot and so am asking for advice.

At this point I will produce three independent html pages with three linked maps and start producing <area> activations of Floatbox items. (see website) Since my last coding experience was with notepad, Perl, and Netscape Navigator I am a little rusty. I am currently struggling to understand the concepts. For example, my current dilemma is getting Floatbox to quit showing 100% of an images y dimension and give me 100% width. Eventually I am hoping to accomplish the following.

Open map images in exactly 1400x1750 containers.
Overlay mostly transparent png overlays that usemap.
Establish html5 gps positioning.
Have the left or right half of an image enlarge to the total field of view.
Have a simple flat map system that works mobile and otherwise, preferably in a viewport mode.

So, any advice on how to properly set this up? I found one example from the forum, is there any examples of Floatbox usemap in production to study?

Steven McCollough
Cartographic Editor
Bay de Noc Organization
Administrator
Registered: Aug 2008
Posts: 3350
Quote
my current dilemma is getting Floatbox to quit showing 100% of an images y dimension and give me 100% width

Floatbox doesn't do anything like that with bare images. To accomplish any kind of custom display you would need to create HTML content and display the image within that HTML with the desired stylings and behaviour. The HTML markup would be brought in to a floatbox as an iframe or as type:ajax content.

Quote
Open map images in exactly 1400x1750 containers.

Use the width and height options. Also set autoFit to false if you want the floatbox to always open full size and extend past the visible screen area if necessary.

Quote
Overlay mostly transparent png overlays that usemap.
Establish html5 gps positioning.

I'm not entirely sure what this means, but it sounds like content so it's entirely up to you. Floatbox is presentation, not content, and it certainly does not include any GPS capabilities.

Quote
Have the left or right half of an image enlarge to the total field of view.

Another reason why you may want to bring your images in as HTML content. This kind of custom behaviour would need to be coded into that HTML. An example of how Floatbox handles in-frame resizing of large images can be found at the big 'earth-from-space' image, second example from the bottom of the 'Images' tab on the Floatbox demo page.

Quote
Have a simple flat map system that works mobile and otherwise, preferably in a viewport mode.

Again, content, so up to you. But this sounds to be in direct opposition to your description of the base page being a single 2800x3500 image.

Quote
is there any examples of Floatbox usemap in production to study?

Pretty much everything Floatbox does is demo'd on the demo page, complete with sample markup below each example. An image map example displaying Platonic solids is shown at the bottom of the 'Images' tab.
Member
Registered: Jun 2018
Posts: 4
Thank you for this considered response.

These pointers are exactly the sort of thing I was looking for.

1. Floatbox is like super-css
2. Autofit was an important clue
3. Content is html
4. I don't understand viewport mode

Steve
Administrator
Registered: Aug 2008
Posts: 3350
You'd probably be best off to disregard my comment about the base page size not being mobile-friendly. After all, map apps work just fine with a large (virtually infinite) scrollable map on small screens.
Member
Registered: Jun 2018
Posts: 4
Greetings,

I have created the basic Floatbox site at baydenoc.org and am quite pleased at how it is going given my limited experience with Js and html5. Much of the visible thumbnails will probably eventually be popups, tooltips+, and other techniques once I get better at it.

The main code is the area tag and the typical code I am experimenting with looks like this;

<area shape="rect" coords="408,251,495,375" class="fbTooltip" data-fb-tooltip="source:#morel; boxLeftAdjust:408; boxTopAdjust:375;" alt="The famous Morel Mushroom." href="./morel.html" /><div id="morel" style=" display:none;"><div style="float:left; font-size:14px;  margin:1em; ">The Amazing Morel Mushroom.</div></div>


The box adjustment is not going to work as I am using it on a large map page and scrolling ruins the positioning. Can the hidden div refer to an area ID or some other technique I should be aware of. I would like the same functionality when I would have the window reposition to an area different than the current view.
Administrator
Registered: Aug 2008
Posts: 3350
The use of boxLeftAdjust and boxTopAdjust on the tooltip to move it away from the top left corner is a misguided effort to paper over some underlying problem. Let's abandon that effort to modify the effect and instead attack the cause.

The underlying problem is a missing #hash character on your img's usemap value. You have...
usemap="baydenocmap"
You want...
usemap="#baydenocmap"
Quote

An HTML checker would have quickly spotted this error. For example, third error down at https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.baydenoc.org%2F

While we are here, it doesn't seem to be an error per se, but it's unusual to find an <img> element inside a <map> block. I know I would sleep better if you move that <img> up one line and left the <map> containing only <area> elements. This is just me being a fuss-ass, but on occasion being a fuss-ass can avoid surprises.


To the second issue.....
Avoid putting both an fbTooltip and a standard floatbox class on the same host element. The styles and behaviours will argue with each other, and there's no sensible way to make them co-exist for touch device users.

Please check out the first example on the Tooltips+ tab of the demo page (the small flower image). This shows a good solution of putting the link to the floatbox content inside the content of the tooltip - an approach that works quite smoothly and intuitively, and that keeps both old-guard mouse clickers and vanguard touch people happy.
By the way, if you take that link inside the demo page tooltip example, it will take you to the section of instructions which has more to say about not putting a tooltip and a floatbox together on an element.


And finally...
No, you can't put anything inside an area element and nor can an area element display anything on the screen. It's just a mechanism for changing behaviours on different parts of an image - it doesn't display those parts.
Member
Registered: Jun 2018
Posts: 4
Quote
The underlying problem is a missing #hash character


It is kind of funny how it never occured to me that the html might not be valid. I vaguely knew an problem existed, but I thought if anything it was missing reference to the area tags. In self defense, validators were not a thing in the 90's. It is slightly embarrassing to have not accomplished what you have repeated over and over in the forum about validation. I did learn to great advantage the browser console, and I do read the manual over and over.

Quote
it doesn't seem to be an error per se,

Also interesting was that I always thought of the image being an element (if that is the right word) of the map. I see now what you mean.


Quote
Avoid putting both an fbTooltip and a standard floatbox class

I really struggle with this concept and have read the material over and over. It really is a matter of understanding the principles which comes slowly when you still confuse elements with styles.{smile}

Thank-you for the time consuming hand holding, you have saved me days of effort. I sing the praises of your technical support.

Page: 1