Preview to WordPress OpenStreetMap Plugin OSM V3.2 with OpenLayers 3

The WordPress OpenStreetMap Plugin OSM is based on OL (OpenLayers) and includes version 2 and 3. Up to OSM version 3.1 only the geotag widget used the latest technology of OL3. The upcomming version 3.2 will provide the new library also for simple markers like a POI at  Casa die Giulietta in Verona / Italy. The new library is prepared for mobile devices – on sample ist to rotate the map. On the mobile device simple with two fingers on the screen or with [Alt]+[Shift]+drag:

You get this:

Rotate stamen and OpenStreetMap with OpenLayers 3

Rotate stamen and OpenStreetMap with OpenLayers 3

 

 

Veröffentlicht unter Allgemein

V3.1: Map icons collection with cc0 instead of cc-by and openlayers 3 geotag widget

This latest version of WP OSM Plugin brings three features:

There are two new shortcodes added to the plugin kml_file_list and kml_colour_list. A sample looks like this:

[*osm_map lat=”38.713″ lon=”-9.136″ zoom=”16″ width=”95%” height=”300″ control=”scaleline” map_border=”thin solid orange” theme=”ol_orange”  kml_file_list=”../../../../wp-content/uploads/osm_map/OSM_01_red.kml, ../../../../wp-content/uploads/osm_map/OSM_01_black.kml”]

Up to OSM-Plugin version 3.0 all icons were cc-by, we have replaced them with cc0 icons:

mic_black_empty_01.png mic_blue_empty_01.pngmic_brown_car_01.png

mic_green_car_01.png

mic_green_caravan_01.png

mic_black_archery_01.png

mic_orange_archery_01.png

mic_blue_toilets_disability_01.png

mic_blue_toilets_disability_01.png

mic_green_icecream_01.png

mic_black_heart_01.png

mic_black_camera_01.png

mic_blue_cycling_01.png

mic_blue_drinkingwater_01.png

mic_black_car_01.png

mic_black_powerplant_01.pngmic_black_steamtrain_01.pngmic_black_train_01.pngmic_blue_information_01.pngmic_blue_mobilephonetower_01.pngmic_red_pirates_01.pngmic_orange_audio_01.pngmic_orange_fishing_01.pngmic_orange_hiking_01.pngmic_blue_horseriding_01.pngmic_black_parking_bicycle-2_01.pngmic_brown_harbor_01.pngmic_blue_bridge_old_01.pngmic_red_pizzaria_01.pngmic_green_vineyard-2_01.pngmic_blue_toilets_01.pngmic_blue_shower_01.pngmic_brown_fillingstation_01.pngmic_blue_lighthouse-2_01.pngmic_brown_parking_01.pngmic_green_horseriding_01.pngmic_green_palm-tree-export_01.pngmic_orange_sailing_1.pngmic_black_cctv_01.pngmic_orange_motorbike_01.pngmic_blue_scubadiving_01.png

Please help to make this collection grow and post us a link to cc0 collection with svg icons. Also feel free to send us an cc0 if you want it to be integrated.

In this post you can also see on the right site the geotag widget using Openlayers 3.

Feedback is welcome!

 [WordPress OSM Plugin DOWNLOAD]

Veröffentlicht unter Allgemein

Icon preview V1 for maps with markers in WP OSM Plugin

The following markers are based on OpenStreetMap icons and they are used as Point of Interrest (POI) with WP OSM Plugin. All are modified with the free tool inkscape in SVG:

mic_blue_cycling_01.png

mic_blue_drinkingwater_01.png

mic_black_car_01.png

wmic_black_train_01.png

mic_blue_information_01.png mic_blue_mobilephonetower_01.png

mic_black_parking_bicycle-2_01.png

mic_orange_sailing_1.png

mic_blue_lighthouse-2_01.png

mic_brown_harbor_01.png

mic_blue_bridge_old_01.png

mic_green_palm-tree-export_01.png

mic_blue_toilets_01.png

 

 

Contact us if you want to support / help to generate a set of icons for the WordPress OSM Plugin.

 

 

 

Veröffentlicht unter Allgemein Getagged mit: , , , ,

