Note that there are some explanatory texts on larger screens.

plurals
  1. POcustom tiles in primefaces GMap component
    primarykey
    data
    text
    <p>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 (<a href="http://econym.org.uk/gmap/example_custommap1.htm" rel="nofollow">http://econym.org.uk/gmap/example_custommap1.htm</a>):</p> <pre><code>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); </code></pre> <p>But I have no idea how to do it in primefaces.</p> <p>If it is not possible, do you know maybe how the GMap component should be modified by javascript to replace getTileUrl?</p> <h2>Edit</h2> <p>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:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;style type="text/css"&gt; html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } &lt;/style&gt; &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; 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 &lt; 0 || coord.y &gt;= tileRange || coord.x &lt; 0 || coord.x &gt;= 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); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map-canvas"/&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload