Permalink
Browse files

add osm to mapnificent as maptype and starting map style as option

  • Loading branch information...
1 parent c249fd5 commit 1c471d6f2c2ca014cb4d45d76c97c64bf02cb8e3 @stefanw committed Aug 8, 2010
Showing with 32 additions and 11 deletions.
  1. +1 −1 index.html
  2. +4 −3 london.html
  3. +27 −7 media/js/mapnificent.js
View
@@ -54,7 +54,7 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
<div id="map"></div>
<div id="controls" class="controlsoverlay"></div>
<div id="message" class="shortoverlay" style="display:none"></div>
- <script src="media/js/mapnificent.js?version=0-93" type="text/javascript" charset="utf-8"></script>
+ <script src="media/js/mapnificent.js?version=0-95" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// if($.cookie("seenVideo") == null){
// $("#video").show();
View
@@ -66,7 +66,7 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
<div id="map"></div>
<div id="controls" class="controlsoverlay"></div>
<div id="message" class="shortoverlay" style="display:none"></div>
- <script src="media/js/mapnificent.js?version=0-91" type="text/javascript" charset="utf-8"></script>
+ <script src="media/js/mapnificent.js?version=0-95" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// if($.cookie("seenVideo") == null){
// $("#video").show();
@@ -84,13 +84,14 @@ <h2 class="center">It's <img style="vertical-align:middle;margin:10px 0 0;" src=
, "colorMaxGradientColor" : 120
, "estimatedMaxCalculateCalls": 700000
}
- },
+ },
"mapStyles": {"Night": [
{
"featureType": "all",
"rules": [{"invert_lightness": "true"}]
}
- ]}
+ ]},
+ "startMapStyle": "Night"
});
mapnificent.addLayer("urbanDistance");
View
@@ -7,6 +7,19 @@
*/
var Mapnificent = (function(){
+
+ var getOSMMapType = function(){
+ return new google.maps.ImageMapType({
+ getTileUrl: function(coord, zoom) {
+ return 'http://tile.openstreetmap.org/'+ zoom +'/'+ coord.x +'/' + coord.y +'.png';
+ },
+ tileSize: new google.maps.Size(256, 256),
+ isPng: true,
+ maxZoom: 18,
+ name: "OSM"
+ });
+ };
+
var CanvasOverlay = (function() {
/* Most of this is from:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
@@ -132,6 +145,9 @@ var Mapnificent = (function(){
defaults.northwest = {"lat":52.754364, "lng":12.882953};
defaults.southeast = {"lat":52.29693, "lng":13.908883};
defaults.mapStyles = {};
+ defaults.startMapStyle = null;
+ defaults.mapTypes = {"OSM": getOSMMapType()};
+ defaults.startMapType = google.maps.MapTypeId.ROADMAP;
defaults.mapTypeIds = [google.maps.MapTypeId.ROADMAP];
defaults.heightCacheFactor = 3;
defaults.widthCacheFactor = 5;
@@ -191,16 +207,18 @@ var Mapnificent = (function(){
that.env.heightInKm = that.getDistanceInKm(that.env.northwest, that.env.southwest);
jQuery("#"+that.mapID).height(jQuery(window).height());
that.env.getGMapOptions();
- var lastStyle = google.maps.MapTypeId.ROADMAP;
for(var style in that.env.mapStyles){
that.env.mapTypeIds.push(style);
- lastStyle = style;
}
+ for(var type in that.env.mapTypes){
+ that.env.mapTypeIds.push(type);
+ }
+
var mapOptions = {
"zoom": that.env.mapStartZoom
, "center": new google.maps.LatLng(that.env.mapStartCenter.lat, that.env.mapStartCenter.lng)
- , "mapTypeId": lastStyle
+ , "mapTypeId": that.env.startMapType
, "mapTypeControlOptions": {
"mapTypeIds": that.env.mapTypeIds
}
@@ -210,10 +228,12 @@ var Mapnificent = (function(){
var styledMapType = new google.maps.StyledMapType(that.env.mapStyles[style], {name: style});
that.map.mapTypes.set(style, styledMapType);
}
- // that.map.setCenter(new google.maps.LatLng(that.env.mapStartCenter.lat, that.env.mapStartCenter.lng), that.env.mapStartZoom);
- //that.map.enableScrollWheelZoom();
- // that.map.addControl(new GLargeMapControl());
- // that.map.addControl(new GMapTypeControl());
+ for(var type in that.env.mapTypes){
+ that.map.mapTypes.set(type, that.env.mapTypes[type]);
+ }
+ if(that.env.startMapStyle){
+ that.map.setMapTypeId(that.env.startMapStyle);
+ }
if(that.env.getGMapOptions()["googleBarOptions"] !== "undefined"){
// that.map.enableGoogleBar();
}

0 comments on commit 1c471d6

Please sign in to comment.