Showing posts with label map. Show all posts
Showing posts with label map. Show all posts
Wednesday, August 17, 2016
Black n White map for PlanetMinecraft Penthouse Sweet! Contest
Black n White map for PlanetMinecraft Penthouse Sweet! Contest
Here is my map (or world) for the contest "Penthouse, Sweet!" contest in PMC. It took me a lot of days to finish this. Hope you enjoy the map and diamond it!! (it helps ;)
Link to my world: Click here
(I know, text is too simple, I am in a rush when I made the map, making a better text later)
Monday, August 15, 2016
Auto add a map to Blogger posts
Auto add a map to Blogger posts
Heres an incredibly easy way to automatically add a fully functional small embedded Google Map to any of your Blogger blog posts.
Add this code to your template once, and automatically any blog post that you geotag will have a small embedded map featuring that location. Since its a template edit, it will work automatically for any post you geotagged, past or present. This is really pretty amazing, as I know a lot of people, from travelers to businesses have wanted to do this.
Heres an example of what it looks like. All I did was geotag that post at Gangnam station, and a convenient map automatically is displayed. Please ignore the fruity theme there, I was testing new templates.
Just add the following code to your Blogger template. Wherever you add it, thats where the map will appear in the post. In the screenshot above, I edited the size to make it a bit smaller and I added the code just below the sharing buttons, but of course you could add it just below the <post-footer>, near the timestamp, inside the post itself, whatever. Id suggest only adding it to the desktop part of the template. If your location stamp isnt showing up as a text link in your blogs mobile version, see how to enable it in my other post: [Displaying your Blogger posts location tag on mobile templates]
Add this code to your template once, and automatically any blog post that you geotag will have a small embedded map featuring that location. Since its a template edit, it will work automatically for any post you geotagged, past or present. This is really pretty amazing, as I know a lot of people, from travelers to businesses have wanted to do this.
Example map auto-embedded in a Blogger post
Heres an example of what it looks like. All I did was geotag that post at Gangnam station, and a convenient map automatically is displayed. Please ignore the fruity theme there, I was testing new templates.
 |
