{"id":62848,"date":"2024-03-05T03:01:00","date_gmt":"2024-03-04T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62848"},"modified":"2024-03-04T10:07:05","modified_gmt":"2024-03-04T00:07:05","slug":"earth-scanner-map-image-margin-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-map-image-margin-tutorial\/","title":{"rendered":"Earth Scanner Map Image Margin Tutorial"},"content":{"rendered":"
\"Earth<\/a>

Earth Scanner Map Image Margin Tutorial<\/p><\/div>\n

We finally got around to addressing a bugbear we’ve had with our Earth Scanner web application, of recent times, right from its inception, regarding the small mismatch of overlayed HTML elements with the world map (image) underneath, improving on yesterday’s Earth Scanner Wikipedia Images Tutorial<\/a>.<\/p>\n

So, is it the chicken or the egg that should change? Neither, because the marmalade just crossed the road at the zebra crossing. And you don’t want to make the zebra mad, now … huh?!<\/p>\n

Well, we figured, even just from a laziness perspective, it was easier to tinker with CSS margin-left<\/i> and margin-top<\/i> properties of the world map (image) element, and so got to<\/font>, tweaking …<\/p>\n


\n document.write(\"<img src='\/HTMLCSS\/HYP_50M_SR_W.jpg' id=myimg width=10800 height=5400 style='margin:0 0 0 0;margin-left:10px;margin-top:10px;'<\/font>><\/img><div id=dstyle><\/div><input id=sdtitle type=hidden value='Earth Scanner'><\/input><input id=sdtext type=hidden value='Earth Scanner - RJM Programming'><\/input><input id=sdurl type=hidden value='\" + document.URL.split('#')[0] + ('' + location.hash).replace(\/^null\/g,'').replace(\/^undefined\/g,'') + \"'><\/input><iframe scrolling=no farmeborder=0 style='z-index:3456;position:fixed;top:55px;left:15px;width:30px;height:24px;' src='\/HTMLCSS\/web_share_api_test.html?emojize=128231'><\/iframe><input type=hidden id=itworked value=''><\/input><iframe onload=coordit(this); id=wif style=display:none;margin-left:50px; src='\/\/wikipedia.org\/wiki\/Saint_George,_Antigua_and_Barbuda'><\/iframe><iframe onload=coordittwo(this); id=wiftwo style=display:none; src=><\/iframe><input type=hidden id=placegeo title='' value=''><\/input>\" + atend);
\n document.body.title='' + document.title + String.fromCharCode(10) + ' ... at prompt ++ can make delay between snapshots slower and -- can make delay faster ' + String.fromCharCode(10) + ' ... at prompt > can hide time related information else < reveals again ' + String.fromCharCode(10) + ' ... comma lists of TimeZone places (suffix ? for Wikipedia ! forced), Country Codes, Country Names can be plotted via click or via hashtag use at address bar ' + String.fromCharCode(10) + ' ... suffix with space to show meridians and\/or prefix to not show meridians ' + String.fromCharCode(10) + ' ... multiple place plotting is faster via comma separated {} annotated list (where, instead of comma, a minus - constructs Trip Leg between those places) ';
\n document.body.style.backgroundColor='rgba(0,0,255,0.5)';<\/font>
\n<\/code> <\/p>\n

… that last codeline trying to ameloriate that kludgy feeling change we felt compelled to make … though we all want to participate in the Sydney to Hobart Yacht Race, don’t we?!<\/p>\n

And then further to yesterday’s Earth Scanner Wikipedia Images Tutorial<\/a>, and continuing its theme, instead of Wikipedia images only for “TimeZone places” we extended the thinking to other places, where possible.<\/p>\n

And then there was the checking of a couple of matters regarding sharing and collaboration code. It occurred to us the way we were starting to build up how long that “nontz” get argument might get to with all these non-timezone places, it occurred to us that it could start getting mapped back into the “purely clientside” location.hash mode of thinking, as per<\/font> …<\/p>\n


\n var nontz=('' + <\/font>location.search + ('' + location.hash).replace(\/^\\#\/g,''))<\/font>.split('nontz=')[1] ? decodeURIComponent(('' + <\/font>location.search + ('' + location.hash).replace(\/^\\#\/g,''))<\/font>.split('nontz=')[1].split('&')[0].split('#')[0]) : '';
\n<\/code> <\/p>\n

… so that we could rest easier. In amongst that initial “nontz” coding we added<\/font> …<\/p>\n


\n plotplacepush=(locans.split('|')[0].replace(\/\\_\/g,' '));
\n
\n if (bigback.indexOf(plotplacepush + ':') == -1 && bigback.indexOf(plotplacepush.replace(\/\\ \/g,'_') + ':') == -1 && nextwiftwo.indexOf(encodeURIComponent(plotplacepush)) == -1) {
\n if (wiftwoavailable) {
\n wiftwoavailable=false;
\n document.getElementById('wiftwo').src='\/PHP\/fgc\/index.php?tzexact=&tznickname=' + encodeURIComponent(plotplacepush.replace(\/\\ \/g,'_'));
\n } else {
\n nextwiftwo+='\/PHP\/fgc\/index.php?tzexact=&tznickname=' + encodeURIComponent(plotplacepush.replace(\/\\ \/g,'_')) + '#';
\n }
\n }<\/font>
\n
\n plotlongpush=(locans.split('|')[1].replace('_','-'));
\n plotlatpush=(locans.split('|')[2].replace('_','-'));
\n<\/code><\/p>\n

… so that our Hunters and Collectors<\/a> “Do You See What I See?” can be more often in the affirmative<\/a> in the changed<\/a> seventeenth doll<\/strike>draft<\/a> of the Earth Scanner<\/a> web application for you to retry, again<\/a>.<\/p>\n

\n

\n

Previous relevant Earth Scanner Wikipedia Images Tutorial<\/a> is shown below.<\/p>\n

\"Earth<\/a>

Earth Scanner Wikipedia Images Tutorial<\/p><\/div>\n

Yesterday’s Earth Scanner Linear Gradient Leg Tutorial<\/a>‘s use of Wikipedia<\/a> geodata reminded us, again<\/a>, of the incredible resource Wikipedia can be for the online world.<\/p>\n

Wikipedia is a great resource for images of places too, and today, we add to the functionality of …<\/p>\n