Failed to clone images on map using jquery clone

Question

Work on Open Street maps and animated flash animations .

I placed the card in

<section class="comment" style="height:250px;"> <p> <div id="demoMap" style="height:250px;"></div></p> </section> 

But he could not display the full map. I do not know the exact reason, but I guessed that in the js library, which could not clone the map tiles.

 createFold: function(j, topHeight, bottomHeight){ var offsetTop = -j*topHeight; var offsetBottom = -this.height+j*topHeight+this.foldHeight; return $('<div>').addClass('fold').append( $('<div>').addClass('top').css('height', topHeight).append( $('<div>').addClass('inner').css('top', offsetTop).append(this.content.clone()) ).add($('<div>').addClass('bottom').css('height', bottomHeight).append( $('<div>').addClass('inner').css('bottom', offsetBottom).append(this.content.clone()) )) ); }, 

So will there be a way to clone map tiles, or am I mistaken. If so, how could I achieve this ...

Answer 1

While you can access the tile elements, you can clone them, but (provided that the interface is now the same), they seem to be absolutely placed img tags in OpenStreetMap - the div reset, d you need to either clone the img elements themselves (and use instead, with a different positioning, assuming it works with the library), either create a div , pull out the URL from the image and apply it as a background for you div . Since the tiles are logically numbered, if you know the area you want, you can simply skip this step, maybe something like this:

 var startX = 7, endX = 8, startY = 3, endY = 10, scale = 5, $parent = $('<div class="map"></div>'); for (var y = startY; y <= endY; y++) { var $row = $('<div class="tile-row"></div>'); for (var x = startX; x <= endX; x++) { $row.append( $('<img />') .attr('src', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png'); ); // or: // $('<div></div>') // .css('background-image', 'http://path.to.images/'+scale+'/'+x+'/'+y'.png'); }; $parent.append($fold); }; 

The native OpenStreetMap format probably does not lend itself to this particular library (especially with its absolutely positioned images), so I think you will need to imitate its layout with a more position: static structure, avoiding absolute positions and splitting into contained lines that can be folded.