| Automatically embedded post map, based on posts geotag |
Just add the following code to your Blogger template. Wherever you add it, thats where the map will appear in the post. In the screenshot above, I edited the size to make it a bit smaller and I added the code just below the sharing buttons, but of course you could add it just below the <post-footer>, near the timestamp, inside the post itself, whatever. Id suggest only adding it to the desktop part of the template. If your location stamp isnt showing up as a text link in your blogs mobile version, see how to enable it in my other post: [Displaying your Blogger posts location tag on mobile templates]
Code to add to your Blogger template
<b:if cond=data:top.showLocation>Full credit for this goes to the tip site Blogger4Bloggers, which seriously is a treasure trove of neat tips like this. If you use Blogger definitely check them out and subscribe. They have some amazing stuff there.
<b:if cond=data:post.location>
<div class=post-location>
<iframe expr_src=data:post.location.mapsUrl + "&amp;ie=UTF8&amp;hnear=" + data:post.location.name + "&amp;hq=&amp;t=h&amp;output=embed" frameborder=0 height=350 marginheight=0 marginwidth=0 scrolling=no width=425/><br/>
<small style=color: #0000FF;>
<span><b><data:postLocationLabel/></b> <span class=notranslate><data:post.location.name/></span></span><br/>
<span><a expr_href=data:post.location.mapsUrl style=color: #0000FF; target=_blank>GoogleMaps</a> |
<a expr_href="https://plus.google.com/u/0/local/" + data:post.location.name style=color: #0000FF; target=_blank>GooglePlus Local</a></span>
</small>
</div>
</b:if>
</b:if>
[Source: Add Google Maps automatically to blogger posts]
Geotagging your posts
Just a reminder that to make the map appear, you need to geotag your blog post using the "Location" setting in the sidebar of the post editor. The Blogger mobile app should also do this, though for some reason mine has started giving a "Location not available". Not sure if thats a Blogger issue or just me. Anyway it works great from the desktop editor.
Case studies for using this
I can imagine a few situations where this would be very convenient.
- Small business that does installations in a local area, and writes up a blog post for each to feature the work. This would save them having to manually embed maps to the locations, which would be a pain in the ass.
- A tourist or travel writer keeping a travel blog, to easily show where he was at each stop of his tour.
- An amateur food critic can easily show the locations of restaurants hes dined at.
- A hiking club could add blog posts for specific trips, posting photos and details of the destination, and automatically have a map of the destination embedded.
Im sure there are lots more cases where this would be convenient. Like I said it beats the hell out of doing this manually, which I know some people do.
Other Map types
If youre into this, Ive got a couple of other map posts, including how to display a large map that shows the locations of all your geotagged blog posts, and the same but in a sidebar widget.
And all my map-related posts are here.
Thanks for reading, and happy mapping.
Tuesday, August 9, 2016
Display your Blogger posts on a Google Map
Display your Blogger posts on a Google Map
In this post, well make a full-size Google Map that contains all the location-tagged posts from your Blogger feed. It will display full entries on the map.
If youre looking for a more simple map page that links to the posts, or for putting a map in your blogs sidebar as a widget, please see my other post.
UPDATE 2015-09
I edited the HTML file code below. Readers on Twitter alerted me to the fact that the RSS URL for blogs only goes so far back in time, meaning many older location-tagged posts were missing from the map. Ive replaced that URL format with another that seems to stretch all the way back.
---
I keep a travel blog for friends and family, and usually tag those Blogger posts with my location. Usually, this just adds a location tag to the bottom of the post, with a link you can click to see that spot on a map. Pretty boring. But heres a nice way to plot all your geocoded (location-tagged) Blogspot blog posts onto a single Google Map. Great way to revisit old posts and visually, geographically see where and when you were.
For example, here is the map with location-tagged posts from this blog. Just click each one to view the corresponding entry in its entirety. All of the entries appear similarly.
 |
| Screenshot of my Blog Map |
Step 1 - Edit the code
Copy the code below and paste it into a plain-text document.<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById(map-canvas), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: http://www.blogger.com/feeds/blogId/posts/default?max=500&max-results=500
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, load, initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The bold URL above needs to be replaced with whatever GeoRSS enabed feed you want to use.
Luckily, Blogger blogs already have this feature enabled. Thanks, Google. So if youre using Blogger, youll just need your blogId number. You can get this by simply logging into Blogger and visiting your blogs posts lists. Look up in the URL and youll see something like "blogID=48574832938473847". Copy this number and replace "blogId" in the code above with this number.
Save it as an HTML file.
Next, you need to replace blogId in that URL with your own Blogger blog ID number.
The important thing is that the file must be accessible directly, so upload it to your own webserver, or your Dropbox public folder, or even to Google Drive. After youve uploaded the file to Google Drive, get its "shareable link". But were not done just yet. That shareable link will only open the file in the Google Drive viewer; not open the file directly. To do that, we need to edit the URL a bit. Copy just the number from your shared URL, and tack it on to the end of this string:
http://googledrive.com/host/xxxxxxxxxxxxxxx
That should be it! Youve now got a direct link to your map file.
Now you could just, for example, have a link on your blog, perhaps as a "Page" on your blog, that leads to that URL, as that is now your Blog Entries Map. But you might also want to embed the map on a page on your blog. In that case:
With Google+ all but dead, I hope Google gives some more love to Blogger. Its a bit bothersome to have to depend on these workarounds. This is why I actually prefer Naver Blogs. Its very easy to add a post map. Just wish they had an English interface.
Luckily, Blogger blogs already have this feature enabled. Thanks, Google. So if youre using Blogger, youll just need your blogId number. You can get this by simply logging into Blogger and visiting your blogs posts lists. Look up in the URL and youll see something like "blogID=48574832938473847". Copy this number and replace "blogId" in the code above with this number.
Save it as an HTML file.
Next, you need to replace blogId in that URL with your own Blogger blog ID number.
Step 2 - Upload the File
Now you need a host for this HTML file. Sadly, I dont think you can just paste this code into a Blogger entry page. Maybe you could edit the template but Im not a coding genius here.The important thing is that the file must be accessible directly, so upload it to your own webserver, or your Dropbox public folder, or even to Google Drive. After youve uploaded the file to Google Drive, get its "shareable link". But were not done just yet. That shareable link will only open the file in the Google Drive viewer; not open the file directly. To do that, we need to edit the URL a bit. Copy just the number from your shared URL, and tack it on to the end of this string:
http://googledrive.com/host/xxxxxxxxxxxxxxx
That should be it! Youve now got a direct link to your map file.
Now you could just, for example, have a link on your blog, perhaps as a "Page" on your blog, that leads to that URL, as that is now your Blog Entries Map. But you might also want to embed the map on a page on your blog. In that case:
Step 3 - Embed (optional)
Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL to your files location:<iframe height="400px" width="100%" frameBorder="0" scrolling="no"
src="http://www.yourhost.com/yourfile.html">
</iframe>
With Google+ all but dead, I hope Google gives some more love to Blogger. Its a bit bothersome to have to depend on these workarounds. This is why I actually prefer Naver Blogs. Its very easy to add a post map. Just wish they had an English interface.
Friday, August 5, 2016
Blogger Map widget for showing geotagged blog posts on a map
Blogger Map widget for showing geotagged blog posts on a map
This post will show you how to add a side-bar widget to your Blogger/Blogspot blog. The map will display pushpins at each of your location-tagged posts locations. Click the pins, and a small card appears with the title, date, and a link to the post.
If youd like the cards/pins to show the full post entries, click here for my other post.
UPDATED June 2015
You can embed the map in a page too, not just as a widget.
Location-tagged Blogger posts
I like using Blogger, and I always geotag the posts on my travel blog using the "Location" setting in the right-hand side of the Blogger compose page.
 |