Adding geotag to WordPress and OpenStreetMap with WP OSM Plugin V2.9.4

Adding a geolocation to a post / page was introduced to the WordPress OSM Plugin many years ago – there are sites like Fotomobil.at and Hamburgs Brücken wich use it with hundreads of geocoded posts. The latests version of WP OSM Plugin added a sidebar widget at your edit post area to directly set the geolocation without dealing with custom fields by yourself:

WP OSM  Plugin geotag

WP OSM Plugin geotag

If you want to, there is also the possibility to define an icon to the post which is later on shown in the overall map.

Beside the geolocation widget the latest version brings also some new icons, find them here.

And many thanks to Andrea for italian tranlsation!

Veröffentlicht unter announcement

Change the OpenStreetMap Style and controls in WordPress plugin OSM

If the webdesign of your homepage is dominated by a specific color you might want to change the style for your OpenStreetMap in your WordPress Blog. If your Map is embedded with the WordPress OSM plugin you just have to copy a directory, replace the color of the icons and put the directory to your blog uploads folder. This article shows how to do this with GIMP.

The feature to add your private style to the OSM plugin has been added to version 1.2.2. As preperation you have to copy the “ol” folder from wp-content/plugins/osm/themes/ to your local machine. The files in this folder are loaded by your map – if you want another style you simply have to modify them, but keeping the size an name of the png files.

Modify the controls of your OpenStreetMap map with GIMP

Since there is just one color in the controls of the OSM map we can choose the easy way to modify the color. Just by “Adjust Hue / Lightness / Saturation” – find some details on this at the GIMP docu. All I did for this sample was to set Hue to 150 and Lightness to 50.

Farbe der controls für OpenStreetMap ändern

Change the color of OSM map controls by setting Hue to 150 and Lightness to 50 in GIMP.

At this point the icon is colored orange, but since it is stored as png I would like to add some transparancy by reducing the Opacity. For all icons I set the Layer Opacity to 80%.

OpenStreetMap Style ändern

Opacity for OSM map icons.

If you want to change an icon with several colors you will like the GIMP feature rotate colors that is explained here.

Upload the theme folder and generate the OSM plugin shortcode

Once you have modified all the icons you simply upload them to your WordPress folder:

/uploads/osm/theme

and generate the OSM shortcode in the backend (settings =>OSM) of your WordPress Blog:

WordPress OpenStreetMap style

Set WordPress OpenStreetMap style for OSM plugin map

OpenStreetMap with orange controls and default controls

After you uploaded the the folder as mentioned above you will get the orange controls like in this map:

default blue control if you choose “default theme”:

default dark controls if you choose “dark theme”:

Thanks

Thanks to Uwe for the feedback about Osmarender Service and to the reader of this article for accepting german screenshots in an english article ;-)

GIMP
WordPress OSM plugin download

Veröffentlicht unter tutorial Getagged mit:

Loading three GPX files and a marker with html-text

There has been a request to display GPX files and a html marker with WP OSM Plugin. These steps are required:

  1. Optimze your GPX tracks
  2. Add a custom field called OSM_marker_text with your html text
  3. Generate the OSM Shortcode and modify it

In detail it’s like this:

Optimze your GPX tracks

Usually your tracks are quite huge with data you do not need but take a lot time to load your page. The free tool gpsbabel optimizes it:

gpsbabel -i gpx -f Input.gpx -x simplify,crosstrack,error=0.001k -o gpx -F Output.gpx

The argument: simplify,crosstrack,error=0.001k delets all points which are closer than 1 meter.

Add a custom field called OSM_marker_text with your html text

At the meta box for custom fields you should create a new customfield.

HTML text for WP OSM Plugin marker

HTML text for WP OSM Plugin marker

In this exampel the html text in the custom field is:

<font color="red">Variante basse</font><br><font color="green">Tivano trail</font><br><font color="blue">Muro di Sormano</font>

Generate the OSM Shortcode and modify it

There is a metabox when you create your post or page. Adjust the map and add a single marker to the map. In addition you will have to modified shortcode to get this:

