Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here are some news (I hope it's better to put them here in an answer, instead of editing my questions or to create a new question. Please feel free to move it if needed, or to tell me, so as I can rectify):</p> <p>My problem was the following:</p> <pre><code>var oldmap = new GGroundOverlay("test.svg", boundaries); map.addOverlay(oldmap); </code></pre> <p>did not work on Safari 3, Firefox and Opera (IE is not enable to draw SVG).</p> <p>In fact, this code produce the insertion (in a <code>&lt;div&gt;</code>) of the following element</p> <pre><code>&lt;img src="test.svg" style="....."&gt; </code></pre> <p>And Safari 4 is able to draw a SVG file as an image, but this is not the way to do for the other browser. So the idea is now to create a custom overlay for the SVG, as explained <a href="http://code.google.com/intl/fr-FR/apis/maps/documentation/overlays.html#Custom_Overlays" rel="nofollow noreferrer">here</a>. </p> <p>That's the reason why I asked for <a href="https://stackoverflow.com/questions/1071328/how-to-produce-same-result-on-different-browsers-when-embedding-svg-file-in-html">this question</a> (I am sorry, but HTML/javascript are not my strongest points).</p> <p>And since there is a small bug with Webkit for rendering a SVG with transparent background with <code>&lt;object&gt;</code>element, I need to use <code>&lt;object&gt;</code> or <code>&lt;img&gt;</code> accordingly to the browser (I don't like this, but... for the moment, it's still the quick-and-dirty experiments)</p> <p>So I started with this code (still work in progress):</p> <pre><code>// create the object function myOverlay(SVGurl, bounds) { this.url_ = SVGurl; this.bounds_ = bounds; } // prototype myOverlay.prototype = new GOverlay(); // initialize myOverlay.prototype.initialize = function(map) { // create the div var div = document.createElement("div"); div.style.position = "absolute"; div.setAttribute('id',"SVGdiv"); div.setAttribute('width',"900px"); div.setAttribute('height',"900px"); // add it with the same z-index as the map this.map_ = map; this.div_ = div; //create new svg root element and set attributes var svgRoot; if (BrowserDetect.browser=='Safari') { // Bug in webkit: with &lt;objec&gt; element, Safari put a white background... :-( svgRoot = document.createElement("img"); svgRoot.setAttribute("id", "SVGelement"); svgRoot.setAttribute("type", "image/svg+xml"); svgRoot.setAttribute("style","width:900px;height:900px"); svgRoot.setAttribute("src", "test.svg"); } else //if (BrowserDetect.browser=='Firefox') { svgRoot = document.createElement("object"); svgRoot.setAttribute("id", "SVGelement"); svgRoot.setAttribute("type", "image/svg+xml"); svgRoot.setAttribute("style","width:900px;height:900px;"); svgRoot.setAttribute("data", "test.svg"); } div.appendChild(svgRoot); map.getPane(G_MAP_MAP_PANE).appendChild(div); //this.redraw(true); } ... </code></pre> <p>The <code>draw</code> function is not yet written.</p> <p>I still have a problem (I progress slowly, thanks to what I read/learn everywhere, and also thanks to people who answer my questions).</p> <p>Now, the problem is the following : with the <code>&lt;object&gt;</code> tag, the map is not draggable. All over the <code>&lt;object&gt;</code> element, the mouse pointer is not "the hand icon" to drag the map, but just the normal pointer.</p> <p>And I did not find how to correct this. Should I add a new mouse event (I just saw mouse event when a click or a double-click append, but not for dragging the map...) ?</p> <p>Or is there another way to add this layer so as to preserve the drag-ability ?</p> <p>Thank you for your comments and answers.</p> <p>PS: I also try to add one by one the elements of my SVG, but... in fact... I don't know how to add them in the DOM tree. In <a href="http://swa.ethz.ch/googlemaps/" rel="nofollow noreferrer">this example</a>, the SVG is read and parsed with <code>GXml.parse()</code>, and all the elements with a given tag name are obtained (<code>xml.documentElement.getElementsByTagName</code>) and added to the SVG node (<code>svgNode.appendChild(node)</code>). But in my case, I need to add directly the SVG/XML tree (add all its elements), and there are different tags (<code>&lt;defs&gt;</code>, <code>&lt;g&gt;</code>, <code>&lt;circle&gt;</code>, <code>&lt;path&gt;</code>, etc.). It is may be simpler, but I don't know how to do.. :(</p>
    singulars
    1. This table or related slice is empty.
    1. POHow can I overlay SVG diagrams on Google Maps?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USThibThib
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow can I overlay SVG diagrams on Google Maps?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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