Create a file with multiple markers

There is the possibility to create one marker and display it with the WP OSM Plugin. If you want to display several markers in a map you should keep these markers in a file and manage them separate. This can be done with:

  • text file that uses tabs to format
  • text file that uses the KML standard

A great tool to create and manage such KML files is the free tool Viking. It’s absed on layers and let’s you export an layer as KML file. The steps to create an KML file for visualisation are:

* install Viking on your system

Viking to create and modify KML files.

Viking to create and modify KML files.

* load the OpenStreetMap layer (green plus):

Viking to create and modify KML files.

Viking to create and modify KML files.

Viking to create and modify KML files.

Viking to create and modify KML files.

* Create a TrackWayPointLayer for your markers (again green plus):

* Set your marker in the layer (button with green plus and blue flag).

* Export the layer as KML file

Export KML file

Export KML file

* Open the KML file in a text editor and replace the icons (all png addresses) to:

http://www.YourDomain.com/wp-content/plugins/osm/icons/mic_photo_icon.png

or any other icon from this list.

* Add the KML file in your map:

[*osm_map lat="40.715" lon="-74.009" zoom="15" width="600" height="450" map_border="thin solid grey" file_list=="../../../../wp-content/uploads/sites/2/2015/01/TrackWaypoint.kml"]

 

 

 