[*osm_map lat="45.893" lon="9.271" zoom="13" width="100%" height="600" control="mouseposition,scaleline" map_border="thin solid grey" theme="dark" gpx_file_list="../../../../wp-content/uploads/osm_map/VARIANTE_BASSA_V2.gpx,../../../../wp-content/uploads/osm_map/TIVANO_TRAIL_V2.gpx,../../../../wp-content/uploads/osm_map/MURO_DI_SORMANO_V2.gpx" gpx_colour_list="red,green,blue" marker="45.893,9.271,OSM_marker_text" marker_name="mic_cycling_icon.png"]

* <= asterix has to be removed

GPX-Data:mtb-funtrails.it

Veröffentlicht unter tutorial

V 2.9.1 releases with individual icons for your post / page with geotag

With the WP OSM Plugin you can add an geotag (lat and lon) and an icon to your post. This information can be used to show an widget in your blog or to show a map with all geotagged posts and the related icon.

If you click on the icon in the map you will get the excerpt and a link to the post or page. If you did not set an icon but only the geotag, the standard icon will be used. You have to set the geotag and the  icon when you create the post or page like this (Benutzerdefiniert Felder = custom field):

WordPress OSM Plugin geotag

WordPress OSM Plugin geotag

The map with all geotagged posts / pages of this site looks like this:

The map shows the standard icon mic_shark_icon.png whenever a geotag is set but no icon is defined via OSM_geo_icon. The the icon for OSM_geo_icon has to be an icon from this page.

The WP OSM shortcode in detail – red is the map information, blue ist the information about the standard icon and green is the information about the geotagged posts / pages:

[*osm_map lat="51.0" lon="10.51" zoom="4" width="95%" height="500" control="mouseposition,scaleline" map_border="thin solid orange" theme="ol_orange" type="CycleMap" marker_name="../../../plugins/osm/icons/mic_blue_empty_01.png" marker_height="37" marker_width="32" marker_focus="5" import="osm_l" import_osm_line_color="orange"]

lat=”51.0″ lon=”10.51″ zoom=”4″ … center and zoomlevel of the map
width=”95%” height=”500″ … size of the map
control=”mouseposition,scaleline” … adds some control to the map
map_border=”thin solid orange” … adds a orange border around the map
theme=”ol_orange” … adds orange controls
type=”CycleMap” … map type
marker_name=”../../../plugins/osm/icons/mic_blue_empty_01.png” … standard icon address
marker_height=”37″ … standard icon size (not needed if the icon is from this page)
marker_width=”32″ … standard icon size (not needed if the icon is from this page)
marker_focus=”5″ … standard icon center (not needed if the icon is from this page)
import=”osm_l” … displays all geotagged posts/pages with a geotag
import_osm_line_color=”orange” … draws a line between geotagged posts/pages

Note 1.) You need not marker_height, marker_width, marker_focus if you set a marker from the OSM Plugin like: marker_name=”wpttemp-yellow.png”
Note 2) You must not save any individual marker in the plugin folder as they are deleted at the update!

Veröffentlicht unter announcement

WordPress OSM Plugin mit OpenSeaMap released als V2.9

2013_OpenSeaMap_Logo_01Seit 2009 können OpenStreetMap Karten in einem WordPress Blog mit dem WP OSM plugin als “slippy map” eingebunden werden. Dh in der Karte kann gezoomt und auch im Fenster verschoben werden. Zusätzlich gibt es die Möglichkeit, persönliche Daten – wie zB Marker oder GPX routen – einzubinden.
Seit der Version 1.3 des WP OSM plugin ist es nun möglich, auch per shortcode eine OpenSeaMap Karte – gemeinnsam mit Tracks, Fotos oder Markern in der Karte – in einem WP Blog einzubinden. Der Beitrag zeigt das Einbinden mit wenigen Schritten. Weiterlesen ›

Veröffentlicht unter announcement

Dealing with icons in KML files for WP OpenStreetMap Plugin OSM

If you want to display individual information in your map then KML files are a good choice. There are several KML generators and it’s easy to integrate it into your WordPress Site.

