Webmonkey » Adam Duvander http://www.webmonkey.com The Web Developer's Resource Fri, 05 Apr 2013 20:20:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 Multi-map with Mapstraction http://www.webmonkey.com/2010/02/multi-map-with-mapstraction/ http://www.webmonkey.com/2010/02/multi-map-with-mapstraction/#comments Wed, 03 Feb 2010 05:04:54 +0000 Adam Duvander http://origin.stag2.webmonkey.com/?p=46138

It seems every mapping website has an API these days. Google, Yahoo, Microsoft, Mapquest… how do you choose? With Mapstraction, you don’t have to.

Mapstraction is an open source abstracted JavaScript mapping library. You can write mapping code once, then switch between map providers by only changing two lines. Mapstraction is maintained by a group of geocode lovers who want to give developers options when creating maps.

To help you on your way to using Mapstraction, we’ll simply create a map we can display on a web page, and then add a marker to denote a particular location.

Contents

  1. What You’ll Need
  2. How to Proceed
    1. Step 1: Get started
    2. Step 2: Adding in the Map
    3. Step 3: Adding Markers
    4. Step 4: Changing Map Providers
  3. Where to go from here


What You’ll Need

  • Knowledge of JavaScript, CSS and HTML
  • Mapstraction JavaScript file
  • At least one map provider API key (they’re free). I’ll be using Google in most examples. Get a Google API key here.


How to Proceed


Step 1: Get started

Once you have a Google API key, you’ll need to grab the latest Mapstraction JavaScript file. Got it?

Now create a file in the same directory as mapstraction.js containing the following HTML: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>

<title>My Mapstraction Map</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=YOURAPIKEYHERE" type="text/JavaScript"></script>

<script src="mapstraction.js"></script>

	</head>
	<body>

<h1>My Mapstraction Map</h1>

<div id="mapstraction"></div>

	</body>

</html>

Remember to put your API key in place of YOURAPIKEYHERE. The above code loads the Google API and the Mapstraction library, but we don’t have a map just yet.

Mapstraction is loaded, but we have yet to add the map

Mapstraction is loaded, but we have yet to add the map


Step 2: Adding in the Map

To tell Mapstraction how and where to add a map, we need to include some JavaScript between the head tags near the top of our HTML file. Try this function, initialize_mapstraction: 


<script type="text/JavaScript">
var mapstraction;

function initialize_mapstraction()
{
	// Create a map object
	mapstraction = new Mapstraction('mapstraction', 'google');
	// Create a latitude/longitude point
	var ll = new LatLonPoint(37.780764,-122.395592);
	// Display map centered on above point, zoomed to show most of San Francisco
	mapstraction.setCenterAndZoom(ll, 12);
}
</script>

Here, we tell Mapstraction to use the element with the id “mapstraction” as our map. In the HTML code we created in step one, we included an empty div with the “mapstraction” id. In the second part of the script, we create a latitude/longitude point that represents the Webmonkey offices. Then, we set that point as the center and set a zoom level of 12, which is enough to still see most of San Francisco.

Mapstraction requires us to set the size of our map. We use a little CSS to do this. You can add this to your CSS file, or add this code between your head tags:


<style>
#mapstraction
{
	width: 500px;
	height: 300px;
}
</style>

Finally, we need to call the initialize_mapstraction function. To do this, add an onload attribute to the body tag of your HTML document, like so: 

	<body onload="initialize_mapstraction()">

Reload the HTML file and you should see San Francisco. You may notice that your map looks exactly like a Google Map. That’s the point. Mapstraction doesn’t have any maps of its own. It merely provides a way to easily switch between map providers. I’ll show this later in the tutorial and explain why you might want to do this.

Mapstraction adds a Google map to the web page

Mapstraction adds a Google map to the web page


Step 3: Adding Markers

So far we’ve created a very simple map. You can click and drag it around to see more of the Bay Area, but for the most part our map is boring. Let’s spice it up with a map marker.

To place marker on our map, we’ll need to add some more JavaScript code to the initialize_mapstraction function. Add these lines after the setCenterAndZoom line: 


// Create map marker from above point
var marker = new Marker(ll);

// Include text in info bubble shown when marker is clicked
marker.setInfoBubble("<h2><strong>Wired.com</strong></h2><p>Home of Monkeys</p>");

