This updates the legacy phpVMS install to use Leaflet mapping library to replace the Google Maps integration. Using Leaflet, the base maps is interchangeable, the default setup uses the OpenStreetMap "Mapnik" style base layer. This can be changed (see the changes for MAP_TYPE below). I recommend reading through the entire pull request just to familiarize yourself with the changes.
When viewing the diffs below, red are the lines to delete, and green would be to add.
Download the phpvms_v2 repository zip file into a new folder, and copy the following files and place them in the same path on your site:
lib/js/leafletlib/js/base_map.jslib/js/acarsmap.js(if you've made changes to this file, backport them if needed)
Place it before before the </head> tag in your skin (default is /lib/skins/crystal/layout.tpl). If you're using a different skin, then update the same files in that skin. If you have .php files instead of .tpl, then also update those respective files.
<link rel="stylesheet" href="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.css" />
<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.js"></script>
<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet-providers.js"></script>
<script src="<?php echo SITE_URL?>/lib/js/leaflet/Leaflet.Geodesic.js"></script>In your core/app.config.php and core/local.config.php, replace the following:
The base map can be customized and changed out to different providers.
Find:
Config::Set('MAP_TYPE', 'G_PHYSICAL_MAP');and replace with:
Config::Set('MAP_TYPE', 'OpenStreetMap.Mapnik');You can also change OpenStreetMap.Mapnik to a different basemap. Those options can be found here:
http://leaflet-extras.github.io/leaflet-providers/preview
To use a base map that requires an API key, see the notes in libs/js/base_map.js.
The scaling for zoom is different between Google Maps and the Leaflet zoom system. Find:
Config::Set('MAP_ZOOM_LEVEL', 12);and replace with:
Config::Set('MAP_ZOOM_LEVEL', 5);Follow the instructions here, red are lines to remove, green are lines to add. Dark green are changes to lines.
Note: it's probably best to just overwrite the entire file, and then copy any of your changes back into it. Otherwise, the diffs are located here:
View the changes for acarsmap.tpl
Note: it's probably best to just overwrite the entire file, and then copy any of your changes back into it. Otherwise, the diffs are located here:
View the changes for route_map.tpl
Damn you, Google.
I hava a question. I got the new map in the crystal skin and it works fine for me. But if i switch to the crewcenter skin, there is just a white window where the map should be. I think it´s the layout data of the crew center skin. Could you explain to me, where in this data i have to fill in the following:
+<script src="/lib/js/leaflet/leaflet.js"></script> +<script src="/lib/js/leaflet/leaflet-providers.js"></script> +<script src="/lib/js/leaflet/Leaflet.Geodesic.js"></script>Thank you.