Important: When modifying or adding a map in back-end, you may easily enter erroneous code.In that case, J!TrackGallery tracks are no longer rendered, a javascript error may be displayed instead.
Go to admin page for J!TrackGallery. Add your maps and test.
If map is no longer displayed, you have probably entered erroneous code leading to a javascript error. Remove the erroneous map to recover normal behaviour.
Adding a new map may be tricky. We recommand to first test your map in this simple way:
Each map (layer) is described by parameter defined in the backend:
Example of map parameters and corresponding code rendering is given below.
A list of maps and corresponding parameters are given in the following pages:
This example is for Hike and Bike Hillshade overlay.
OpenLayers.Layer.XYZ("{name}", "http://a.tiles.wmflabs.org/hillshading/${z}/${x}/${y}.png",{displayOutsideMaxExtent: true, isBaseLayer: false, visibility: false, attribution: "Hillshading: SRTM3 v2 (<a href=http://www2.jpl.nasa.gov/srtm/>NASA</a>)" , transitionEffect: "resize" })
Here are some explanation for proper configuration of layers.
string | explanation |
---|---|
OpenLayers.Layer.XYZ(“{name}“ | {name} will be replaced by the name parameter saved with this map. the string name can be a language key. You can replace ”{name}“ by any string such as “OpenStrreet Map” |
isBaseLayer: false | When set to false, the corresponding layer is an overlay\\When set to true it's a map layer |
visibility: false | Setting visibility to false for an overlay; this one is not hidden by default. The user can activate the overlay when browsing the map. |
Google Map Physical | |
---|---|
OL code | OpenLayers.Layer.Google("{name}", {type: google.maps.MapTypeId.TERRAIN} ) |
script | http://maps.google.com/maps/api/js?v=3&sensor=false |
Bing Aerial | |
---|---|
OL code | OpenLayers.Layer.Google("{name}", {type: google.maps.MapTypeId.TERRAIN} ) |
code | var BingApiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf"; |
(*) Bing API key is no longer required but optionnal
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>|
// <!-- parseOLLayer BEGIN --> layercomjtgmapmapnik = new OpenLayers.Layer.OSM.Mapnik("OSM Mapnik"); olmap.addLayer(layercomjtgmapmapnik); layercomjtgmaposmhikeandbike = new OpenLayers.Layer.TMS("OSM Hike and Bike", "http://toolserver.org/tiles/hikebike/", { type: "png", getURL: osm_getTileURL, displayOutsideMaxExtent: true, isBaseLayer: true, attribution: "Map Data © OpenStreetMap contributors", transitionEffect: "resize" }); olmap.addLayer(layercomjtgmaposmhikeandbike); layercomjtgmapcyclemap = new OpenLayers.Layer.OSM.CycleMap("OSM CycleMap"); olmap.addLayer(layercomjtgmapcyclemap); layercomjtgmapgooglesat = new OpenLayers.Layer.Google( "Google Satellite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}); olmap.addLayer(layercomjtgmapgooglesat); layercomjtgmapgooglestreet = new OpenLayers.Layer.Google( "Google Street", {numZoomLevels: 20}); olmap.addLayer(layercomjtgmapgooglestreet); layercomjtgmapgooglehybrid = new OpenLayers.Layer.Google( "Google Hybride", {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}); olmap.addLayer(layercomjtgmapgooglehybrid); layercomjtgmapgooglephysical = new OpenLayers.Layer.Google("Google Physical", {type: google.maps.MapTypeId.TERRAIN} ); olmap.addLayer(layercomjtgmapgooglephysical); var BingApiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf"; layercomjtgmapbingaerial = new OpenLayers.Layer.Bing({ name: "Bing Aerial", key: BingApiKey, type: "Aerial", wrapDateLine: true }); olmap.addLayer(layercomjtgmapbingaerial);