Octopress: Octolayer

Octopress

New feature! New feature!

When I wanted to integrate a City Map with a marker, Google Maps seemed to be the first choice. Somehow, OpenStreetMaps seemed to be appealing as well.

When looking into it I quickly found out, that somebody had already looked into it. As well in a solution for google maps, as well as for OpenStreetmaps.

Well, I used the OpenStreetMaps-integration. And again: I have to state that the number of details the people working on this have captured is overwhelming. But you’ll probably find that out yourself.

  1. In order to integrate Octolayer into your Octopress just clone the git repository to your local disk

    git clone https://github.com/mguentner/octolayer.git .

  2. Then you’ll get the copy of the current plugin version.

    $ find -type d
/install
./install/sass
./install/sass/partials
./install/plugins
./install/source
./install/source/images
./install/source/javascripts
./install/source/javascripts/openlayers
./install/source/javascripts/openlayers/img
./install/source/_includes
./install/source/_includes/custom

    There are several files, but you can probably copy most of it directly into your blog engine beside the file head.html in ./install/source/_includes/custom/head.html. You have to add that content to you already existing head.html file.

  3. According to the README.mkd file which you’ve downloaded as well you can use the following syntax (one of many versions):

    map 52.5186 13.408056 12 "marker"

    I found it a bit tricky to integrate the markers directly from OpenStreetmaps (basically I didn’t find the option to do so), but their FAQ provides some help here as well. On m.osmtools.com you can do that easily. Copy the Longitude and Latitude coordinates into the tag, choose a Zoom level and a description if you want to and you’ll be done editing your post.

  4. Generate your blog again and enjoy the integrated map.

PS: Alternatively you can also integrate the i-frame code you can get from OpenStreetmap as well. Depends on how you want it.

<!--
http://www.openstreetmap.org/?lat=59.916845&lon=10.749344&zoom=18&layers=M
{% map 52.5186 13.408056 12 "marker" %}
http://m.osmtools.de/0f0T63aa4gH0f0Rm3aa6O4
<iframe width="700" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://m.osmtools.de/?lon=&lat=&zoom=17&mlon=10.749680042202&mlat=59.916696035766&icon=4&iframe=1" ></iframe>
-->