Huge changes: Using OpenLayers with Google Maps v3 instead of direct Google Maps v2.

git-svn-id: http://www.winterrodeln.org/svn/servermediawiki/trunk/extensions/wrmap@1225 7aebc617-e5e2-0310-91dc-80fb5f6d2477

diff --git a/wrmap.body.php b/wrmap.body.php
index 95e88aed485ea56653df2abfe7f7c2b6f5646a8b..e71b1eacaf81d8ba34c97565e0d714546339733c 100644 (file)
--- a/wrmap.body.php
+++ b/wrmap.body.php
@@ -1,143 +1,44 @@
 <?php
 
 <?php
 

-function wrMapParserFirstCallInit() {
-       global $wgParser;
-       global $wgGoogleMapsKey;
-       $wrGoogleMaps = new WrGoogleMaps($wgGoogleMapsKey);
-       $wgParser->setHook('wrgmap', array($wrGoogleMaps, 'render'));
-       return true;
-}
-
-
-
-// Java script
-// -----------
-
-// Global JavaScript functions
-define('WRGMAPJSFUNCTIONS', <<<JAVASCRIPT
-<script type="text/javascript">
-//<![CDATA[
-var wrSleddingIcon = new GIcon(G_DEFAULT_ICON);
-wrSleddingIcon.image = "/vorlagen/gmap_rodelbahn_c.png";
-wrSleddingIcon.shadow = "/vorlagen/gmap_rodelbahn_c_s.png";
-wrSleddingIcon.iconSize = new GSize(17, 17);
-wrSleddingIcon.shadowSize = new GSize(23, 23);
-wrSleddingIcon.iconAnchor = new GPoint(9, 9);
-wrSleddingIcon.infoWindowAnchor = new GPoint(9, 9);
-
-
-function wrCreateMarker(latitude, longitude, name, icon) {
-       var point = new GLatLng(latitude, longitude);
-       var marker = new GMarker(point, icon);
-       var articlePath = "$wgArticlePath";
-       var p = articlePath.replace("\$1", name.replace(' ', '_'));
-       GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("<strong><a href='" + p + "'>" + name+ "</a></strong>");});
-       return marker;
-}
-//]]>
-</script>
-JAVASCRIPT
-);
-
-
-/** This class was inpired by the GoogleMaps class of the GoogleMaps extension. */
-class WrGoogleMaps {
-       /// the Google API key (obtained from
-       /// http://www.google.com/apis/maps/signup.html)
-       private $apiKey = null;
-       
-       /// How many <wrgmap> tags are on the current page?
-       private $mapsCount = 0;
-       
-       /// Constructor
-       function WrGoogleMaps($apiKey) {
-               $this->apiKey = $apiKey;
-       }
-       
+class WrMap {

        /// Renders the <wrgmap> tag
        /// @param $content string - the content of the <wrgmap> tag
        /// @param $args array - the array of attribute name/value pairs for the tag
        /// @param $parser Parser - the MW Parser object for the current page
        ///
        /// @return string - the html for rendering the map
        /// Renders the <wrgmap> tag
        /// @param $content string - the content of the <wrgmap> tag
        /// @param $args array - the array of attribute name/value pairs for the tag
        /// @param $parser Parser - the MW Parser object for the current page
        ///
        /// @return string - the html for rendering the map

-       function render($content, $args, $parser) {
-               ++$this->mapsCount;
-               
-               // Decode data
+       public static function render($content, $args, $parser, $frame) {
+               // Get center and zoom level from $args

                if (isset($args['lat'])) $latitude = floatval($args['lat']); else $latitude = 47.267648;   // latitude as float value
                if (isset($args['lon'])) $longitude = floatval($args['lon']); else $longitude = 11.404655; // longitude as float value
                if (isset($args['zoom'])) $zoom = intval($args['zoom']); else $zoom = 10; // Google Zoom Level
                if (isset($args['lat'])) $latitude = floatval($args['lat']); else $latitude = 47.267648;   // latitude as float value
                if (isset($args['lon'])) $longitude = floatval($args['lon']); else $longitude = 11.404655; // longitude as float value
                if (isset($args['zoom'])) $zoom = intval($args['zoom']); else $zoom = 10; // Google Zoom Level

-               $staticSizeX = 600;
-               $staticSizeY = 450;

                $latitude_s = sprintf('%.6F', $latitude);
                $longitude_s = sprintf('%.6F', $longitude);
 
                // Query database
                $dbr = wfGetDB(DB_SLAVE);
                $res = $dbr->select('wrsledruncache', array('page_title', 'position_latitude', 'position_longitude'), array('show_in_overview', 'not under_construction'));
                $latitude_s = sprintf('%.6F', $latitude);
                $longitude_s = sprintf('%.6F', $longitude);
 
                // Query database
                $dbr = wfGetDB(DB_SLAVE);
                $res = $dbr->select('wrsledruncache', array('page_title', 'position_latitude', 'position_longitude'), array('show_in_overview', 'not under_construction'));

-               $sleddingRoutes = array();
-               while ($sleddingRoute = $dbr->fetchRow($res)) $sleddingRoutes[] = $sleddingRoute;
+               $sledruns = array();
+               while ($sledrun = $dbr->fetchRow($res)) $sledruns[] = $sledrun;

                $dbr->freeResult($res);
                
                $dbr->freeResult($res);
                

-               // Load Google Maps Script and define functions
-               $output = '';
-               if ($this->mapsCount == 1) {
-                       $output .= '<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=' . htmlspecialchars($this->apiKey) . '" type="text/javascript"></script>' . "\n";
-                       $output .= WRGMAPJSFUNCTIONS;
-               }
-                       
-               // Create static map image link
-               $staticLink = "http://maps.google.com/staticmap?center=$latitude_s,$longitude_s&zoom=$zoom&size=${staticSizeX}x$staticSizeY&key=$this->apiKey";
-               $staticMarkers = array();
-               foreach ($sleddingRoutes as $s) {
-                       $lat = $s['position_latitude'];  // this is a string
-                       $lon = $s['position_longitude']; // this is a string
-                       $staticMarkers[] = sprintf('%s,%s,bluer', $lat, $lon);
-               }
-               if (count($staticMarkers) > 0) $staticLink .= '&markers=' . implode('|', $staticMarkers);
-
-               // Create <div/> element where the map is placed in
-               $mapName = 'wrgmap' . $this->mapsCount;
-               $output .= '<div id="' . $mapName . '" style="width: 100%; height: 450px; border-style:none; display:none;"></div>';
+               $parserOutput = $parser->getOutput();
+               $parserOutput->addHeadItem('<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.8&amp;sensor=false"></script>', 'googlemaps');
+               $parserOutput->addModules('ext.wrmap');

                
                

-               // Return output
-               $output .= '<script type="text/javascript">' . "\n//<![CDATA[\n";
-               $output .= 'if (GBrowserIsCompatible()) {' . "\n";
-               $output .= "\tdocument.getElementById(\"$mapName\").style.display = \"block\";\n";
-               $output .= $this->addMap($mapName, $latitude, $longitude, $zoom);
-               foreach ($sleddingRoutes as $s) {
-                       $lat = $s['position_latitude'];
-                       $lon = $s['position_longitude'];
-                       $pageTitle = $s['page_title'];
+               // Create <div/> element where the map is placed in
+               $output = "<div class=\"wrmap\" style=\"width: 100%; height: 450px; border-style:none;\" data-center-lon=\"$longitude_s\" data-center-lat=\"$latitude_s\" data-zoom=\"$zoom\">\n";
+               foreach ($sledruns as $sledrun) {
+                       $lat = $sledrun['position_latitude'];
+                       $lon = $sledrun['position_longitude'];

                        if (!$lat || !$lon) continue;
                        if (!$lat || !$lon) continue;

-                       $output .= $this->addJsMarker($lat, $lon, $pageTitle);
+                       $output .= "<p data-lon=\"$lon\" data-lat=\"$lat\" data-title=\"{$sledrun['page_title']}\" />\n";

                }
                }

-               $output .= "} else {\n"; // browser not compatible -> create static map
-               $output .= "\tdocument.write(\"<img alt=\\\"Landkarte mit Rodelbahnen\\\" src=\\\"" . htmlspecialchars($staticLink) . "\\\" width=\\\"$staticSizeX\\\" height=\\\"$staticSizeY\\\" />\");\n";
-               $output .= "}\n//]]>\n</script>\n";
-               $output .= '<noscript><img alt="Landkarte mit Rodelbahnen" src="' . htmlspecialchars($staticLink) . "\" width=\"$staticSizeX\" height=\"$staticSizeY\" /></noscript>\n";
-
-               return wrCommonReplaceByMarker($output, 'wrmap');
-       }
-       
-       // returns a string that creates a map object called 'map'
-       // $latitude, $longitude and $zoom have to be float/integer values.
-       private function addMap($mapName, $latitude, $longitude, $zoom) {
-               return "\tvar map = new GMap2(document.getElementById('$mapName'), {'mapTypes': [G_NORMAL_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP, G_SATELLITE_MAP]});\n" .
-               "\tmap.addControl(new GLargeMapControl());\n" .
-               "\tmap.addControl(new GMapTypeControl());\n" .
-               "\tmap.addControl(new GScaleControl());\n" .
-               sprintf("\tmap.setCenter(new GLatLng(%.6F, %.6F), %d);\n", $latitude, $longitude, $zoom) .
-               "\tmap.setMapType(G_PHYSICAL_MAP);\n";
-               // "\tmap.enableScrollWheelZoom();\n";
+               $output .= "</div>\n";
+               
+               return $output;

        }
 
        }
 

-       // returns a string with a add marker javascript call
-       // $latitude and $longitude are expected as string
-       private function addJsMarker($latitude, $longitude, $pageTitle) {
-               return "\tmap.addOverlay(wrCreateMarker($latitude, $longitude, \"" . htmlspecialchars(addslashes($pageTitle)) . "\", wrSleddingIcon));\n";
-       }
-       

 }
 
 
 }
 
 