// Add marker to the map
mapstraction.addMarker(marker);

Reload your HTML file and you’ll see a little red marker in the center of the map. That’s the Webmonkey offices. Our marker uses the same latitude/longitude point we created in the previous step to center the map.

Now try clicking the marker. Surprise! We also included an interactive message. Mapstraction calls this an info bubble. In the code, you may notice the setInfoBubble line. You can put anything you want between the quotes. Try changing the text–we don’t mind!

A red marker is added to the map

A red marker is added to the map


Step 4: Changing Map Providers

Now that we have a working Mapstraction example, let’s use the full power of an abstracted library by switching map providers.

There are many reasons you might decide to change providers down the line:

  • Current provider might change the terms of service
  • Your map could become too popular and use up too many map views
  • Current provider quality might get worse, or they might put ads on your map
  • New provider might have prettier maps
  • You might get bored of current provider, or come up with a reason that makes sense to you

The promise of Mapstraction is to only have to change two lines of code. Imagine if you had a large map with many markers and other features. It could take a lot of work to manually convert the map code from one provider to another.

In this example, we’ll be switching to Microsoft Virtual Earth, which happens to not even require an API key.

The first line you need to change is the call to the API JavaScript. Remove the script line that calls to maps.google.com and replace it with this line: 


<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>

Then, inside the initialize_mapstraction function, replace “google” with “microsoft” where the new map object is created. Here’s the entire line to include:

	mapstraction = new Mapstraction('mapstraction', 'microsoft');

Reload the HTML file and like magic, the same map is now displayed as a Virtual Earth map.

A simple edit to the code changes our map provider from Google to Microsoft

A simple edit to the code changes our map provider from Google to Microsoft


Where to go from here

Despite showing off Mapstraction’s provider-switching magic, our map is still fairly simple. Here are a few ways to jazz it up.

Give your users a way to zoom in an out. Mapstraction provides both large and small zoom controls. This line adds the large one:

mapstraction.addLargeControls();

And this the small one:

mapstraction.addSmallControls();

You can add these, and several other controls, in one line using the addControls function

One of my favorite Mapstraction features is automatic centering and zooming. When called on a map with multiple markers, Mapstraction calculates the center point of all markers and the smallest zoom level that will contain all the markers. So much snazziness, in one simple line:

mapstraction.autoCenterAndZoom();

Draw lines on a map, automatically filtered out certain markers, and more. The Mapstraction community is continually adding new features. Check out their homepage or their API documentation.

]]> http://www.webmonkey.com/2010/02/multi-map-with-mapstraction/feed/ 3 Mobile Browsers Deserve Location Data http://www.webmonkey.com/2008/11/mobile_browsers_deserve_location_data/ http://www.webmonkey.com/2008/11/mobile_browsers_deserve_location_data/#comments Tue, 25 Nov 2008 23:06:23 +0000 Adam Duvander http://www.webmonkey.com/blog/mobilebrowsersdeservelocationdata How come my desktop browser can get my location, but mobile Safari on my iPhone acts as if it doesn’t know where I am? I hate to seem impatient, but there is a proposed geolocation standard. Mobile browsers should adopt it swiftly.

The mobile web is here. The iPhone and Android are going to duke it out, and the end result will be more users. Facebook’s mobile visitors have tripled in the last year. That’s a lot of mobile browsing.

If the location-aware services are going to be as disruptive as everyone has said, these devices need to get better at sharing the information available within them. Yes, Android and iPhone both have apps. But we shouldn’t need to wrap our web projects in an app just to access the coordinates.

The Geode plugin for Firefox and its presence as a full feature in the browser’s most recent beta have proven it’s reasonable to include it even on a non-mobile machine. Despite the flakiness of WiFi-based geolocation, innovative sites have incorporated the technology. You can shout your whereabouts or tie files to a location all with the help of browser-based geolocation. Of course, we have a Geode/Gears geolocation tutorial so you can incorporate it, too.

But we really want it incorporated in mobile devices, so we’d be able to see some real innovation. Location-based services are at the horse and buggy stage right now. Let’s give it an engine.

