GeoSpatial Simple is a Movable Type plugin that allows you to associate locations with blog entries using Google Maps.
Each blog entry can have a location (latitude, longitude), and a map can be shown for the location.
Also, a map can be shown which displays all of the locations for the entire blog.
Locations can be found using addresses or by scrolling the map, so you do not need to find or lookup
the coordinates for your location like many other plugins force you to do.
Locations can have custom map markers ("piks") and custom text inside of the popup map info balloons.
The plugin also allows for these blog entries to be published to mobile devices using the LightPole Publishing System.
Download it by clicking here.
A. Installation Instructions
- Copy the contents of the folder to your MovableType directory. Make sure
that the directory structure remains intact.
-
Log in to the MovableType dashboard, or refresh the dashboard if you are already logged in.
You should be prompted to "Upgrade". This will create the needed database tables.
- Go to the Google Maps website to get an API Key. Put this
API Key into the GeoSpatialSimple Sytem Plugin Settings (System Overview - Plugins).
-
Open the Header template (Design - Templates - Template Modules) and insert the <MTGSHeader/> tag between the <head> and </head> tags.
This will allow Google Maps to work on your site on all pages (the tag includes the needed Google Maps javascript and your API Key).
- Modifiy the templates and include the tags in the desired locations (see section B: Using The Tags).
- Create your new blog entries, or modify your existing blog entries to use the map. Make sure that the
"Include a map with this entry" checkbox is checked if you want the blog entry to have a map associated with it.
B. Using The Tags
When an entry is saved with map location data, a lot of information is stored.
Some tags are provided to make things very simple (such as including a map),
while other tags are provided to access the specific location fields.
Note that you must use the <MTGSHeader> tag somewhere (ideally in the Header template).
Entry Tags (must be placed within <MTEntries> tags)
-
MTEntryGSMap: creates a Google Maps map for this entry (if the entry has location data)
optional parameters:
- width - the width of the map "100%" or "250px"
- width - the height of the map "250px" (percentages may give strange results with the height)
- style - the CSS style properties of the map (will be included in the style="" property)
The style parameter will override the width and height parameters. The MTEntryGSMap tag will create a map with a css
class of map_canvas which you can create a style for in your CSS Stylesheet template.
examples:
- <MTEntryGSMap width="100%" height="250px" />
- <MTEntryGSMap style="width: 100%; height: 150px; border: 1px solid #000000; margin: 5px;" />
- MTEntryGSLatitude: the latitude of the entry
- MTEntryGSLongitude: the longitude of the entry
- MTEntryGSZoom: the map zoom level of the entry - 1 is fully zoomed-out, higher numbers are zoomed-in more
- MTEntryGSDisplay: the type of map, human readable (Normal, Satellite, Hybrid, etc.)
- MTEntryGSDisplayCode: the type of map needed by Google Maps
- MTEntryGSCustomPik: the user selected Pik for this entry (path to the image)
- MTEntryGSCustomPikImage: the use selected Pik, as an HTML image tag
- MTEntryGSAddress: the address used to find the location on the map
- MTEntryGSBubble: the map popup bubble text/info provided by the user
- MTEntryGSBubbleHTML: the bubble text formatted in HTML
-
MTEntryGSDrawPik: outputs javascript for the map pik of this entry. The pik is the user's custom chosen pik, and when clicked the popup bubble is the user's
custom bubble text shown under a link to the blog entry (see section C: Creating A Map With All Entries).
- MTIfGSMapped: true if this entry has map data
- MTIfGSShowControls: true if the user wanted to display the map controls for this entry
- MTIfGSShowPik: true if the user wanted to display the map location pik for this entry
- MTIfGSCustomPik: true if this entry has a user chosen custom map pik (I don't know why you would need this)
Conditional Tags (must be placed within <MTEntries> tags)
- MTIfGSMapped: returns true of this entry has a map (if the user saved a map)
- IfGSShowControls: returns true if the map should show the move/zoom/map-type controls on the map (if the user checked the option)
- IfGSShowPik: returns true if the map should show the map marker pik at the specified location on the map (if the user checked the option). Otherwise, the map will
simply be centered at the point specified.
General Tags
- MTGSHeader: includes needed Google Map javascript stuff. Make sure you put this in your Header template!
- MTGSInitDrawPik: includes needed javasscript - if you plan to use the MTEntryGSDrawPik tag, make sure you use this tag before the MTEntries tag.
C. Creating A Map With All Entries
To create a map with all entries on the map, you need to decide which page (template) the map will go on. Either create
a new template or edit an existing one. For example, you could put a map at the top of the Main Index page before
the entries.
To include a map, copy and paste this code into the template:
<div id="top_map_canvas" style="width:100%;height:400px;margin:5px 0px 60px 0px;"></div>
<script type="text/javascript">
function showtopmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("top_map_canvas"));
map.setCenter(new GLatLng(0, 0), 1);
var boundsdec = false;
var bounds;
<MTGSInitDrawPik/>
<MTEntries>
<MTIfGSMapped>
<MTEntryGSDrawPik/>
if(!boundsdec)
{
var point = new GLatLng(<MTEntryGSLatitude/>,<MTEntryGSLongitude/>);
bounds = new GLatLngBounds(point,point);
boundsdec = true;
}
else
{
bounds.extend(new GLatLng(<MTEntryGSLatitude/>,<MTEntryGSLongitude/>));
}
</MTIfGSMapped>
</MTEntries>
if(boundsdec)
{
var zoomlevel = map.getBoundsZoomLevel(bounds);
map.setCenter(bounds.getCenter(),zoomlevel);
}
}
}
showtopmap();
</script>
Notice the use of the MTGSInitDrawPik tag before the MTEntries tag. Adjust the css style of the top_map_canvas div as desired (or create a css style in your stylesheet for it).
D. Creating a Google Earth KML Feed
This is where we separate the manly blogs from the boyish blogs. Upon first viewing Google Earth,
most people's reaction is "Holy $#@&!"
Google Earth can read KML (Keyhole Markup Language), a special type of XML. Essentially, a KML feed is like an RSS feed for Google Earth. When loaded
into Google Earth, all of your blog entries can appear on the world as little icons which expand into text bubbles.
To create a Google Earth Feed:
- Create a new template under Index Templates. Name it KML, and make sure the filename ends with .kml (kml.kml for example).
- Paste the code below into the file, and Save
- Somewhere on your site, place a link to the KML file. A good place would probably be the subscribe widget, next to your RSS link.
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<MTEntries>
<MTIfGSMapped>
<Placemark>
<name><$mt:EntryTitle$></name>
<description><![CDATA[
<$mt:EntryBody$>
]]></description>
<Point>
<coordinates><MTEntryGSLongitude/>,<MTEntryGSLatitude/>,0</coordinates>
</Point>
</Placemark>
</MTIfGSMapped>
</MTEntries>
</Document>
</kml>
Of course, you may want to modify this simple code. Check out the Google Earth KML Documentation
to learn more.
Somewhat similar to KML is GeoRSS: http://www.georss.org
E. Creating a LightPole Compatible Feed
With a LightPole feed you can now make all of your geotagged entries available to mobile device users through the LightPole Geo-Browser.
LightPole needs two things to mobilize your blog: a lightpole XML feed and a sign up widget. LightPole reads this feed and creates a channel that your readers can subscribe to. To allow your readers to subscribe to your blog channel, you place a signup widget somewhere on your site that asks the reader for their mobile phone #
and LightPole does the rest.
To create a LightPole Feed:
- Create a new template under Index Templates. Make sure to name it lightpole, and make sure the filename ends with .xml (that is lightpole.xml).
- Paste the code below into the file (also saved in templates/lightpole.tmpl), and Save
<$MTHTTPContentType type="application/atom+xml"$><?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:gml="http://www.opengis.net/gml" xmlns:georss="http://www.georss.org/georss">
<title><$MTBlogName remove_html="1" encode_xml="1"$></title>
<link rel="alternate" type="text/html" href="<$MTBlogURL encode_xml="1"$>" />
<link rel="self" type="application/atom+xml" href="<$MTLink template="lightpole"$>" />
<id>tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,<$MTTemplateCreatedOn format="%Y-%m-%d"$>:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$></id>
<updated><MTEntries lastn="1"><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></MTEntries></updated>
<MTIfNonEmpty tag="MTBlogDescription"><subtitle><$MTBlogDescription remove_html="1" encode_xml="1"$></subtitle></MTIfNonEmpty>
<generator uri="http://www.sixapart.com/movabletype/"><$MTProductName version="1"$></generator>
<MTEntries>
<MTIfGSMapped>
<entry>
<title><$MTEntryTitle remove_html="1" encode_xml="1"$></title>
<link rel="alternate" type="text/html" href="<$MTEntryPermalink encode_xml="1"$>" />
<id><$MTEntryAtomID$></id>
<published><$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></published>
<updated><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></updated>
<summary>
<$MTEntryBody encode_xml="1"$>
<$MTEntryMore encode_xml="1"$>
</summary>
<georss:point><MTEntryGSLatitude/> <MTEntryGSLongitude/></georss:point>
<lp:property xmlns:lp="http://www.lightpole.net/xmlns/1.0">
<lp:address><$MTEntryGSAddress$></lp:address>
</lp:property>
<author>
<name><$MTEntryAuthorDisplayName encode_xml="1"$></name>
<MTIfNonEmpty tag="MTEntryAuthorURL"><uri><$MTEntryAuthorURL encode_xml="1"$></uri></MTIfNonEmpty>
</author>
<MTEntryCategories>
<category term="<$MTCategoryLabel encode_xml="1"$>" scheme="http://www.sixapart.com/ns/types#category" />
</MTEntryCategories>
<MTEntryIfTagged><MTEntryTags><category term="<$MTTagName normalize="1" encode_xml="1"$>" label="<$MTTagName encode_xml="1"$>" scheme="http://www.sixapart.com/ns/types#tag" />
</MTEntryTags></MTEntryIfTagged>
<content type="html" xml:lang="<$MTBlogLanguage ietf="1"$>" xml:base="<$MTBlogURL encode_xml="1"$>">
<$MTEntryBody encode_xml="1"$>
<$MTEntryMore encode_xml="1"$>
</content>
</entry>
</MTIfGSMapped>
</MTEntries>
</feed>
- Somewhere on your site, place the LightPole widget (see the code below also saved in templates/LightPole Embedded Widget.tmpl).
<!-- LightPole Embedded Widget for MT 4 Blogs with Columns of greater than or equal to 230 pixels -->
<div class="widget-archives widget">
<h3 class="widget-header"Mobile Blog</h3>
<p>Get <$mt:BlogName$> on your mobile phone.</p>
<div class="widget-content">
<div id="lightpole-id"
name="lightpole-embedded"
class="www.lightpole.net|008ff47a9daf27015dcdc9e901aa3d985c09fcb2|<$mt:BlogURL$>lightpole.xml">
</div>
<script src="http://www.lightpole.net/js/p3.js" type="text/javascript">
</script>
</div>
</div>
A good place would probably be above the subscribe widget. Do not change the code in the <div id="lightpole-id and the <script tags as this is critical in creating your LightPole Channel.
For blogs with columns of less than 230 pixels please use the PopUp version of the LightPole Widget (see the code below also saved in templates/LightPole PopUp Widget.tmpl)
<!-- LightPole PopUp Widget w/text link for MT 4 Blogs with Columns of less than 230 pixels -->
<div class="widget-archives widget">
<h3 class="widget-header">Mobile Blog</h3>
<div class="widget-content">
<div id="lightpole-id"
class="www.lightpole.net|008ff47a9daf27015dcdc9e901aa3d985c09fcb2|<$mt:BlogURL$>lightpole.xml">
<a id="lightpole-icon">Click here to get <$mt:BlogName$> on your mobile phone.</a>
</div>
<script src="http://www.lightpole.net/js/p3.js" type="text/javascript">
</script>
<p>Powered by <a href="http://www.lightpole.net/">LightPole, Inc.</a></p>
</div>
</div>
F. Other Stuff
All of the custom map pik images are in the mt-static/plugins/GeoSpatialSimple/markers folder. Placing more .png images into
this folder will allow them to be read by the plugin, and the user will be able to choose them as the custom map pik. However, all
of the existing piks are based off of the default pik which has certain dimensions that match up with the javascript code and shadow images. Using a differently shaped
pik graphic WILL result in weird results on the map. If you want to use differently shaped map piks, you will probably need to either modify the plugin's code
or roll your own javascript in your templates.
