Showing posts with label display. Show all posts
Showing posts with label display. Show all posts
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.
Thursday, July 28, 2016
Arduino Mega read string from Serial display on 3 2 480 x 320 TFT LCD Shield
Arduino Mega read string from Serial display on 3 2 480 x 320 TFT LCD Shield
Arduino example run on Mega 2560, read string from Serial port, and display on 3.2" 480 x 320 TFT LCD Shield usin UTFT library. The sting is limited to 30 characters on each line.
Mega_UTFT_SerialRead.ino
/*
* Example run on Arduino Mega 2560 to read string from Serial,
* then display on 3.2" 480 x 320 TFT LCD Shield
*
* http://arduino-er.blogspot.com/search/label/3.2%22%20480%20x%20320%20TFT%20LCD%20Shield
*/
#include <UTFT.h>
extern uint8_t BigFont[];
UTFT myGLCD(CTE32HR,38,39,40,41);
const int NumOfRow = 20;
const int HeightOfRow = 16;
const int CharPerRow = 30;
String buffer[NumOfRow];
void setup()
{
Serial.begin(57600);
myGLCD.InitLCD();
myGLCD.clrScr();
myGLCD.setColor(255, 255, 255);
myGLCD.setBackColor(0, 0, 0);
myGLCD.setFont(BigFont);
myGLCD.print("Open Serial Monitor,", LEFT, 0);
myGLCD.print("to enter something.", LEFT, HeightOfRow);
initBuffer();
}
void loop()
{
String stringIn = Serial.readStringUntil( );
Serial.print(".");
if(!stringIn.equals("")){
Serial.print("*");
String stringToIns = stringIn.substring(0, CharPerRow);
insert(stringToIns);
Serial.println(stringToIns);
printBuffer();
}
}
void initBuffer(){
for(int i=0; i<NumOfRow; i++){
buffer[i] = "";
}
}
void insert(String ins){
for(int i=0; i<NumOfRow-1; i++){
buffer[i] = buffer[i+1];
}
buffer[NumOfRow-1] = ins;
}
void printBuffer(){
myGLCD.clrScr();
for(int i=0; i<NumOfRow; i++){
myGLCD.print(buffer[i], LEFT, i*HeightOfRow);
}
}
Subscribe to:
Posts (Atom)