See also:

]]> http://www.webmonkey.com/2008/11/mobile_browsers_deserve_location_data/feed/ 0 Mashups Are Dead, But the Web is Alive http://www.webmonkey.com/2008/11/mashups_are_dead__but_the_web_is_alive/ http://www.webmonkey.com/2008/11/mashups_are_dead__but_the_web_is_alive/#comments Tue, 25 Nov 2008 19:33:53 +0000 Adam Duvander http://www.webmonkey.com/blog/mashupsaredeadbutthewebisalive Photo/Wikipedia mashupMashups, web apps which merge two or more data sources, essentially arose from the introduction of the Google Maps API in June 2005. APIs for easily accessing data existed before then, but a way to visualize it geographically was a huge tipping point.

Due to the popularity of map mashups, ProgrammableWeb’s mashup directory is over a third mapping-related. But something interesting has been happening: other types of mashups are becoming popular. Over the last two weeks, for example, maps mashups are only 20% of the new additions to the directory. Granted, it’s a small sample and mapping is still tops by far, but other ways of mashing up data are becoming more relevant.

How can mashups be both dead and more relevant? Consider Friendfeed, which aggregates your data using APIs of several social websites, pulling in each item you and your friends post to Twitter, Flickr, Digg, your blogs. It fits the criteria of a mashup perfectly. If Friendfeed was entered into the recent MashupCamp contest, it would have come away victorious. Friendfeed is an uber-mashup, though nobody calls it that.

Mashups are dead because the whole web is becoming a collection of APIs. In the future, showing an embedded map of liquor stores near that New Year’s party won’t be a snazzy add-on, it will be a necessary feature.

See also:

]]> http://www.webmonkey.com/2008/11/mashups_are_dead__but_the_web_is_alive/feed/ 1 New Tools Help You Build Better Maps http://www.webmonkey.com/2008/11/new_tools_help_you_build_better_maps/ http://www.webmonkey.com/2008/11/new_tools_help_you_build_better_maps/#comments Mon, 24 Nov 2008 23:37:49 +0000 Adam Duvander http://www.webmonkey.com/blog/newtoolshelpyoubuildbettermaps Example of progressbarcontrol

What’s cooler than Google Maps? Tools built on top of it. Developers from the Netherlands have released some helpful libraries to make more usable, interactive Google Maps.

Google hosts an open source utility library with several useful examples. Among them, a drag-to-zoom feature and a way to create dynamic labeled markers.

A progress bar is among the new additions to the libraries. When adding more than just a few markers, it can take some time. Rather than make your users sit through the slow-down, this library shows the progress via a popup status bar that fills as it completes.

The other new library, SnapToRoute, allows developers to restrict some actions to just along a polyline. The example included shows zooming along a specific route.

I love these sorts of libraries that make creating advanced maps easy. Of course, I’d love to see platform-independent examples, so developers of any map API could benefit. These libraries would be great to see as a part of Mapstraction, the multi-map I covered in a tutorial.

See also:

]]> http://www.webmonkey.com/2008/11/new_tools_help_you_build_better_maps/feed/ 0 Developer Rebuilds Twitter in a Week http://www.webmonkey.com/2008/11/developer_rebuilds_twitter_in_a_week/ http://www.webmonkey.com/2008/11/developer_rebuilds_twitter_in_a_week/#comments Mon, 24 Nov 2008 20:30:26 +0000 Adam Duvander http://www.webmonkey.com/blog/developerrebuildstwitterinaweek “Gentlemen, we can rebuild it. We have the technology. We can make Twitter better than it was before. Better, stronger, faster.”

That’s the speech I imagine Niall Kennedy giving himself recently when he decided to rewrite Twitter’s front end using web best practices. The result is a read only Twitter that’s a little less pretty, but a whole lot more streamlined.

To start, Kennedy converted Twitter’s table layout to XHTML/CSS-based design. He also split the page load so that all those little avatar graphics are loaded asynchronously, which makes pages appear faster.

One of the larger undertakings was localizing (or is it localising?) the site. Kennedy had to choose common wording throughout the site and ensure nothing that would ever need translating was hard-coded.

Kennedy claims a 41% decrease in bandwidth and a much faster DOM footprint. It’s a geeky way of saying that TwitterFE is an improved Twitter.

