Kyle Mulka's Blog

VoIP is comming to the University of Michigan! I’m excited!

VeriSign® Begins Trials of Wireless IP Connect Service to Link Mobile and Wi-Fi Networks at Leading Universities

As a follow up to my previous tutorial on how to use your own custom map tiles in Google Maps, here’s the code (function) you need to convert Google tile x, y, and zoom into a suitable WMS URL. Just stick this code in the getTileURL(x, y, zoom) or getOverlayURL(x, y, zoom) functions and tweek some of the parameters to your needs.


var baseURL = "http://localhost/cgi-bin/mapserv?"; //begining of the WMS URL ending with a "?" or a "&".
var format = "image/jpeg"; //type of image returned
var layers = "example_layer"; //WMS layers to display
var styles = ""; //styles to use for the layers
var srs = "EPSG:4326"; //projection to display. Don't change unless you know what you are doing.
var ts = this.tileSize;
var ul = this.getLatLng(x*ts,(y+1)*ts, zoom);
var lr = this.getLatLng((x+1)*ts,y*ts, zoom);
var bbox = ul.x + "," + ul.y + "," + lr.x + "," + lr.y;
var url = baseURL + "version=1.1.1&request=GetMap&Layers=" + layers + "&Styles=" + styles + "&SRS="+ srs +"&BBOX=" + bbox + "&width=" + ts +"&height=" + ts + "&format=" + format + "&transparent=true";
return url;

This was just too cool not to post. Its a flash interface to the arial imagery of Google Maps and MSN Virtual Earth. It has smooth scrolling and rotation. Here ya go: Flash Earth

Here’s the (censored) source code I use to cache WMS requests. It’s pretty straight forward as long as you have the PEAR Cache_Lite package. Feel free to use the source code however you want. I’d appreciate a link back to my site, but I don’t require it.

WMS Cache Source Code

A few things to note:

• lifeTime is measured in seconds.
• min/max X/Y are specific to the images I serve. The ones there are for Ann Arbor, MI.
• transparent.png is just a 2×2 png image which is transparent. This shows up for requests outside the box that my WMS serves.
• You will probably have to change the url with localhost in it to be whatever WMS server your images are coming from.

Welp, I just moved out of my summer apartment. It was sad. I don’t really want to go back to school yet. Summer can last another few months… really… I’d be ok with it.

Now, on my Google Maps Page, direct from The Iowa Environmental Mesonet, comes IEM Weather Maps!

I’m currently working on a way to use OGC‘s WFS (Web Feature Service) to plot points, polygons, etc. onto Google Maps. I’ve got it to work pretty well for simple points, polylines, and polygons. Give this a try:

WFS Example

I’ll explain a little of how this works. First, it loads the Google Map. Then, it takes the lat/long bounds of the Google Maps, adds a buffer region around the bounds and sends a request for the bounds plus the buffer region to the WFS url. When the request comes back, it clears the map of overlays and marks all of the points in the WFS response XML on the map. It does this cycle every time you change the map type in the upper right.

So, its not complete yet, but it works well for what it is supposed to do right now.

Future Plans:

• DONE – Draw WFS Polygons as GPolylines.
• Tile (similar to Google image tiles) and cache WFS responses (which are just XML files)
• Put attributes of Points into info windows

UPDATE: Worked a little more on it, and it works much better in IE. Something is screwy with my version of FF: 1.0.3.

UPDATE 2: So, maybe it wasn’t a problem with Firefox, but instead a problem of extra space that I wasn’t expecting in the XML input. So, I put in some code to trim the space around the polyline coordinates, and it works much better in FF. I’m still having problems with getting the information I want into the info windows. Javascript just does not have a friendly way to parse XML. I’ll have to learn some more about that. If anyone can help me, that would be great.

By popular request here is a tutorial on how to use the Google Maps API to put in your own maps (tiles). You can put in transparent tiles over the Google Tiles, put your tiles under the Google road tiles (from Hybrid mode), put transparent tiles over your own base tiles, or simply replace Google’s tiles all together. Your choice.

Warning: For this tutorial I assume you know how to make a function that returns the correct image URL for each tile based on Google’s numbering system. I explain how to use a WMS service to generate tiles for you here.

Problem