diff --git a/wrmap.js b/wrmap.js
new file mode 100644 (file)
index 0000000..83daff9
--- /dev/null
+++ b/wrmap.js
@@ -0,0 +1,82 @@
+function init_wrmap(i, jq_map) {
+       jq_map = $(jq_map);
+       var jq_sledruns = jq_map.children();
+       jq_sledruns.detach();
+       
+    // Introduce EPSG:3857 as an alias of the built in EPSG:900913 projection (both are the "Google/OSM" projections)
+       var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat 
+       var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+
+       // Create the map
+    var map = new OpenLayers.Map(jq_map.context, {
+        projection: EPSG3857,
+        displayProjection: EPSG4326,
+        units: "m",
+               theme: null
+       });
+
+       // Google Layer
+       var layer_map = new OpenLayers.Layer.Google("Google Physical", {
+               type: google.maps.MapTypeId.TERRAIN
+       });
+
+    // Alternative: OSM map
+    // var layer_map = new OpenLayers.Layer.OSM({
+    //     maxExtent: new OpenLayers.Bounds(1050000, 5880000, 1850000, 6090000)});
+    
+    // Alternative: Microsoft Bing Maps
+    // var layer_map = new OpenLayers.Layer.Bing({
+    //     type: "Road",
+    //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
+       
+       // Sledrun layer
+       var layer_sledruns = new OpenLayers.Layer.Vector("Rodelbahnen", {
+               styleMap: new OpenLayers.StyleMap({
+                       "default": new OpenLayers.Style({
+                               externalGraphic: "/vorlagen/gmap_rodelbahn_c.png",
+                               graphicWidth: 17,
+                               graphicHeight: 17,
+                               graphicXOffset: 0,
+                               graphicYOffset: 0,
+                               graphicZIndex: 11,
+                               backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
+                               backgroundWidth: 23,
+                               backgroundHeight: 23,
+                               backgroundXOffset: 0,
+                               backgroundYOffset: 0,
+                               backgroundZIndex: 12,
+                               title: "${label}"
+                       }),
+                       "highlight": new OpenLayers.Style({
+                               label: "${label}"
+                       })
+
+               }),
+               rendererOptions: {yOrdering: true}
+       });
+       jq_sledruns.each(function(j, jq_sledrun) {
+               jq_sledrun = $(jq_sledrun);
+               var lon = parseFloat(jq_sledrun.attr('data-lon'));
+               var lat = parseFloat(jq_sledrun.attr('data-lat'));
+               var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
+               layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {label: jq_sledrun.attr('data-title')})]);
+       });
+
+       // Center map
+       map.addLayers([layer_map, layer_sledruns]);
+       var lon = parseFloat(jq_map.attr('data-center-lon'));
+       var lat = parseFloat(jq_map.attr('data-center-lat'));
+       var zoom = parseInt(jq_map.attr('data-zoom'));
+       map.setCenter(new OpenLayers.LonLat(lon, lat).transform(EPSG4326, map.getProjectionObject()), zoom);
+
+}
+
+
+function init_wrmaps() {
+       var jq_maps = $('.wrmap'); // all wrmap <div> elements
+       jq_maps.each(init_wrmap);
+}
+
+
+$(document).ready(init_wrmaps);
+

