Setting custom maps
Here is what I come up with:
var MyBaseMap = {
getTileUrl: function(coord, zoom) {
return "Maps/Base/" +
+ zoom + "/" + coord.x + "/" + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 7,
minZoom: 0,
name: 'Map',
credit: 'Westeros.org'
};
//Create Layers
var mapLayers = {};
// set up the map types
mapLayers['Terrain'] = {
getTileUrl: function(coord, zoom) {
return "Maps/Terrain/" +
+ zoom + "/" + coord.x + "/" + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 7,
minZoom: 0,
name: 'Terrain',
credit: 'Westeros.org'
};
mapLayers['Lables'] = {
getTileUrl: function(coord, zoom) {
return "Maps/Lables/" +
+ zoom + "/" + coord.x + "/" + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 7,
name: 'Lables',
credit: 'Westeros.org'
};
//Init
var map;
function initialize() {
var MY_BASEMAP_ID = 'IceAndFire';
// Attach the coordinate map type to the map's registry.
map.mapTypes.set(MY_BASEMAP_ID, MyBaseMap);
// Modify the control to only display our custom map type.
var options = {
zoom: 6,
mapTypeControlOptions: {
mapTypeIds: [MY_BASEMAP_ID]
}
};
// Create our map.
map = new google.maps.Map(document.getElementById("map_canvas"),
options);
// Set the map to use the 'coordinate' map type.
map.setMapTypeId(MY_BASEMAP_ID);
// push all mapLayers keys in to a mapTypeId array to set in the mapTypeControlOptions
for (var key in mapLayers) {
map.overlayMapTypes.insert(key);
}
}
It suppose to be very basic, only create a new tile basemap and few layers(two at the moment), all using 256x256 with 0-7 zoom levels.(I am kind of limited in my ability to test it, so I am not sure if it even works).
Any help with this basic functionality or how/where do I corporate it into our Mediawiki with the Maps extension will be very appreciated( googleearth.js at includes\services\GoogleMaps3\earth\ seems like a likely candidate)
I just found the layers demo page, any chance I can use anything there to setup my tile maps, maybe something like this line of code from there:
$egMapsOLAvailableLayers['german-layer'] = array('OpenLayers.Layer.OSM("Öpnv Deutschland", "http://tile.xn--pnvkarte-m4a.de/tilegen/${z}/${x}/${y}.png", {numZoomLevels: 19,buffer:0})');
Here is the relevant part of my code, that I am using to run the tests locally:
// Add Base map.
layer = new OpenLayers.Layer.TMS("Base Map","",
{ url: '', serviceVersion: '.', layername: 'base', alpha: false,
type: 'jpg', isBaseLayer: true, getURL: getTileURL
});
map.addLayer(layer);
// Add Layers.
layer = new OpenLayers.Layer.TMS("Terrain","",
{ url: '', serviceVersion: '.', layername: 'terrain', alpha: false,
type: 'png', isBaseLayer: false, getURL: getTileURL
});
map.addLayer(layer);
layer = new OpenLayers.Layer.TMS("Lables","",
{ url: '', serviceVersion: '.', layername: 'lables', alpha: false,
type: 'png', isBaseLayer: false, getURL: getTileURL
});
map.addLayer(layer);
function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
var z = this.map.getZoom();
if (x >= 0 && y >= 0) {
return this.url + "tiles/" + this.layername + "/" + z + "/" + x + "/" + y + "." + this.type;
} else {
return "http://www.maptiler.org/img/none.png";
}
}
Note, that I am using TMS layers, not OSM layers.
EDIT: I dont know maybe something like this?
$egMapsOLAvailableLayers['Base map'] = array('OpenLayers.Layer.TMS("Base Map","",
{ url: '', serviceVersion: '.', layername: 'base', alpha: false,
type: 'jpg', isBaseLayer: true, getURL: getTileURL
})');
$egMapsOLAvailableLayers['Terrain'] = array('OpenLayers.Layer.TMS("Terrain","",
{ url: '', serviceVersion: '.', layername: 'terrain', alpha: false,
type: 'png', isBaseLayer: false, getURL: getTileURL
})');
$egMapsOLAvailableLayers['Lables'] = array('OpenLayers.Layer.TMS("Lables","",
{ url: '', serviceVersion: '.', layername: 'lables', alpha: false,
type: 'png', isBaseLayer: false, getURL: getTileURL
})');
$egMapsOLLayerGroups['Map'] = array('Base map', 'Terrain', 'Lables');
$egMapsOLLayerDependencies['Map'] = "<script>function getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
var z = this.map.getZoom();
if (x >= 0 && y >= 0) {
return this.url + "tiles/" + this.layername + "/" + z + "/" + x + "/" + y + "." + this.type;
} else {
return "http://www.maptiler.org/img/none.png";
}</script>");
some help will be greatly appreciated.
Alternatively maybe I can adapt 'Maps_ImageLayer.php' to take one more parameter and call 'new OpenLayers.Layer.TMS' or change 'OpenStreetMap.js' instead?
The extension arthur did an amazing job, it seem to have everything I need. However in many places the the documentation is not uptodate with his code, so without being able to test this, I am stuck here.
So what error(s) are you getting? I don't see anything wrong, but then again, I'm not that familiar with OpenLayers myself and had to look at the docs when implementing this, and it's been a while since I looked at the custom layer functionality. In fact I'm not completely sure it's working properly in Maps 1.0 and later.