Of course, the front end has never been Twitter’s biggest problem. It’s the back-end, with thousands of messages a second, that prompts the Fail Whale. In all, TwitterFE reminds of redesigning Craigslist. It seems like a great idea, but it ends up being a solution searching for a problem.

But as a case study, TwitterFE is extremely useful. Perhaps Kennedy will release his source code, which runs on Google App Engine, and we can all learn from his experience.

See also:

]]> http://www.webmonkey.com/2008/11/developer_rebuilds_twitter_in_a_week/feed/ 0 Beware of iPhone Clickjacking: Update to 2.2 http://www.webmonkey.com/2008/11/beware_of_iphone_clickjacking_update_to_2dot2/ http://www.webmonkey.com/2008/11/beware_of_iphone_clickjacking_update_to_2dot2/#comments Mon, 24 Nov 2008 19:15:25 +0000 Adam Duvander http://www.webmonkey.com/blog/bewareofiphoneclickjackingupdateto22 Example password jacking on iPhoneAn iPhone clickjacking attack was fixed with last week’s release of the 2.2 software. Prior versions contained a CSS transforms bug that caused iframe content to appear as part of the actual page.

It looks like the bug never saw malicious use in the wild, because the developers who noticed it alerted Apple and kept the bug secret while it was fixed. Like other clickjacking attacks, the most likely use is to get a user to inadvertently click an ad. Although, an even more dangerous example is shown to harvest passwords.

If the StreetView and Maps additions in the latest iPhone software wasn’t enough to get you to download the free update, let this attack be reason enough.

Though the bug was apparently discovered by developer Wayne Pan, it was submitted by jQuery creator John Resig. Resig just keeps showing up for his various work. In addition to jQuery, he’s on the Firebug team at Mozilla, performance testing browsers and creating JavaScript animations.

See also:

]]> http://www.webmonkey.com/2008/11/beware_of_iphone_clickjacking_update_to_2dot2/feed/ 0 Your iPhone Idea is Worth Zilch http://www.webmonkey.com/2008/11/your_iphone_idea_is_worth_zilch/ http://www.webmonkey.com/2008/11/your_iphone_idea_is_worth_zilch/#comments Mon, 24 Nov 2008 18:47:47 +0000 Adam Duvander http://www.webmonkey.com/blog/youriphoneideaisworthzilch iPhone ideasDo you have an idea for an iPhone app? Yeah, me too. And so does the barista at my local coffee shop. Ideas for iPhone apps are as ubiquitous as screenplays in LA. The idea alone isn’t worth anything, according to iPhone consultant Raven Zachary.

There are several factors conspiring against your iPhone idea:

  1. There are still few people who know how to create iPhone applications
  2. There are plenty of iPhone ideas from people who are willing to pay
  3. The App Store is lucrative enough for developers to create their own apps

I could probably add “you don’t know Objective-C” to that list, because if you did, you’d already be writing iPhone apps. Apple’s NDA, now lifted, handcuffed many developers eager to share their knowledge, so thorough iPhone how-tos are still hard to come by. Plus, see #3 on the above list. If you know how to create iPhone apps, you’re probably too busy doing just that.

Like Zachary, I love hearing ideas. Some iPhone ideas may be based on wanting to join the gold rush at the App Store, but I’d guess most are rooted in passion. It’s a terrible thing, dousing the fire of your iPhone excitement. But it’s not just the iPhone: all ideas are essentially worthless, as some commenters mentioned in reactions to Zachary’s post.

Ideas have always been a multiplier of execution. That was the case in 2005 when everybody had great ideas for a lucrative mashup and it’s the case now with the iPhone. The difference is that now it’s even harder to execute.

See also:

]]> http://www.webmonkey.com/2008/11/your_iphone_idea_is_worth_zilch/feed/ 2 Share Your Mundane Details http://www.webmonkey.com/2008/11/share_your_mundane_details/ http://www.webmonkey.com/2008/11/share_your_mundane_details/#comments Sat, 22 Nov 2008 00:52:48 +0000 Adam Duvander http://www.webmonkey.com/blog/shareyourmundanedetails Pie chart of ingesting liquid

The web has all sorts of data, but it’s sorely missing yours. If you request an account from Daytum, you can change that.

The site lets its users collect data about themselves and share it via beautiful charts. Track your coffee consumption, how often you exercise, or anything else that matters to you.

