Skip to content Skip to main navigation Skip to footer

Joe

Forum Replies Created

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • in reply to: Shortcode #3139
    Joe
    Keymaster

    Embedding a Map

    Waymark map_id="1647"


    [Waymark map_id="1647"]

    Embedding a Collection

    Waymark collection_id="27"


    [Waymark collection_id="27"]

    in reply to: Debug Mode #3128
    Joe
    Keymaster

    Found in Settings > Misc. > Advanced, this option can be used to display extra information needed for debugging purposes.

    When enabled, check your browser console (Firefox / Other) for output from Waymark.

    Some Waymark debug output in the Firefox Console

    in reply to: Changelog #3048
    Joe
    Keymaster


    [readme include="Changelog"]Waymark[/readme]

    in reply to: Markers #2743
    Joe
    Keymaster


    Example


    [Waymark map_id="1647" shortcode_header="0"]


    Markup

    <!-- "Photo" Marker with Font Icon -->
     <div class="waymark-marker waymark-marker-photo waymark-marker-circle waymark-marker-small">
         <div class="waymark-marker-background" style="background:#70af00;"></div>
         <i style="color:#ffffff;" class="waymark-marker-icon waymark-icon-icon ion ion-camera"></i>
     </div>
    
     <!-- "Bank" Marker with Text Icon -->
     <div class="waymark-marker waymark-marker-bank waymark-marker-rectangle waymark-marker-large">
         <div class="waymark-marker-background" style="background:#000;"></div>
         <div style="color:#ffffff;" class="waymark-marker-icon waymark-icon-text">&dollar;</div>
     </div>
    
     <!-- "Beer" Marker with HTML Icon -->
     <div class="waymark-marker waymark-marker-beer waymark-marker-marker waymark-marker-medium">
         <div class="waymark-marker-background" style="background:#fbfbfb;"></div>
         <div class="waymark-marker-icon waymark-icon-html">
             <!-- HTML Input goes here -->
             &#127866;
         </div>
     </div>


    CSS

    /* Adjust Ionic Icon size */
     .waymark-marker .waymark-icon-icon.ion::before {
      font-size: 18px !important;
     }
     /* Adjust Font Awesome Icon size */
     .waymark-marker .waymark-icon-icon.fa::before {
      font-size: 18px !important;
     }
     /* Adjust "Photo" Marker Icon size */
     .waymark-marker-photo .waymark-icon-icon.ion::before {
      font-size: 18px !important;
     }
     /* Add a border to all Circle Markers */
     .waymark-marker-circle .waymark-marker-background {
      border: 1px solid #000 !important;
     }
     /* Adjust Text Icon size */
     .waymark-marker .waymark-icon-text {
      font-size: 18px !important;
     }
     /* Adjust only "Photo" Marker Text Icon size */
     .waymark-marker-photo .waymark-icon-text {
      font-size: 18px !important;
     }

    in reply to: Settings #2668
    Joe
    Keymaster

    in reply to: Types #2598
    Joe
    Keymaster

    Customise how Overlays are displayed on the Map.

    When you add an Overlay (a Marker, Line or Shape) to the Map you may want to style it in a certain way. In the case of Markers, you may want to use certain icons.

    Types allow you set these styles once, so you can simply select it when you are adding to the Map. You can create Types in Waymark > Settings > Marker/Line/Shape Types.


    Example

    This Map makes use of different Marker types:


    [Waymark map_id="49"]


    Type Keys

    Waymark takes the Title of every Overlay (Marker/Line/Shape), strips out every non-alpha-numeric and adds it as a HTML class, like this:

    <!-- "Beer" Marker with Font Icon       ***BEER*** -->
     <div class="waymark-marker waymark-marker-beer waymark-marker-circle waymark-marker-small">
         <div class="waymark-marker-background" style="background:#70af00;"></div>
         <i style="color:#ffffff;" class="waymark-marker-icon waymark-icon-icon ion ion-beer"></i>
     </div>

    You can use this to style specific Types, for example:

    /* Adjust the "Beer" Marker Text Icon size */
     .waymark-marker-beer .waymark-icon-text {
       font-size: 18px !important;
     }

    Use your browser’s inspector (Firefox / Chrome) to find Type keys.

    This “Beer” Marker has the class
    waymark-marker-beer

    in reply to: The Editor #2596
    Joe
    Keymaster

    Using the Editor you can create interactive Maps by adding Overlays (Markers, Lines and Shapes).

    The Editor is displayed when creating or Editing a Map (Waymark > Maps). You can import from GPX, KML and GeoJSON formats and photo location information is automatically detected.

    Once Maps have been created, you can add them to your content using the Waymark Shortcode.


    Try the Editor


    [Waymark content="submission"]

    If submitted, you will be provided with a link to your Map. All submissions are automatically deleted after 24 hours.

    in reply to: Shortcodes #2589
    Joe
    Keymaster

    The Waymark Shortcode allows you to embed Maps in your content.

    Once created, Maps and Collections can be embedded within your content by simply adding the Shortcode.


    Using the Shortcode

    The Shortcode is simply a text placeholder that tells Waymark what to display.

    It can be added to any content in WordPress that supports shortcodes.

    For example, this Shortcode will display the Map with an ID of 1649:

    Waymark map_id="1649"


    [Waymark map_id="1649" shortcode_header="0" map_height="300" show_gallery="0"]

    This Shortcode will display the same Map, but with a different Basemap and zoom level:

    Waymark map_id="1649" basemap="Satellite" map_zoom="11" 


    [Waymark map_id="1649" shortcode_header="0" map_height="300" map_zoom="11" basemap="Satellite" show_gallery="0"]

    This Shortcode will display all Maps in the Collection with an ID of 27:

    Waymark collection_id="27"


    [Waymark collection_id="27" map_height="300" shortcode_header="0" show_gallery="0"]

    To display a Basemap without any data, simply provide centre coordinates and zoom level, like this:

    Waymark map_centre="54.526814,-3.017289" map_zoom="16" basemap="Satellite"


    [Waymark map_centre="54.526814,-3.017289" map_zoom="16" shortcode_header="0" map_height="300" basemap="Satellite"]

    Shortcode Parameters

    The Shortcode can be passed the following parameters.

    Parameter Value Description
    map_id Map ID Display a single Map. You can create Maps (and obtain Map IDs) in WP Admin > Waymark > Maps.
    collection_id Collection ID Display all Maps in a Collection. You can create Collections (and obtain Collection IDs) in WP Admin > Waymark > Collections.
    map_centre Latitude,Longitude The initial centre coordinates of the Map. By default Waymark centres the Map so all Data is visible.
    map_zoom 0-18 The initial zoom of the Map. By default Waymark zooms the Map so all Data is visible.
    basemap Basemap Name Which Basemap to display when the Map first loads (instead of the default). The value must match a Basemap Name listed in WP Admin > Waymark > Settings > Basemaps.
    map_height Number of pixels Specify the desired height of the Map. The default can be changed in WP Admin > Waymark > Settings > Misc.
    shortcode_header 0 or 1 Whether to display the Shortcode Header (if Meta exists for the Map). The default can be changed in WP Admin > Waymark > Settings > Misc.
    show_gallery 0 or 1 Whether to display an image gallery for Markers that have images associated with them. The default can be changed in WP Admin > Waymark > Settings > Misc.
    show_filter 0 or 1 Whether to display the Overlay Filter. This enables visitors to filter for which Markers, Lines and Shapes are currently visible on the Map. The default can be changed in WP Admin > Waymark > Settings > Misc.

    in reply to: Meta #2587
    Joe
    Keymaster

    Using Meta, you can provide extra information about each Map.

    Meta is entered below the Editor and any information added is displayed on the Map Details page.


    Creating Meta Inputs

    A Description text area is displayed as default and additional inputs can be created in Waymark > Settings > Meta.

    Pro Tip! Meta is stored as WordPress custom fields.


    Example

    Click “Details” to see the Meta input for this Map:


    [Waymark map_id="1647" show_gallery="0"]

    in reply to: Collections #2584
    Joe
    Keymaster

    Collections allow you to organise your Maps.

    Collections allow you to create relationships between Maps, you can then display all the Maps in a Collection using the Shortcode.

    Collections can be nested and Maps can be associated with multiple Collections, meaning you can organise your Maps however best suits you.


    Example

    All Maps in this Collection are being displayed:


    [Waymark collection_id="27" show_gallery="0"]

    in reply to: Basemaps #2580
    Joe
    Keymaster

    Use third-party Basemaps as your Map background.

    Waymark uses the excellent OpenStreetMap as it’s default Basemap and allows integration for services that support tiled web maps. If you have more than one Basemap, you can switch between them when viewing the Map.


    Adding a Basemap

    Thunderforest and Mapbox are examples of providers that offer easy access to beautiful Basemaps (including satellite imagery).

    They require registration, but have a free usage tier.

    Basemaps can be configured in Waymark > Settings > Basemaps.

    To add the Thunderforest Outdoors Basemap, we simply enter the style URL provided:

    https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=<insert-your-apikey-here>

    The attribution field allows you to comply with the provider terms and conditions. In the case of Thunderforest, a link to both Thunderforest and OpenStreetMap is required:

    Maps © <a href="http://www.thunderforest.com">Thunderforest</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>

    Pro Tip! The first Basemap listed will be used by default, unless you specify a different one using the Shortcode.


    Examples

    This Map uses Thuderforest Outdoors as the Basemap:

    Waymark basemap="Outdoors" map_centre="54.526814,-3.017289" map_zoom="16"


    [Waymark map_centre="54.526814,-3.017289" map_zoom="16" shortcode_header="0" map_height="300" basemap="Outdoors"]

    This Map uses Mapbox Satellite as the Basemap:

    Waymark basemap="Satellite" map_centre="54.526814,-3.017289" map_zoom="16" 

    The Basemap URL entered in Settings is:

    https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.jpg90?access_token=[your_api_key]

    View the Mapbox Docs for more information on using Raster Tiles.


    [Waymark map_centre="54.526814,-3.017289" map_zoom="16" shortcode_header="0" map_height="300" basemap="Satellite"]

    in reply to: Getting Started #2574
    Joe
    Keymaster

    This video runs through how to use the Waymark WordPress plugin to create and display Maps on your site.

Viewing 12 posts - 1 through 12 (of 12 total)