Databases
StackOverflow2013
Postsdbo
POFixed image over Leaflet map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed image over Leaflet map
    primarykey
    data
    text
    <p>I have not posted here before but have read extensively, so I hope I do not transgress any rules...</p> <p>I am trying to place a kind of mask image (a black square with a transparent circular hole in it) over a leaflet map; makes it look like a round map displayed on an old oscilloscope screen;-). Absolutely positioned at top: 0px; bottom: 0px;. Fixed, independent of zoom or pan. </p> <p>I can get the image to display, in some cases I can even get the map to pan and zoom in the transparent hole, I can even press the X to close a popup on a marker, but no matter what I try I can NEVER manage to make the marker popups come up when clicked or touched. </p> <p>I have tried a zillion combinations: using a PNG image or raw SVG code, changing z-index, in a div or not. I have tried in the same container, in a different container, even adding it to the leaflet control pane: </p> <pre><code>document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\ &lt;svg style="position: absolute; top: 0px; left: 0px; height: 360px; width: 360px;"&gt;\ &lt;g&gt;\ &lt;path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\ d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"&gt;&lt;/path&gt;\ &lt;/g&gt;\ &lt;/svg&gt;'; </code></pre> <p>The image appears ok, but interaction with Leaflet is corrupted, no popup interaction possible.</p> <p>If I set the z-index of the svg to -1, the mask no longer displays, but the popup does come up.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMichael Irigoyen
    1. USMike Tommasi
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFixed image over Leaflet map
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POFixed image over Leaflet map
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POFixed image over Leaflet map
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI think that the problem is that if you put an image over something else, even if the image is transparent, it covers the element below and make impossible to interact with. I'm also courious to see if someone comes with a solution.
      singulars
      1. POFixed image over Leaflet map
      1. USMir
    2. COYes, does not matter what the content is, it being a square element that covers the entire map, it will always cause trouble. Still, there must be a way to create a mask...
      singulars
      1. POFixed image over Leaflet map
      1. USMike Tommasi
 

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