How to add a clickable polygon in a map of a WordPress blog with KML

  1. Create a KML file with Viking in Ubuntu 12.04 LTS
  2. Modify the KML file in a texteditor
  3. Add the OSM shortcode for the WordPress plugin

The WordPress OpenStreetMap Plugin supports KML files to customize maps in your blog or site with personal data. Beside routes and markers (Points of Interrest) you can display polygones with KML files. The following article shows how to crate a site with your map and display a clickable area with an whole in this map.

Create a KML file with Viking in Ubuntu 12.04 LTS

The easiest way to create or edit geo data on your Ubuntu system ist probably to install Viking.

Viking in Linux Ubuntu

Viking in Linux Ubuntu

Our sample uses a polygone with an whole inside, so you should create to KML tracks in Viking, one for the inner border and one for the outer border.

Modify the KML file in a texteditor

You should should adapt the file to your needs, eg modify the color of the polygon. The adapted KML file for this sampel can be found here.

Add the OSM shortcode for the WordPress plugin

The WordPress OSM plugin provides a lot of shortcode arguments, simply generate them in the backend of your blog, upload the KML file and add the link to the KML file with kml_file.

[*osm_map lat=”41.904″ long=”12.4495″ zoom=”15″ width=”450″ height=”300″ control=”mouseposition,scaleline” map_border=”thin solid orange” theme=”ol_orange”  kml_file=”http://wp-osm-plugin.hanblog.net/wp-content/uploads/osm_map/OSM_Plugin_KML_Sample_02.kml” type=”stamen_toner”]

Looks like this:

[osm_map lat=”41.904″ long=”12.4495″ zoom=”15″ width=”450″ height=”300″ control=”mouseposition,scaleline” map_border=”thin solid orange” theme=”ol_orange”  kml_file=”http://wp-osm-plugin.hanblog.net/wp-content/uploads/osm_map/OSM_Plugin_KML_Sample_02.kml” type=”stamen_toner”]

Note: There is a popup if you click in the colored area.

Feedback and experiences are welcome in the Forum (EN / DE)

 

 

 

 

 

Posted in tutorial
Tags: , , , , , ,