diff --git a/wrmap.php b/wrmap.php
index 2240e779748cce6d515974fcd4f566ffeda40cf8..2e9924b30c08d800f39b9e37d84a79906bc4c431 100644 (file)
--- a/wrmap.php
+++ b/wrmap.php
@@ -1,21 +1,50 @@
 <?php
 <?php

-// This extension depends on
-// - wrcommon
-// - wrgeo (for wrGeoStringToGeo)
+// This extension depends on no other extension.

 
 $wgExtensionCredits['parserhook'][] = array(
        'name' => 'Winterrodeln Map',
 
 $wgExtensionCredits['parserhook'][] = array(
        'name' => 'Winterrodeln Map',

-       'version' => '1.4.0',
+       'version' => '2.0.0',

        'author' =>'Philipp Spitzer', 
        'url' => 'http://www.winterrodeln.org/trac/wiki/WrMap', 
        'author' =>'Philipp Spitzer', 
        'url' => 'http://www.winterrodeln.org/trac/wiki/WrMap', 

-       'description' => 'This extension creates a map with GoogleMaps to show sledrun routes.'
+       'description' => 'This extension creates a map using OpenLayers to show sledruns.'

 );
 
 
 );
 
 

+
+$wgResourceModules['ext.wrmap'] = array(
+               'scripts' => array('openlayers/OpenLayers.js', 'wrmap.js'),
+        'styles' => 'openlayers/theme/default/style.css',
+ 
+        // When your module is loaded, these messages will be available through mw.msg()
+        //'messages' => array( 'myextension-hello-world', 'myextension-goodbye-world' ),
+ 
+        // If your scripts need code from other modules, list their identifiers as dependencies
+        // and ResourceLoader will make sure they're loaded before you.
+        // You don't need to manually list 'mediawiki' or 'jquery', which are always loaded.
+        //'dependencies' => array( 'jquery.ui.datepicker' ),
+ 
+        // You need to declare the base path of the file paths in 'scripts' and 'styles'
+        'localBasePath' => dirname( __FILE__ ),
+
+        // ... and the base from the browser as well. For extensions this is made easy,
+        // you can use the 'remoteExtPath' property to declare it relative to where the wiki
+        // has $wgExtensionAssetsPath configured:
+        'remoteExtPath' => 'wrmap',
+
+               'position' => 'top'
+);
+
+
+$wgAutoloadClasses['WrMap'] = dirname(__FILE__) . '/wrmap.body.php';
+
+

 $wgHooks['ParserFirstCallInit'][] = 'wrMapParserFirstCallInit';
 $wgHooks['ParserFirstCallInit'][] = 'wrMapParserFirstCallInit';

-$wgHooks['ParserAfterTidy'][] = 'wrCommonMarkerAfterTidy';

 
 
 
 

-require_once dirname(__FILE__) . '/wrmap.body.php';
+function wrMapParserFirstCallInit($parser) {
+       $parser->setHook('wrgmap', 'WrMap::render');
+       return true;
+}
+

 
 ?>
 
 ?>