| Bloggers "Location" tag feature |
This adds a nice "Location" line under my posts that displays the address of my blog posts geotag, and clicking it opens a Google Map of that location.
Until today, I thought that was all you could do with this feature, which seemed a bit disappointing. Ideally, I was hoping there was a way to display, on one single map, the locations of all my blog posts. Sort of like how you can visualize all your Foursquare checkins with its KML feed, I wanted to treat my Blogger blog posts as "Check-ins" and see where all Ive been.
It turns out that this is not only possible, but also very easy to do. The technology behind it seems ancient (2008) but I just tested it out (2014) and it works beautifully!
Adding the widget from the original source (easy)
The most simple way is just to follow the directions from this old "Blogger in Draft" post:
- Go to Bloggers "Layout" editing section
- Add a new Gadget
- Add by URL
- Paste this URL in the box:
http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml - Save it and edit the gadget, using your blogs feed URL as the source
(http://yourblog.blogger.com/feeds/posts/default)
Adding the widget from your own source (optional)
The widget source-code is coming from a very old "Blogger in Draft" post, and you might worry that it could be deleted or lost, especially since this seems to be the only location on the net for it. Ill repost it here, so that you could potentially self-host the file if need-be.
In that case:
- Copy the code from the box below and save it in a plain text document, giving it the extension .xml
- Upload the document to a place that allows public full access to the document. Dont paste it into a blog post. It has to be accessible as text. Google Sites sometimes works, as can your Dropbox Public folder, or any other file hosting site that lets you link directly to the file. Google Drive can also do this.
- Use this new URL, the location of the file you just uploaded, as the URL when you add the widget via the "Adding by URL" option.
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Blog Map" description="Display blog posts on a map." height="250" author="Brian Ngo" author_email="briancse+blogmap@gmail.com"> <Require feature="dynamic-height" /> <Require feature="setprefs" /> </ModulePrefs> <UserPref name="feedUrl" display_name="Blogs GeoRSS feed URL. Save as empty to reset." /> <UserPref name="height" display_name="Height in pixels" required="true" default_value="250" /> <Content type="html"> <![CDATA[ <style type="text/css"> .inputBox { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 100%; } .inputBox-hint { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 96%; color: #999; font-style: italic; } .statusMsg { font-size: small; color: #333; font-style: italic; } .statusMsg-error { font-size: small; color: red; font-weight: bold; } </style> <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAn138JcpDQexRxBMx-GYAehTZqGWfQErE9pT-IucjscazSdFnjBS4hjjTEOYU89NegWNS5Bv9cZZO8g" type="text/javascript"></script> <div id="instructions" style="display: none; font-size: 14px;"> <p> To display your blog posts on a map, enter your <b>blogs URL</b> below. Alternatively, you can also enter your blogs <b>RSS or Atom feed URL</b>. </p> <input type="text" id="feedUrl" name="feedUrl" class="inputBox-hint" value="Example: http://your-blog-url.blogspot.com" /> <div style="padding: 5px 10px 0 0;"> <input type="button" id="okButton" name="okButton" value="Fetch my blog!" /> </div> <div id="statusMsg" class="statusMsg"></div> </div> <div id="map"></div> <script type="text/javascript"> var PREFS = new gadgets.Prefs(); var MAP = null; var WIDTH = gadgets.window.getViewportDimensions().width; var HEIGHT = PREFS.getInt(height); var FEEDURL = PREFS.getString(feedUrl); var XML = null; var BLOGSPOT_REGEX = new RegExp(blogspot.com/?$); var inputBoxActivated = false; function init() { gadgets.window.adjustHeight(HEIGHT); var container = document.getElementById(map); container.style.height = HEIGHT + px; container.style.width = WIDTH + px; if (!FEEDURL) { document.getElementById(instructions).style.display = ; document.getElementById(feedUrl).onclick = activateInput; document.getElementById(okButton).onclick = validateFeedUrl; } else { fetchFeed(); } } function activateInput() { if (!inputBoxActivated) { document.getElementById(feedUrl).className = inputBox; document.getElementById(feedUrl).value = ; inputBoxActivated = true; } } function validateFeedUrl() { document.getElementById(statusMsg).className = statusMsg; document.getElementById(statusMsg).innerHTML = Validating feed...; var feedUrl = maybeFixUrl(document.getElementById(feedUrl).value); var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED; params[gadgets.io.RequestParameters.NUM_ENTRIES] = 1; params[gadgets.io.RequestParameters.GET_SUMMARIES] = false; gadgets.io.makeRequest(feedUrl, handleValidateFeed, params); } /** * Will attempt to detect a blogspot.com url without the feed suffix * (e.g., http://ginternfoodblog.blogspot.com/). If detected, adds * the feed suffix ("/feeds/posts/default"). Also, adds an http:// * protocol if one isnt present. */ function maybeFixUrl(url) { // trim whitepsace. url = url.replace(/^s*(S*(s+S+)*)s*$/, "$1"); // test blogspot url fix if (BLOGSPOT_REGEX.test(url)) { if (url[url.length - 1] != /) { url += /; } url += feeds/posts/default; } // test http protocol fix if (url.indexOf(http://) != 0) { url = http:// + url; } return url; } function handleValidateFeed(response) { if (response && response.data && response.data.Entry) { var feedUrl = response.data.URL; PREFS.set(feedUrl, feedUrl); FEEDURL = feedUrl; fetchFeed(); } else { document.getElementById(statusMsg).className = statusMsg-error; document.getElementById(statusMsg).innerHTML = Couldn find feed. Is the URL correct?; } } function fetchFeed() { var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET; gadgets.io.makeRequest(FEEDURL, handleFetchFeed, params); } function handleFetchFeed(response) { document.getElementById(instructions).style.display = none; var data = response.data; var points = data.getElementsByTagName(georss:point); // We werent able to get any georss:point nodes, this might be a // Webkit browser and just wants "point" as the tag name. if (points.length == 0) { points = data.getElementsByTagName(point); } var geoposts = []; for (var i = 0; i < points.length; i++) { var latlngPair = points[i].firstChild.nodeValue.split( ); var title = points[i].parentNode.getElementsByTagName(title)[0] .firstChild.nodeValue; var date; var link; var pubDate = points[i].parentNode.getElementsByTagName(pubDate); if (pubDate.length > 0) { // This is an RSS feed. var tempDate = new Date(); tempDate.setTime(Date.parse(pubDate[0].firstChild.nodeValue)); date = tempDate.toLocaleDateString(); link = points[i].parentNode.getElementsByTagName(link)[0] .firstChild.nodeValue; } else { // This is an Atom feed. date = points[i].parentNode.getElementsByTagName(updated)[0] .firstChild.nodeValue.substring(0, 10); var links = points[i].parentNode.getElementsByTagName(link); for (var n = 0; n < links.length; n++) { if (links[n].getAttribute(rel) == alternate) { link = links[n].getAttribute(href); break; } } } geoposts.push({ title: title, point: new google.maps.LatLng(latlngPair[0], latlngPair[1]), date: date, link: link }); } createMap(geoposts); } // Doing two loops here... non-ideal.. too tired to optimize. function createMap(geodata) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < geodata.length; i++) { bounds.extend(geodata[i].point); } MAP = new google.maps.Map2(document.getElementById(map)); MAP.setCenter(bounds.getCenter(), MAP.getBoundsZoomLevel(bounds)); MAP.addControl(new google.maps.SmallZoomControl()); for (var i = 0; i < geodata.length; i++) { var marker = new google.maps.Marker(geodata[i].point, { title: geodata[i].title }); MAP.addOverlay(marker); var infoHtml = <div style="font-size: small"> + <b> + geodata[i].title + </b> + <div style="color: #666;"> + Posted on + geodata[i].date + </div> + <div style="font-size: small"> + <a href=" + geodata[i].link + " target="_blank"> + View post</a></div> + </div>; marker.bindInfoWindowHtml(infoHtml); } } gadgets.util.registerOnLoadHandler(init); </script> ]]> </Content> </Module>
Blog Map widget in action
Here is a screenshot of this beautiful, underutilized, and probably forgotten feature. The map that is now displayed in your blogs sidebar shows pins at your posts geotagged locations. You can click the pins for a small pop-up dialog that contains a link to the blog post that was tagged at that location.
 |
| Blog Map sidebar widget |
Embedding the map in a Blogger Page
You dont have to just use this as a side-bar widget. The map can also be embedded on one of your Blogger pages (it works better on a "page" not a "post").
This is very easy. Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL for your blog:
<iframe frameborder="0" height="250" id="map" name="map" src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml&container=blogger&view=default&lang=en&country=ALL&sanitize=0&v=38841e006da8e2dd&libs=core:dynamic-height:setprefs&parent=http://testofpyojina2.blogspot.com/&up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&up_height=250&mid=1#up_height=250&up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&st=e%3DAFlCd0Vr5Ehr8RmECOHLq0S%252F20Y33QUXiflbjKfRMJKtj9KwkD9YS3Uq3Xezr3ffRqOsHwYznsMMLJL1lzdH2mGi20gGUDm6kZZjf5a%252F1QQDC%252B%252B6NPHmoRqokx%252BjvN6pekTyBhptzGC9%26c%3Dblogger&rpctoken=2160341050058157284" style="display: block; width: 100%;"></iframe>
It does not seem to work if your blogs feed is redirected through Feedburner, and the script can sometimes hang if you have too many entries. If anyone has any solution to these issues, let me know in the comments!
If you use Blogger, please add the widget to your Blogger blog, and demonstrate its usefulness to the masses! Id love for this wonderful bit of code to be revived, and for Google to be more active in supporting Blogger. In the crazy world of Google+ checkins and Swarm checkins and Facebook checkins and all the other checkin services, its nice to see location-tags on Blogger still being supported. Its a great way to revisit old memories and see your blog journey in a new way.
Subscribe to:
Posts (Atom)