Databases
StackOverflow2013
Postsdbo
POLeaflet: Dynamic div container
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLeaflet: Dynamic div container
    primarykey
    data
    text
    <p>I'm trying to create a small example using Leaflet and use it on my web app, however I'm having some dificulties.</p> <p>I already made a standalone Leaflet example from the <a href="http://leaflet.cloudmade.com/examples/quick-start.html" rel="nofollow">quick start guide</a> of their page, which has a static map div and overlays a few objects (<code>marker</code>, <code>circle</code> and <code>polygon</code>). However in my app, the map div container is positioned and sized dynamically with jquery, and it's a pretty complex app so I can't post here the whole code.</p> <p>The problem is that after the correct processing of the div the map is drawn correctly in the div (wherever it is), however in the overlays layer I can only see the <code>marker</code>. The <code>circle</code> and <code>polygon</code>are not visible.</p> <pre><code> var map = L.map(this.$el.attr('id')).setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.cloudmade.com/&lt;APIKEY&gt;/997/256/{z}/{x}/{y}.png', { attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;', maxZoom: 18 }).addTo(map); var circle = L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map); var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map); marker.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup."); circle.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.").openPopup(); </code></pre> <p>I believe there's nothing wrong in the way I create the map and objects and I even call <code>map.invalidateSize()</code> after the whole resizing of the div. And the curious part is that the popup is shown in the correct position, but no circle behind it.</p> <p>Could the problem be in the way I resize and position the div containers. Is there any specific <code>CSS</code> property I should be using in the div container?</p> <p>Thanks for all the help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USffleandro
    1. USffleandro
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLeaflet: Dynamic div container
      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