One of the site’s creators, Nicholas Felton creates a personal annual report each year that shows his year in data. Through gorgeous visualizations, Felton shows off the mundane. And now you can, too.

Felton gave a talk about the history of Daytum at the Future of Web Design. His slides are embedded below:

Using the site is super easy. You can drop in, add some data, and drop out. There’s also a Twitter submission system, for adding your data on the go.

The site is so simple, yet has a number of options for users. There’s lots of room for improvement, such as an API to allow some automated inclusion of data. Overall, this is a fun, easy-to-use site that’s worth checking out.

See also:

]]> http://www.webmonkey.com/2008/11/share_your_mundane_details/feed/ 0 Go Go Gadget OAuth Support http://www.webmonkey.com/2008/11/go_go_gadget_oauth_support/ http://www.webmonkey.com/2008/11/go_go_gadget_oauth_support/#comments Fri, 21 Nov 2008 19:02:09 +0000 Adam Duvander http://www.webmonkey.com/blog/gogogadgetoauthsupport I Can Has Open

Passwords are a little bit more secure now that Google added OAuth support to its iGoogle Gadgets. Developers can now use their gadgets to easily grab data from OAuth-enabled APIs. Using OAuth, users do not have to give their passwords to developers. Instead, if a developer wants data from a service, the user enters the password into the service itself, providing the developer permission to access their data.

MySpace updates, AOL Mail and Google Book Search are the first gadgets to use OAuth. Finding the MySpace gadget via the iGoogle search is difficult, as there are pages of results by non-MySpace developers. Some of these ask for your password in an insecure manner, without OAuth. If you have a MySpace account, try adding the official MySpace gadget.

MySpace OAuth experience from Google Gadget

Adding the MySpace gadget gives a good idea of the user experience provided by the OAuth process. Rather than username/password fields within the iGoogle box, there’s a sign in button. Click it, and an OAuth page pops up providing a MySpace login page. Once you’ve signed in, the popup disappears and the gadget is populated with your MySpace data: updates, status, bulletins, and inbox.

Behind the scenes there is an exchange of keys that ensures the gadget maker really does have your permission to access the data. Those keys are permanent, so the sign in process is a one time deal for each OAuth gadget, not something you’ll have to do every time you visit your iGoogle page. For an example of how OAuth works, check out my FireEagle tutorial.

The update to gadgets is world’s beyond password-sharing, but there should still be phishing worries. Emulating the popup process would be easy and there’s nothing to signify that the page I’m seeing really is MySpace. Luckily, that’s the same problem that many are already trying to fix. A solution to the problem for banking sites, for example, will probably be the same solution for OAuth.

[Photo by Eran Sandler]

See also:

]]> http://www.webmonkey.com/2008/11/go_go_gadget_oauth_support/feed/ 0 Yahoo Improves Its OpenID Support http://www.webmonkey.com/2008/11/yahoo_improves_its_openid_support/ http://www.webmonkey.com/2008/11/yahoo_improves_its_openid_support/#comments Fri, 21 Nov 2008 00:46:20 +0000 Adam Duvander http://www.webmonkey.com/blog/yahooimprovesitsopenidsupport Yahoo continues to make strides to improve its OpenID implementation. Thursday it announced limited testing for Simple Registration, which supplies profile data once a user logs in with their Yahoo OpenID. Currently it is only testing Plaxo and Jyte.

OpenID sign in screen at Jyte

The experience logging in with Jyte is remarkable. It only takes a few clicks and I’m started using the site. It receives my preferred nickname from Yahoo, so I’m not even asked to fill in anything else.

Plaxo, on the other hand, requires a process that feels like signing up. Requiring info after signing in with OpenID makes moot one of the best things about OpenID for website owners. You can lower the barrier to entry for users by letting them use the site as soon as they arrive from their provider.

To that end, Simple Registration should be able to help solve the double signup issue, assuming sites treat the process like Jyte and not like Plaxo. Other OpenID providers have been sharing user’s profile information, with permission, for some time.

This part of OpenID is important, and it’s good to see one of the big boys on board. Still, it’ll be hard to say OpenID has really made it until I can sign on to Yahoo with any OpenID.

See also:

]]> http://www.webmonkey.com/2008/11/yahoo_improves_its_openid_support/feed/ 0