:date: 2012-11-25 23:14

.. index:: tech, octopress, blogg

Octopress: Octolayer
====================

.. image:: /_images/images/gallery/2012/2012-placeholder/20120907-octopress-logo.png
   :alt: Octopress
   :align: right
   :scale: 50

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 <http://www.openstreetmaps.org>`__ 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 <http://throughnothing.com/2012/07/26/jekyll-mapping-and-octopress/>`__, as well as `for OpenStreetmaps <https://github.com/mguentner/octolayer>`__.

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.

#. In order to integrate `Octolayer <https://github.com/mguentner/octolayer>`__ into your `Octopress <http://www.octopress.org>`__ just clone the git repository to your local disk

   .. code:: bash

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

#. Then you'll get the copy of the current plugin version.

   .. code:: bash

      $ 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 :file:`head.html` in :file:`./install/source/_includes/custom/head.html`. You have to add that content to you already existing :file:`head.html` file.

#. According to the :file:`README.mkd` file which you've downloaded as well you can `use the following syntax <http://mguentner.github.com/octolayer/>`__ (one of many versions):

   .. code:: bash

      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 <https://help.openstreetmap.org/questions/25/how-do-i-add-a-marker-to-a-map>`__ here as well. On `m.osmtools.com <http://m.osmtools.de/>`__ 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.

#. 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.

.. code:: bash

   <!--
   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>
   -->