Geek Answers Handbook

OpenLayers line strings do not align

I got this OpenLayers project where I need to use a local display service.

The problem I am facing: (Screenshot) http://tinypic.com/r/x38oq1/6

This is a mystery to me in itself, since im uses 100% identical code on an empty web page for testing purposes (a blank page will be a page with only a map on it), and it works great! (screenshot: http://tinypic.com/r/20zyxxh/6 )

I am using OpenLayers 10.12 (the newest stable on July 26.) I am also using codeigniter Framework with bootable twitter.

The map looks great if I use the same map server as the manuals / tutorials, but failed when I switched to my local map.

JavaScript Code:

<script defer="defer" type="text/javascript"> var map = new OpenLayers.Map('map'); var tms = new OpenLayers.Layer.OSM( "OSM Layer", "./assets/map/WholeWorld256-8bit/${z}/${y}-${x}.png", {layers: 'basic'} ); map.addLayer(tms); map.zoomToMaxExtent(); </script>

If anyone knows why he is acting like that, that would be great!

I also tried the IRC channel, but I did not get any response there.

+4
source share
2 answers

so I found a solution to the problem and I posted it if someone else is facing the same problem.

The problem is styling Bootstrap Twitter. But the twitter team created an ID tag that fixes the problem. Using ID = "map_canvas" fixes the problem.

Code that puts some maximum width on map tiles:

Bootstrap.css - Line 64-74:

 img { max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

The solution is found on line 76-78 (boostrap.css):

 #map_canvas img { max-width: none; }

Hope this helps anyone! Have a nice day!

+7
source

I got involved in the same problem, but didn’t want to change the identifier of my OpenLayers container. You can fix for an arbitrary div using the same CSS rule:

 <style>#mapCanvas img { max-width:none; } /* make Boorstrap work with OpenLayers */</style>
0
source

More articles:


All Articles