fix open street map image error on wordpress open street mapとwordpressの相性について


Hi, i am Japanese , so sorry for my poor english….

When I use OpenStreetMap api on wordpress … show error like below.

open street map will be on ios6, so I wrote javascript code
like this.

Succeeded on my server , so I went to wordpress and paste js on post.

It would be very easy….. but image like above is shown.
The image has crazy aspect like ”The Scream” by munch , its very annoying.

What is the reason , can you guess?

Conclution

Because I cannot imagine what to write here , so I only write conclusion….
If you want to draw map properly , you should insert code like below inside body tag.

<style>.olMap img{max-width:256px;}</style>

Why this css resolve error?
The answer is css code below in style.css of default theme and responsive design theme.

img {
	height:auto;
	max-width:100%;
}

It force map tile , which draw 256% width-height , width:100% and height:256,
so draw “The scream”.

Then , lets insert good css and draw map , so you can get image like below.


OpenStreetMapをJSで書いてwordpressに保存したらこんな風になります。

iOS6以降にも搭載予定というopen street map。
今回その実力を確かめるべく、まずはネットにある文献を参考に作ってみました。
ローカルでうまくいったのはこんな感じ。
あとは、記事にすべくwordpressに貼付ける!

楽勝!・・・・・・・・・・・・・・・・・のはずが、うまくいかない。
アスペクト比が狂った、上記の画像のようなさながらムンクの叫びのような地図が表示されてしまいます。

どうしたらいいか?パッと見た感じ、何が悪いように見えるでしょうか・・・・?

結論:魔法の呪文

と、考えて頂く暇もなく次の行で魔法の呪文を唱えてしまいます。

<style>.olMap img{max-width:256%; !important;}</style>

この呪文で解決する理由はwordpressのデフォルトのstyle.cssのに原因があります。

img {
	height:auto;
	max-width:100%;
}

max-widthが100%なのですが、open street mapのタイルは256%をさしています。
なので、この256%より大きい値を上書きしてやる必要があります。

すると、以下のように気持ちのいい地図が表示されます。
うーん、気持ちいい。

[sc:採用情報へのリンク]