User Tools

Site Tools


Sidebar

jtrackgallery.net
J!TrackGallery J!2.5 demo J!TrackGallery forum J!TrackGallery GitHub







manual:maps:addnewmap

Add my map

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.

How to add a map

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.

Testing before adding

Adding a new map may be tricky. We recommand to first test your map in this simple way:

  • Browse any track
  • In your browser, save the webpage to some test_map.html, inside the joomla root folder
  • Browse the created test_map.html you just created.
  • modify the test_map.html code (add script, add openlayer map declaration, add additional code when needed
  • When working, use these settings tto create the new map in J!TrackGellary back-end

Maps parameters

Each map (layer) is described by parameter defined in the backend:

  • Name : a name for this lmayer that can be a language key.
  • OL parameter : a portion of the line of code needed for Openlayers javascript code map declaration (not the full line of code)
  • script : an optional URL used to load required external script
  • code : additionnal optionnal javascript local code (typically an API key for example

Example of map parameters and corresponding code rendering is given below.

A list of maps and corresponding parameters are given in the following pages:

OL parameter explained

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.

stringexplanation
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: falseWhen set to false, the corresponding layer is an overlay\\When set to true it's a map layer
visibility: falseSetting visibility to false for an overlay; this one is not hidden by default. The user can activate the overlay when browsing the map.

Other examples

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

Sample datas generated code

<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);
manual/maps/addnewmap.txt · Last modified: 2015/09/06 21:47 by cseguinot