Note, you must not display any icons which are protected by copyright! There icons integrated in WP OSM plugin and you should use them in your KML file with style-tag like this:

  <Style id="style1">
    <IconStyle>
      <Icon>
        <href>http://www.MyDomain.com/wp-content/plugins/osm/icons/mic_white_number_01.png</href>
        <hotSpot x="16" y="0" xunits="pixels" yunits="pixels" />
      </Icon>
    </IconStyle>
  </Style>

Using this icon you simple refer to the style at the placemark-tag with styleUrl:

  <Placemark>
    <name>Primosten</name>
    <Snippet>About Primosten&amp;nbsp;Mooring in Primosten&amp;nbsp;Primosten Gallery</Snippet>
    <description><![CDATA[<a href="http://de.wikipedia.org/wiki/Primo%C5%A1ten" target="_blank">About Primosten</a>&nbsp;<div><a href="http://www.sailingchoices.com/mooring-Primosten/" target="_blank">Mooring in Primosten</a>&nbsp;</div><div><a href="http://www.sailingchoices.com/Primosten-photos/" target="_blank">Primosten Gallery</a></div>]]></description>
    <styleUrl>#style1</styleUrl>
    <Point>
      <coordinates>15.9219,43.5885,0.00</coordinates>
    </Point>
  </Placemark>

Sample looks like this:

[*osm_map lat=”43.544567″ lon=”15.831299″ zoom=”9″ width=”100%” height=”550″ map_border=”thin solid grey” theme=”dark”  kml_file=”http://www.MyDomain.com/wp-content/uploads/osm_map/test route 2015.kml” control=”scaleline,scale,mouseposition”]

If you miss any icons just post it to get them with the next OSM plugin version.

PS: KML-sample was taken from http://www.sailingchoices.com

 

Veröffentlicht unter Allgemein Getagged mit: , , ,

WordPress OpenStreetMap Plugin OSM V2.8.1 released

The latest version of the WordPress OSM Plugin addressed several improvements of existing features:

  • show the excerpt for geotagged posts in the pop up
  • hide the map widget at the blogarchive view
  • add the OSRM routing service in the popup
  • some bugfixes (see Roadmap for details).

Display a map with all geotagged posts:

If you geotagged your posts of pages with WP OSM Plugin, you can display all your posts in a map:

[*osm_map lat=”52.795″ lon=”23.51″ zoom=”3″ width=”100%” height=”450″ control=”mouseposition,scaleline” map_border=”medium solid orange” theme=”ol_orange” marker_name=”wpttemp-yellow.png” import=”osm_l” import_osm_cat_incl_name=”announcement” import_osm_line_color=”orange”]

The arguments of this map more detailled:

  • lat=”52.795″ and lon=”23.51″ … center of the map
  • zoom=”3″ width=”100%” height=”450″ … adjust the map
  • control=”mouseposition,scaleline” … show some controls on the bottom of the map
  • map_border=”medium solid orange” … border around the map
  • theme=”ol_orange” … the arrows to navigate in the map
  • marker_name=”wpttemp-yellow.png” … icon used to mark the posts on the map
  • import_osm_cat_incl_name=”announcement” … filter the geotagged posts for “announcement” only
  • import=”osm_l”… mark them in the map with link to the posts
  •  import_osm_line_color=”orange” … connect all geotagged posts with an orange line

Widget for geotagged posts.

Since OSM Plugin V2.8 there is a widget to show a map if the post/page is geotagged. This map is not shown anymore if there are more than one posts/pages displayed. Thanks to writeln for info on this issue.

OSRM – Routing Service link in the popup

At Settings / Einstellungen of your WordPress Blog you will find OSM with another OSM Shortcode generator. There you can create a shortcode like this automatically:

[*osm_map lat=”38.716″ lon=”-9.137″ zoom=”16″ width=”600″ height=”450″ marker=”38.71612,-9.13619″ marker_name=”wpttemp-red.png” map_border=”thin solid green” control=”scaleline” m_txt_01=”Fa. Muster” m_txt_02=”MyStreet” m_txt_03=”8899 City” m_txt_04=”My Country” marker_routing=”osrm” theme=”dark” type=”Mapnik”]

Your feedback is welcome in the forum (EN / DE) and if you like the OSM plugin, rate it here.

Veröffentlicht unter announcement