StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I spend the last evening on this problem, and I finally found the solution to my problem.</p> <p>It was not so difficult.</p> <p>The idea is, as Chris B. said, to load the SVG file with GDownloadUrl, parse it with GXml.parse() and add in the DOM tree every SVG elements I need</p> <p>To simplify, I have supposed that all the SVG elements was put in a big group called "mainGroup". I have also supposed that some elements can be in the file.</p> <p>So here is the library, based on the <a href="http://code.google.com/intl/fr-FR/apis/maps/documentation/overlays.html#Custom_Overlays" rel="noreferrer">Google Maps Custom Overlays</a>:</p> <pre><code>// create the object function overlaySVG( svgUrl, bounds) { this.svgUrl_ = svgUrl; this.bounds_ = bounds; } // prototype overlaySVG.prototype = new GOverlay(); // initialize overlaySVG.prototype.initialize = function( map) { //create new div node var svgDiv = document.createElement("div"); svgDiv.setAttribute( "id", "svgDivison"); //svgDiv.setAttribute( "style", "position:absolute"); svgDiv.style.position = "absolute"; svgDiv.style.top = 0; svgDiv.style.left = 0; svgDiv.style.height = 0; svgDiv.style.width = 0; map.getPane(G_MAP_MAP_PANE).appendChild(svgDiv); // create new svg element and set attributes var svgRoot = document.createElementNS( "http://www.w3.org/2000/svg", "svg"); svgRoot.setAttribute( "id", "svgRoot"); svgRoot.setAttribute( "width", "100%"); svgRoot.setAttribute( "height","100%"); svgDiv.appendChild( svgRoot); // load the SVG file GDownloadUrl( this.svgUrl_, function( data, responseCode) { var xml = GXml.parse(data); // specify the svg attributes svgRoot.setAttribute("viewBox", xml.documentElement.getAttribute("viewBox")); // append the defs var def = xml.documentElement.getElementsByTagName("defs"); //for( var int=0; i<def.length; i++) svgRoot.appendChild(def[0].cloneNode(true)); //append the main group var nodes = xml.documentElement.getElementsByTagName("g"); for (var i = 0; i < nodes.length; i++) if (nodes[i].id=="mainGroup") svgRoot.appendChild(nodes[i].cloneNode(true)); }); // keep interesting datas this.svgDiv_ = svgDiv; this.map_ = map; // set position and zoom this.redraw(true); } // remove from the map pane overlaySVG.prototype.remove = function() { this.div_.parentNode.removeChild( this.div_); } // Copy our data to a new overlaySVG... overlaySVG.prototype.copy = function() { return new overlaySVG( this.url_, this.bounds_, this.center_); } // Redraw based on the current projection and zoom level... overlaySVG.prototype.redraw = function( force) { // We only need to redraw if the coordinate system has changed if (!force) return; // get the position in pixels of the bound posNE = map.fromLatLngToDivPixel(this.bounds_.getNorthEast()); posSW = map.fromLatLngToDivPixel(this.bounds_.getSouthWest()); // compute the absolute position (in pixels) of the div ... this.svgDiv_.style.left = Math.min(posNE.x,posSW.x) + "px"; this.svgDiv_.style.top = Math.min(posSW.y,posNE.y) + "px"; // ... and its size this.svgDiv_.style.width = Math.abs(posSW.x - posNE.x) + "px"; this.svgDiv_.style.height = Math.abs(posSW.y - posNE.y) + "px"; } </code></pre> <p>And, you can use it with the following code:</p> <pre><code>if (GBrowserIsCompatible()) { //load map map = new GMap2(document.getElementById("map"), G_NORMAL_MAP); // create overlay var boundaries = new GLatLngBounds( new GLatLng(48.2831, 1.9675), new GLatLng(49.1872, 2.7774)); map.addOverlay( new overlaySVG( "test.svg", boundaries )); //add control and set map center map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(48.8, 2.4), 12); } </code></pre> <p>So, you can use it exactly as you use the <code>GGroundOverlay</code> function, except that your SVG file should be created with the Mercator projection (but if you apply it on small area, like one city or smaller, you will not see the difference).</p> <p>This should work with Safari, Firefox and Opera. You can try my small example <a href="http://docmatic.fr/temp/test.html" rel="noreferrer">here</a></p> <p>Tell me what do you think about it.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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