I'm wondering if it is possible to create a GMap component in primefaces which use custom tiles to render the map. I know how to do it in pure javascript (http://econym.org.uk/gmap/example_custommap1.htm):
var map = new GMap(document.getElementById("map"));
map.addControl(new GScaleControl());
var copyright = new GCopyright(1,new GLatLngBounds(new GLatLng(53.8136257,-3.0981445),new GLatLng(53.8654855,-2.9663944) ),14, "Ordnance Survey");
var copyrightCollection = new GCopyrightCollection('Map Data:');
copyrightCollection.addCopyright(copyright);
CustomGetTileUrl=function(a,b){
return "tiles/"+a.x+"_"+a.y+".jpg"
}
var tilelayers = [new GTileLayer(copyrightCollection,14,14)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
var custommap = new GMapType(tilelayers, new GMercatorProjection(15), "Old OS");
map.addMapType(custommap);
map.setCenter(new GLatLng(53.852,-3.038), 14, custommap);
But I have no idea how to do it in primefaces.
If it is not possible, do you know maybe how the GMap component should be modified by javascript to replace getTileUrl?
As Duncan noticed the code above is v2 (my original code is v3, but is really messy, so I took the first working snippet from Internet without checking the version...), the full v3 code should look like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions= {
center : new google.maps.LatLng(0,0),
rotateControl : true,
panControl : true,
zoom : 2,
streetViewControl : false,
mapTypeControlOptions : {
mapTypeIds : ['cv0']
}
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var option = {
getTileUrl : function(coord, zoom) {
var tileRange = 15;
if (coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange) {
return null;
}
var addr = "../map_images/new7778069575062411171/5/" + coord.x + "," + coord.y + ".PNG";
return addr;
},
tileSize : new google.maps.Size(256,256),
maxZoom : 2,
minZoom : 2,
name : "title"
};
map.mapTypes.set('cv0', new google.maps.ImageMapType(option));
map.setMapTypeId('cv0');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
And here is the full working code that I was looking for:
<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function test(){
var zzz = gmtls.getMap();
var option = {
getTileUrl : function(coord, zoom) {
var tileRange = 15;
if (coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange) {
return null;
}
var addr = "../map_images/new7778069575062411171/5/" + coord.x + "," + coord.y + ".PNG";
return addr;
},
tileSize : new google.maps.Size(256,256),
maxZoom : 2,
minZoom : 2,
radius : 360,
name : "title"
};
cvMapType = new google.maps.ImageMapType(option);
zzz.mapTypes.set('cv0', cvMapType);
zzz.setMapTypeId('cv0');
}
//]]>
</script>
</h:head>
<h:body onload="test();">
<center>
<h:form>
<p:gmap widgetVar="gmtls" center="41.381542, 2.122893" zoom="15" type="hybrid"
style="width:600px;height:400px" />
</h:form>
</center>
</h:body>