MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The last piece is to notify the user when obtaining geolocation fails. We could do this with another
flyout with a Retry button, or with an inline message as below. We would not use a message dialog in
this case, however, because the message could appear in response to a user-initiated refresh action. A
message dialog might be allowable on startup, but with an inline message combined with the flyout we
already added we have all the bases covered.
For an inline message, I’ve added a floating div that’s positioned about a third of the way down on
top of the map. It’s defined in pages/home/home.html as follows, as a sibling of the map iframe:
Location
Unable to obtain geolocation;
use the app bar to try again.
The styles for the #floatingError rule in pages/home/home.css provide for its placement and
appearance:
#floatingError {
display: none;
float: left;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-align: start;
width: 100%;
text-align: center;
background-color: rgba(128, 0, 0, 0.5);
margin-top: 20%;
}
Because this is placed in the same grid cell as the map with float style, it appears as a nice overlay:
308