| 1 |
<?php |
| 2 |
/** |
| 3 |
* Shortcode Helper Page |
| 4 |
* |
| 5 |
* PHP Version 5.5 |
| 6 |
* |
| 7 |
* @category Admin |
| 8 |
* @author Benjamin J DeLong <[email protected]> |
| 9 |
*/ |
| 10 |
?> |
| 11 |
<style> |
| 12 |
.marching-ants { |
| 13 |
animation: dash 35s infinite linear; |
| 14 |
} |
| 15 |
|
| 16 |
@keyframes dash { |
| 17 |
to { |
| 18 |
stroke-dashoffset: -1000; |
| 19 |
} |
| 20 |
} |
| 21 |
|
| 22 |
/* wordpress messes up video tags */ |
| 23 |
video { |
| 24 |
max-width: inherit; |
| 25 |
} |
| 26 |
</style> |
| 27 |
|
| 28 |
<div class="wrap"> |
| 29 |
<h2>Shortcode Helper</h2> |
| 30 |
<div class="wrap"> |
| 31 |
<?php |
| 32 |
$drag = __('Drag Me', 'leaflet-map'); |
| 33 |
|
| 34 |
echo do_shortcode('[leaflet-map zoom=2 zoomcontrol doubleClickZoom height=300 scrollwheel]'); |
| 35 |
echo do_shortcode(sprintf('[leaflet-marker draggable visible] %s [/leaflet-marker]', |
| 36 |
$drag |
| 37 |
)); |
| 38 |
?> |
| 39 |
<div class="wrap"> |
| 40 |
<hr> |
| 41 |
<h2><?php esc_html_e('Interactive Shortcodes:', 'leaflet-map'); ?></h2> |
| 42 |
<p class="description"><?php esc_html_e('Move the map and the marker to generate shortcodes below:', 'leaflet-map'); ?></p> |
| 43 |
<div class="flex"><label class="h3" for="map-shortcode"><?php esc_html_e('Map Shortcode', 'leaflet-map'); ?></label> <input type="text" id="map-shortcode" readonly="readonly" /></div> |
| 44 |
<div class="flex"><label class="h3" for="marker-shortcode"><?php esc_html_e('Marker Shortcode', 'leaflet-map'); ?></label> <input type="text" id="marker-shortcode" readonly="readonly" /></div> |
| 45 |
<hr> |
| 46 |
<h2><?php esc_html_e('Examples', 'leaflet-map'); ?>:</h2> |
| 47 |
<div class="examples"> |
| 48 |
<?php |
| 49 |
$examples = array( |
| 50 |
__("Standard", 'leaflet-map') => array( |
| 51 |
'[leaflet-map zoom=12 lat=51.05 lng=-114.06]', |
| 52 |
), |
| 53 |
__("Many Markers!", 'leaflet-map') => array( |
| 54 |
'[leaflet-map zoom=10 lat=43.65 lng=-79.385]', |
| 55 |
'[leaflet-marker]', |
| 56 |
'[leaflet-marker lat=43.68 lng=-79.275]', |
| 57 |
'[leaflet-marker lat=43.67 lng=-79.4]', |
| 58 |
), |
| 59 |
__("Draggable Marker", 'leaflet-map') => array( |
| 60 |
'[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel]', |
| 61 |
'[leaflet-marker draggable]', |
| 62 |
), |
| 63 |
__("Marker Icon", 'leaflet-map') => array( |
| 64 |
'[leaflet-map zoom=14 address="Ha Ling, canmore" scrollwheel !detect-retina show_scale]', |
| 65 |
'[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]' |
| 66 |
), |
| 67 |
__("SVG Marker Icon", 'leaflet-map') => array( |
| 68 |
'[leaflet-map address="twilight lane, nova scotia" scrollwheel]', |
| 69 |
'[leaflet-marker svg background="#777" iconClass="dashicons dashicons-star-filled" color="gold"]My Favorite Place in the World[/leaflet-marker]' |
| 70 |
), |
| 71 |
__("Zoom Buttons", 'leaflet-map') => array( |
| 72 |
'[leaflet-map zoom=10 lat=48.855 lng=2.35 zoomcontrol !detect-retina]', |
| 73 |
), |
| 74 |
__("Marker Popup Messages (on click)", 'leaflet-map') => array( |
| 75 |
'[leaflet-map lat=59.913 lng=10.739 zoom=12]', |
| 76 |
'[leaflet-marker]OSLO![/leaflet-marker]', |
| 77 |
), |
| 78 |
__("Links In Marker Messages (visible)", 'leaflet-map') => array( |
| 79 |
'[leaflet-map lat=28.41 lng=-81.58 zoom=15 detect-retina]', |
| 80 |
'[leaflet-marker visible] Disney World! <a href="https://disneyworld.disney.go.com">Link</a> [/leaflet-marker]', |
| 81 |
), |
| 82 |
__("Basic Lines w/Scrollwheel", 'leaflet-map') => array( |
| 83 |
'[leaflet-map lat=41 lng=29 scrollwheel zoom=6]', |
| 84 |
'[leaflet-line latlngs="41, 29; 44, 18;"]' |
| 85 |
), |
| 86 |
__("Basic Polygon", 'leaflet-map') => array( |
| 87 |
'[leaflet-map fitbounds]', |
| 88 |
'[leaflet-polygon addresses="Miami; San Juan; Bermuda" color="green" fillColor="yellow"]<a href="https://en.wikipedia.org/wiki/Bermuda_Triangle" target="_blank">Bermuda Triangle</a>[/leaflet-polygon]' |
| 89 |
), |
| 90 |
__("Basic Circle", 'leaflet-map') => array( |
| 91 |
'[leaflet-map lat=52 lng=5 zoom=8.2 zoomcontrol !show_scale]', |
| 92 |
'[leaflet-circle lat=52 lng=5 radius=17500]', |
| 93 |
'[leaflet-scale position=topright]' |
| 94 |
), |
| 95 |
__("Fitted Colored Line on Addresses", 'leaflet-map') => array( |
| 96 |
'[leaflet-map fitbounds]', |
| 97 |
'[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;"]' |
| 98 |
), |
| 99 |
__("More Crazy Line Attributes", 'leaflet-map') => array( |
| 100 |
'[leaflet-map fitbounds]', |
| 101 |
'[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants]' |
| 102 |
), |
| 103 |
__("Disable all Interaction", 'leaflet-map') => array( |
| 104 |
'[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom !show_scale]', |
| 105 |
), |
| 106 |
__("Add GeoJSON by URL", 'leaflet-map') => array( |
| 107 |
'[leaflet-map fitbounds scrollwheel]', |
| 108 |
'[leaflet-geojson src=https://gist.githubusercontent.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/ee100561f5a0a8cf55430e9f2157e4a1e2560a2e/map.geojson]' |
| 109 |
), |
| 110 |
__("Add GeoJSON with circle markers and popups", 'leaflet-map') => array( |
| 111 |
'[leaflet-map fitbounds scrollwheel]', |
| 112 |
'[leaflet-geojson circleMarker radius=10 src=https://gist.githubusercontent.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/ee100561f5a0a8cf55430e9f2157e4a1e2560a2e/map.geojson]{popup-text}[/leaflet-geojson]' |
| 113 |
), |
| 114 |
__("Add KML by URL", 'leaflet-map') => array( |
| 115 |
'[leaflet-map fitbounds]', |
| 116 |
'[leaflet-kml src=https://cdn.jsdelivr.net/gh/mapbox/togeojson@master/test/data/polygon.kml fillColor=red color=white]' |
| 117 |
), |
| 118 |
__("Add GPX by URL", 'leaflet-map') => array( |
| 119 |
'[leaflet-map fitbounds]', |
| 120 |
'[leaflet-gpx src=https://cdn.jsdelivr.net/gh/mapbox/togeojson@master/test/data/run.gpx color=black]' |
| 121 |
), |
| 122 |
__("Keep them in Newfoundland", 'leaflet-map') => array( |
| 123 |
'[leaflet-map maxbounds="46.22545288226939, -59.61181640625;51.72702815704774, -52.36083984375" zoom=5 zoomcontrol]', |
| 124 |
), |
| 125 |
__("Image Map", 'leaflet-map') => array( |
| 126 |
'[leaflet-image zoom=1 zoomcontrol scrollwheel !attribution]', |
| 127 |
'[leaflet-marker draggable]' |
| 128 |
), |
| 129 |
__("Image Overlay Map", 'leaflet-map') => array( |
| 130 |
'[leaflet-map fitbounds]', |
| 131 |
'[leaflet-image-overlay]', |
| 132 |
), |
| 133 |
__("Video Overlay Map", 'leaflet-map') => array( |
| 134 |
'[leaflet-map fitbounds]', |
| 135 |
'[leaflet-video-overlay]', |
| 136 |
), |
| 137 |
__("WMS Map", 'leaflet-map') => array( |
| 138 |
'[leaflet-wms zoomControl zoom=5 lat=38.9252 lng=35.33203 attribution="For Those of Us in Turkey"]', |
| 139 |
), |
| 140 |
); |
| 141 |
|
| 142 |
foreach ($examples as $title => $collection) { |
| 143 |
echo '<div class="list-item">'; |
| 144 |
echo "<h3>$title</h3>"; |
| 145 |
foreach ($collection as $shortcode) { |
| 146 |
echo do_shortcode($shortcode); |
| 147 |
echo "<p>$shortcode</p>"; |
| 148 |
} |
| 149 |
echo '</div>'; |
| 150 |
} |
| 151 |
?> |
| 152 |
</div> |
| 153 |
</div> |
| 154 |
</div> |
| 155 |
</div> |
| 156 |
|
