Showing posts with label embedding. Show all posts
Showing posts with label embedding. Show all posts

2009-04-16

JSONP - It's what's for breakfast

Good news, everybody!

I've added JSONP support to the data APIs (the image APIs don't need it). JSONP allows web pages living on your sites to call APIs on the TravellerMap.com site without any server-side work - it's all in the JavaScript.

More details: JSONP in the TravellerMap.com API Documentation

Here's a short introduction to using JSONP from jQuery which is my favorite JavaScript framework. (You'll note that I don't use any frameworks on the TravellerMap.com site; I was loathe to touch them when I started, and the site was a grand experiment in building everything from scratch. But I digress...) Ω

2008-02-17

Beta: Overlay Rectangle

On request, I've added a follow-on to the You Are Here feature in Beta for iframe:

Overlay Rectangle:
  • Specify ox, oy, ow and oh as the x, y, width and height of an overlay box in map coordinates.
  • This is rendered as a translucent overlay on top of the map. The appearance is hard-coded.
  • This is supported for IFRAME only. There is no option for the user to move or remove the overlay.
  • The details of this API are subject to change without warning.
Atlas of the Imperium coverage area:
http://www.travellermap.com/iframe.htm?ox=-111.95&oy=80&ow=166.614&oh=200

Spinward Marches:
http://www.travellermap.com/iframe.htm?ox=-112.104&oy=80&ow=27.776&oh=40 Ω

2006-05-12

Add a map to your site!

I was browsing the Great TML Landgrab site and lamented the fact that many of the grabbee sites don't have maps showing where the systems are.

Now there's no excuse - just add the following line of HTML to your page, adjust the coordinates, and you've got a full fidelity map:

<iframe src="http://www.travellermap.com/iframe.htm?x=-95.914&y=70.5&scale=64&options=887" style="width: 200px; height: 200px; border: solid 1px black;"></iframe>

Note that it looks like a Permalink from the site, but with one subtle difference: "/iframe.htm" is specified rather than just the default page ("/"). This is a version of the map with no UI, specifically for embedding.

You can get the x/y by finding the system on my map site and using the "Permalink" feature in the footer - click it and it will give you the full permament URL of what you've got centered. Then copy/paste into the URL above - remembering to change the URL to include "iframe.htm"

You'll get something like this:



Note that it's a fully functional map - you can drag with the mouse and zoom by using the mouse wheel or double-clicking (hold Alt to zoom out).

Go wild!

Edited 2007-03-19 to call attention to the "iframe.htm" part of the URL necessary for embedding. Ω