14 comments on “Create a file with multiple markers
  1. Rob says:

    I had a hell of a time getting this to work, but I finally did. Here’s VERY basic starter code for your KML file and WordPress post. It uses two different marker icons and shows two locations…..

    FIRST create a text file and give it a name. In this example, I’ll name it “mypoints.kml”

    Then paste the first part of the code you find here:

    https://jsfiddle.net/asr2e1fv/1/

    Be sure to change “EXAMPLEDOMAIN.COM to whatever your domain actually is (and fix the path as you need to). You can view all the available icons in that folder.

    SAVE THE FILE SOMEWHERE IN YOUR WORDPRESS DIRECTORIES. I SUGGEST IN YOUR UPLOADS FOLDER. In this example I am saving it to my uploads/2017/10 folder.

    Then put the second bit at the bottom of the code from that jsfiddle (above) into your page/post/custom post type.

    Again, DON’T FORGET to change EXAMPLEDOMAIN.COM to whatever your domain is. And edit the path to correctly match where you put that KML file.

    ONE FINAL THING….. If for some reason your markers don’t show up, make sure you haven’t entered the Longitude and Latitude backwards. If you’re pulling those from Google Maps, I’ve found Google to sometimes list Latitude before Longitude!

  2. Rob says:

    I hope this will help someone down the line…..

    I had a hell of a time getting this to work, but I finally did. Here’s VERY basic starter code for your KML file and WordPress post. It uses two different marker icons and shows two locations…..

    FIRST create a text file and give it a name. In this example, I’ll name it “mypoints.kml”

    Paste the following into the file:

    WordPress OpenStreetMap Plugin
    OSM-Plugin-Demo

    http://EXAMPLEDOMAIN.COM/wp-content/plugins/osm/icons/mic_blue_pinother_02.png

    http://EXAMPLEDOMAIN.COM/wp-content/plugins/osm/icons/mic_blue_information_01.png

    New York —
    A description that appears in the popup.
    #BlueIcon

    -73.996195,40.731500

    Philadelphia —
    This one is using the Blue Info icon.
    #BlueInfoIcon

    -75.160746,39.936968

    Be sure to change “EXAMPLEDOMAIN.COM to whatever your domain actually is (and fix the path as you need to). You can view all the available icons in that folder.

    SAVE THE FILE SOMEWHERE IN YOUR WORDPRESS DIRECTORIES. I SUGGEST IN YOUR UPLOADS FOLDER. In this example I am saving it to my uploads/2017/10 folder.

    IN YOUR WORDPRESS PAGE/POST:
    This is what in you would put in your page/post/custom post type (in the regular WordPress content editor of course):

    [osm_map_v3 map_center="40.341160,-74.64988" zoom="5" width="100%" height="480" control="scaleline" file_list="http://EXAMPLEDOMAIN.COM/wp-content/uploads/2017/10/mypoints.kml"]

    Again, DON’T FORGET to change EXAMPLEDOMAIN.COM to whatever your domain is. And edit the path to correctly match where you put that KML file.

    ONE FINAL THING….. If for some reason your markers don’t show up, make sure you haven’t entered the Longitude and Latitude backwards. If you’re pulling those from Google Maps, I’ve found Google to sometimes list Latitude before Longitude!

  3. Julian Nunez says:

    I wanna know how can I simulate the real movement of one or more markers at the same time, changing its coordinates. Is it possible?

  4. Anna says:

    Hello Mika!
    thank you for the plugin.
    I’m having troubles to display the markers in the map with the kml file.
    Should it still work? or something has changed?
    I’ve followed all the steps you say. I can’t find de error.
    Thank you very much.

  5. Anna says:

    Hello! thank you for the plugin.
    I have problems with the markers file. I have done the kml file, changed the icon address. Upload the icon file in the plugin folder.
    Written the code, but nothing happends. It only appears the map, without anymarker.
    What am I doing wrong?
    Thnank you for your help!

  6. hajo says:

    Hello MiKa
    you wrote here of the two alternatives to manage multiple markers:
    text file that uses tabs to format
    text file that uses the KML standard

    The kml-file solution is well explained.
    Can you give some advice or an example for tab-delimited format?

    Thanks a lot.
    hajo

    • admin01 says:

      Hello hajo,

      the tab – text file is not supported anymore … sorry. Let me know if you miss something in the KML file.

      Br, MiKa

  7. Jan G says:

    Hey MiKa, related to my previous questions: please could you tell me, why the “hotSpot”-method described here https://developers.google.com/kml/documentation/kmlreference#iconstyle does not work for the WP OSM Plugin? My KML file is working fine with Google Earth (http://www.geographie.nat.uni-erlangen.de/wp-content/uploads/PanoramaTrail_WP.kml). Thank You!

  8. Jan G says:

    Hi! First of all: Thanks for the great Plugin!

    I have a question on how to display
    -one or multiple gpx/kml track-file/s
    -combined with one ore multiple gpx/kml waypoint-file/s.

    To get an idea of what i mean, see http://s33.postimg.org/yz4j7ws5b/mehrere_Marker.png

    Would be great if you can help me! Thanks!

  9. Christopher says:

    Hi,
    thanks for the tutorial.
    I Tried this – exported a KML from Viking and put it in WordPress OSM. But:

    No Pop-Up boxes with text. How do you do this? How did you add the popop boxes with text?

  10. Marko says:

    Hello MiKa,

    I followed the steps described above except for the latitude and longitude because I used map_center instead. This is map code I’m using:

    [*osm_map_v3 map_center=”50.907,5.268″ zoom=”9″ width=”100%″ height=”450″ map_border=”thin solid blue” kml_file=”/wp-content/uploads/limburg/TrackWaypoint.kml”]

    The map shows up at this page:
    http://cng.muscleboykanan.com/vlaanderen/limburg/

    but without the three CNG Filling Stations of Bree, Hasselt and Heusden-Zolder.

    (Viking is also available for Arch Linux. I’m using Bluestar Linux which is based on it. When I go to http://cng.muscleboykanan.com/wp-content/uploads/limburg/TrackWaypoint.kml
    it opens and loads fine in Marble, and the filling stations do show up there.

    I first tried the value “http://cng.muscleboykanan.com/wp-content/uploads/limburg/TrackWaypoint.kml”, but that didn’t help. I already had to remove control=”mouseposition,scaleline” and theme=”dark” because no map shows up with those two things.

Leave a Reply

Your email address will not be published. Required fields are marked *

*