Working with Google Maps, Stamen Tiles (existing tile library) and Require.js?

Question

I'm trying to write a module to load the Stamen tile map in the Require.js section, but I'm not sure how to best use it with Require.

If you have not seen Stamen cards, their site is on Open Cards .

This is the code for the map view, view.js

define([ 'jquery', 'underscore', 'backbone', 'maps', 'text!templates/map/view.html' ], function($, _, Backbone, maps, mapTemplate){ var mapView = Backbone.View.extend({ el: $(".map"), displayMap: function() { this.options = { center: new maps.LatLng(-37.8, 144.9), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; this.render(); }, render: function(){ var compiledTemplate = _.template(mapTemplate); var $el = $(this.el); $el.html(compiledTemplate); this.map = new maps.Map($el.find('.map').get(0), this.options); } }); return new mapView; }); 

I load the map API of the following modules:

map.js

 define(['google!maps/3/sensor=false'], function() { return google.maps; }); 

Who has a google.js dependency

 define(['http://www.google.com/jsapi?key=THE_API_KEY&callback=define'], { load: function( name, req, load, config ) { if (config.isBuild) { onLoad(null); } else { var request = name.split('/'); google.load(request[0], request[1], { callback: load, language: 'en', other_params: ((typeof request[2] === 'string')?request[2]:'') }); } } }); 

The problem is that the Stamen map layers directly display an instance of Google Maps. Here you can see the implementation of the excavation cards: http://maps.stamen.com/js/tile.stamen.js?v1.1.1

 google.maps.StamenMapType = function(name) { //Implementation } 

It seems to be relying on the google.maps global object, from where I believe the problem is coming from.

I'm not sure how best to rewrite the Stamen plugin to be require.js friendly, or if I need it, and I really really like to use it. If I don’t take Google Maps and pop out of Require.js and load them normally (for example, I do it with Modernizr), but I would prefer to try and do it using the Require.js method. If there is such a thing.

Any advice or advice would be highly appreciated.

Answer 1

I am responsible for tile.stamen.js. Sorry for the headache.

The problem is that our script needs access to the Google Maps namespace ( google.maps ) so that it can create the StamenMapType class and inherit it from Google ImageMapType . If you absolutely need to use RequireJS (which I would not suggest, precisely because it makes simple things like this inconvenient), you will need to rewrite the entire part of tile.stamen.js related to Google (lines 155-177) to look something like So:

 exports.makeStamenMapType = function(name, gmaps) { if (!gmaps) gmaps = google.maps; var provider = getProvider(name); return new gmaps.ImageMapType({ "getTileUrl": function(coord, zoom) { var index = (zoom + coord.x + coord.y) % SUBDOMAINS.length; return [ provider.url .replace("{S}", SUBDOMAINS[index]) .replace("{Z}", zoom) .replace("{X}", coord.x) .replace("{Y}", coord.y) ]; }, "tileSize": new gmaps.Size(256, 256), "name": name, "minZoom": provider.minZoom, "maxZoom": provider.maxZoom }); }; 

Then you will use:

 var toner = makeStamenMapType("toner", gmaps); 

where gmaps is your required Google Maps API object.