Skip to content
Fabian Wolf edited this page Jan 19, 2018 · 5 revisions

Available tile service handles

  • default - uses the OSM mapnik tile server
  • osm_bw - OSM mapnik in black and white
  • mapquest

Q. Where do I place the marker text?

A. Right inside the shortcode, eg. [ui_leaflet_map]your <strong>nifty</strong> HTML text :)[/ui_leaflet_map]

Q. What is with this latitude and longitude thingy?

A. If you came this far and really still have to ask, then you are wrong here. Please read it all up in wikipedia and then come back! :P

Q. How to get the correct geographic / position data?

A. A few years ago, it was quite easy to just extract it from the Google Maps HTML code ("integrate it on your homepage" or so). Sadly, that has changed. But wait, there are better methods nowadays :)

There are two known methods. Easiest one first:

LatLong.net

Note: Looks like they are using some kind of OpenStreetMap-based service underneath, because the results for the regular test case - "Fischbrunnen, München" - are identical to OSM searches / Nominatim-based services.

OSM Nominatim Service

  • Look up the address in the OSM Nominatim service
  • When the result is displayed, click on "details" of the correct "result box" (or open it in a new tab)
  • In the "details" view, search for "Centre Point" - this contains the latitude and longitude (format: "latitude, longitude")
  • Done :)

Example

  • Open OSM Nominatim
  • Search for "Fischbrunnen, München" (it's a famous fountain in Munich, right on the Marienplatz :))
  • Click on "details"
  • "Centre Point" should be "48.1372317,11.5761799974694"
  • The latitude is 48.1372317, the longitude is 11.5761799974694
  • Thus the shortcode would be: [ui_leaflet_map latitude="48.1372317" longitude="11.5761799974694"]

Q. Default position

A. If no position is set, the map latitude and longitude defaults to "48.1372568, 11.5759285", which is located on the Marienplatz in Munich. Actually, it's nearly identical to the position shown in the example :D

Q. Loading a different Leaflet.js version

There are several (programmatical) options available. First would be to load just a different local version:

  • Use the ui_leaflet_load_leaflet_version filter hook to switch between the different versions supplied in the assets directory - just add the version as a string, eg. '0.7.7' for the old stable release.
  • Available versions: 0.7.7, 1.0.1, 1.2, 1.3

Second choice: Loading external libraries, as suggested by the Leaflet.js download page.

  • Use the filter hook `ui_leaflet_js_url' for the JavaScript file ..
  • .. and the filter hook ui_leaflet_css_url for the CSS file

Example

<?php
function my_custom_leaflet_js() {
return 'https://unpkg.com/[email protected]/dist/leaflet.js';
}

add_filter( 'ui_leaflet_js_url', 'my_custom_leaflet_js' );

function my_custom_leaflet_css() {
return 'https://unpkg.com/[email protected]/dist/leaflet.css';
}

add_filter( 'ui_leaflet_css_url', 'my_custom_leaflet_css' );
?>

Q. I have a question

A. Chances are, someone else has asked it. Either check out the support forum at WP or take a look at the official issue tracker: http://github.com/ginsterbusch/ui-leaflet-integration/issues