How to create geolocated posts in Blogger

GreenerMaps screenshotI'm helping out on a project, GreenerEarth, which is a location companion site to the GreenerMagazine set of environmental weblogs.

For various reasons, they're using Blogger to currently run their weblogs since it's free, easy to setup, and easy to use for non-technical people.

The goal of GreenerEarth was to create a companion weblog that provided maps and locations to the various articles that will appear on GreenerEarth. The difficulty resides in the severe restrictions using an hosted blogging tool places on creating a dynamically generated maps. I wanted to allow the writers to easiliy create new posts, put in locations, and then just 'post'. The actual page would handle parsing the post for the location data and then creating the resulting map.

The only access you have in Blogger (at least) is the main template page, and post templates. Therefore, the solution calls for a marked-up post with lots of tags, and heavy Javascripting of the DOM to dynamically create an array of locations and put these on a GoogleMap.

The result is the ability for any blog author to write a post using the template and the resulting post to have a map with the multiple (or single) locations and article body. As the user clicks on locations in the map, the detailed description shows itself and a bubble shows the summary and link to the site's homepage.

The nitty-gritty


The post template looks like this:



The fields should be pretty self-explanatory. The GeoRSS microformat is still being standardized, and hasn't yet been defined for marking up XHTML content. So I made an ad-hoc solution. A filled out post would then look like so:

Sustainable Diamaonds

Diavik diamond mines are sustainable Mines
located in the Northwest Territories.

Diavik diamond mine

Lac de Gras

Northwest Territories

Canada

Some Interesting information
about Diamond mines

If you have multiple locations, copy the template before the

and paste it below the previous location (or in the desired order). You can add as many locations as you want. Each location will show up as locations with connecting lines on the map.

Somewhere in your template you should add the following to actually place your map. You can vary the size as desired here.


the nitty-gritty

To grab the code below in a simple form, download the source code here.

The following Javascript goes at the bottom of the Blogger template. What it does is search through the DOM (the post) and pulls out all of the location elements and then creates an array of the latitude and longitude values of the location. The summary and link are placed within the GoogleMaps popup window and then the rest of the actual location information shows or hides itself in the right-hand sidebar.


";

var marker = createMarker(locationPoints[locationPoints.length-1], i, html, mapLocation[i]);

map.addOverlay(marker);

}
map.addOverlay(new GPolyline(locationPoints));
map.centerAndZoom(locationPoints[0], 4);

}

Finally, the appropriate CSS markup also needs to be placed in the template. Modify it as you want to make it match the rest of your blog.


#map {
float: left;
text-color: black;
font-size: 12px;
}
#map .mapMarker{
color: black;
width: 250px;
}

#map .mapMarkerMore {
text-align:right;
}
.location {
font-size: 12px;
border: 1px solid white;
background-color: gray;
padding-left: 5px;
}
.location .summary {
color: white;
font-size: 16px;
border-bottom: 1px solid white;
background-color: #9ad;
margin-left: -5px;
padding-left: 5px;
display:block;
}
.location .detail {
display: inline;
}
.geo_name {
font-size: 11px;
border-bottom: 1px;
}

.geo_city, .geo_region, .geo_country {
display: inline;
margin-top: 4px;
padding-right: 3px;
font-size: 9px;
border-top: 1px solid white;
text-align: right;
}

.greenNav {
display: inline;
list-style-type: none;
padding-right: 5px;
margin: 0px;
}
.greenNav li {
display: inline;
list-style-type: none;
border-right: 1px solid gray;
padding-right: 5px;
}
.hidden {
display: none;
}

About this article

written on
posted in GeolocationWebJavascriptEnvironment Back to Top

About the Author

Andrew Turner is an advocate of open standards and open data. He is actively involved in many organizations developing and supporting open standards, including OpenStreetMap, Open Geospatial Consortium, Open Web Foundation, OSGeo, and the World Wide Web Consortium. He co-founded CrisisCommons, a community of volunteers that, in coordination with government agencies and disaster response groups, build technology tools to help people in need during and after a crisis such as an earthquake, tsunami, tornado, hurricane, flood, or wildfire.