There has been a crazy amount of people using the Google Maps API to integrate their own data into a Google Maps type application. This has been accomplished by mainly using Google’s Overlays. Initially Google documented the Marker type and the Polyline type. However, if you shove a ton of these overlays on a single map, your browser gets bogged down very quickly. Here lies a problem. JavaScript has limitations with speed. It just can’t do things that fast. There are many solutions. One, outlined below, uses image tiles, either pre-rendered like Google or rendered on-the-fly via a server-side script.

Requirements

To implement this solution here’s what you need:

• Access to a web server
• A Google Maps API Key
• A unique URL for each tile of your custom map. (images themselves or by using a server-side scripting language)
• A JavaScript function that maps Google’s x, y, and zoom coordinates along with possible other parameters (tile size, etc) to that URL

You could make a bunch of tiles, but if you know what you are doing it would be a lot easier if you set up a WMS service and possibly a caching system like I have done. I’ll explain the details of this later. Subscribe to my Google Maps Blog via RSS or HTML for updates.

Before you start

1. learn the basics of the Google Maps API.
2. Figure out the URL to your custom map tiles and the function to map them

In the code

1. Create a new Gmap object with some standard controls like so

var map = new GMap(document.getElementById("map")); //associate the Gmap object with your div with an id of map

2. Create a new map spec based on one of the existing ones.

Here, we use a special function which will copy all of the properties of one of the mapTypes to your new map type.

// Copy Object Function from http://mapki.com/index.php?title=Add_Your_Own_Custom_Map
function copy_obj(o) {
var c = new Object(); for (var e in o) { c[e] = o[e]; } return c;
}
var umType = copy_obj(map.mapTypes[2]); //currently set to the hybrid mode, but could change


3. Tell the spec if you want an overlay or not

umType.hasOverlay = function () {return true;};

4. Tell the spec what URL(s) to use

There are two function which tell Gmaps where images are located: getTileURL and getOverlayURL. Since you copied an existing mapType, these function will already be defined, and if you want to stick with the default, just don’t override the function. But, if you want to override both the tiles and the overlay tiles, define the following functions like so.

umType.getTileURL = function (x, y, zoom){
//put your function code here which returns the URL to the image you want as your base
};
umType.getOverlayURL = function (x, y, zoom){

//put your function code here which returns the URL to the image you want overlayed
};

5. Add the map spec to the list

map.mapTypes.push(umType);

6. Set the map type to be the current map type if you wish

map.setMapType(umType);

7. Put some controls on your map if you wish

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

8. Focus your map on the University of Michigan Campus… hehe… GO BLUE!

map.centerAndZoom(new GPoint(-83.7381362915039, 42.27702299695707), 2); //University of Michigan Campus

That’s about it. Leave comments if you have questions. More details about the function that I use to get images will be coming later this week.

Update: Here is how to get the Google Maps interface to take images from WMS.

© 2005 Kyle Mulka

Looks like Nat is moving on to other things… gone from Student to Translator.. lol.

Update: I was recently informed she now works with the NNSA, the National Nuclear Security Administration.

Here’s a listing of some of the URLs you can as links on HTML pages to interact with AIM.

Adding Buddies
aim:addbuddy
aim:addbuddy?screenname=screen+name
aim:addbuddy?screenname=screen+name&groupname=group+name

Buddyicons
aim:buddyicon?src=image_source
aim:buddyicon?screename=screen+name
aim:buddyicon?src=image_source&screename=screen+name

Get Files
aim:getfile
aim:getfile?screenname=screen+name

Register Users
aim:registeruser
aim:registeruser?screenname=screen+name
aim:registeruser?screenname=screen+name&password=password
aim:registeruser?screenname=screen+name&password=password&signonnow=true

Check Email
aim:CheckEmail?Address=what@what.com

Adding Games
aim:addgame?name=Game
aim:addgame?name=Game&hideIMs=true
aim:addgame?name=Game&hideIMs=true&multiplayer=true
aim:addgame?name=Game&hideIMs=true&multiplayer=true&url=www.url.com

AIM Today
aim:aimtoday?url=http://www.google.com

Away Messages
aim:goaway?message=Message+Here

Themes
aim:GetExpression?URL=url+to+theme

Sending IMs
aim:goim?screenname=screen+name+here
aim:goim?screenname=screen+name+here&message=your+message

OpeningChat
aim:GoChat?RoomName=chatroom+name+here&Exchange=4