| 1 |
<?php |
| 2 |
/** |
| 3 |
* Shortcode Helper Page |
| 4 |
* |
| 5 |
* PHP Version 5.5 |
| 6 |
* |
| 7 |
* @category Admin |
| 8 |
* @author Benjamin J DeLong <ben@bozdoz.com> |
| 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 |
</style> |
| 22 |
|
| 23 |
<div class="wrap"> |
| 24 |
<h2>Shortcode Helper</h2> |
| 25 |
<div class="wrap"> |
| 26 |
<?php |
| 27 |
$drag = __('Drag Me', 'leaflet-map'); |
| 28 |
|
| 29 |
echo do_shortcode('[leaflet-map zoom=2 zoomcontrol doubleClickZoom height=300 scrollwheel]'); |
| 30 |
echo do_shortcode(sprintf('[leaflet-marker draggable visible] %s [/leaflet-marker]', |
| 31 |
$drag |
| 32 |
)); |
| 33 |
?> |
| 34 |
<div class="wrap"> |
| 35 |
<hr> |
| 36 |
<h2><?php _e('Interactive Shortcodes:', 'leaflet-map'); ?></h2> |
| 37 |
<p class="description"><?php _e('Move the map and the marker to generate shortcodes below:', 'leaflet-map'); ?></p> |
| 38 |
<div class="flex"><label class="h3" for="map-shortcode"><?php _e('Map Shortcode', 'leaflet-map'); ?></label> <input type="text" id="map-shortcode" readonly="readonly" /></div> |
| 39 |
<div class="flex"><label class="h3" for="marker-shortcode"><?php _e('Marker Shortcode', 'leaflet-map'); ?></label> <input type="text" id="marker-shortcode" readonly="readonly" /></div> |
| 40 |
<hr> |
| 41 |
<h2><?php _e('Examples', 'leaflet-map'); ?>:</h2> |
| 42 |
<div class="examples"> |
| 43 |
<?php |
| 44 |
$examples = array( |
| 45 |
__("Standard", 'leaflet-map') => array( |
| 46 |
'[leaflet-map zoom=12 lat=51.05 lng=-114.06]', |
| 47 |
), |
| 48 |
__("Many Markers!", 'leaflet-map') => array( |
| 49 |
'[leaflet-map zoom=10 lat=43.65 lng=-79.385]', |
| 50 |
'[leaflet-marker]', |
| 51 |
'[leaflet-marker lat=43.68 lng=-79.275]', |
| 52 |
'[leaflet-marker lat=43.67 lng=-79.4]', |
| 53 |
), |
| 54 |
__("Draggable Marker", 'leaflet-map') => array( |
| 55 |
'[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel]', |
| 56 |
'[leaflet-marker draggable]', |
| 57 |
), |
| 58 |
__("Marker Icon", 'leaflet-map') => array( |
| 59 |
'[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel]', |
| 60 |
'[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]' |
| 61 |
), |
| 62 |
__("SVG Marker Icon", 'leaflet-map') => array( |
| 63 |
'[leaflet-map address="twilight lane, nova scotia" scrollwheel]', |
| 64 |
'[leaflet-marker svg background="#654" iconClass="dashicons dashicons-star-filled" color="gold"]My Favorite Place in the World[/leaflet-marker]' |
| 65 |
), |
| 66 |
__("Zoom Buttons", 'leaflet-map') => array( |
| 67 |
'[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol]', |
| 68 |
), |
| 69 |
__("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array( |
| 70 |
'[leaflet-map zoom=2 scrollwheel lat=-2.507 lng=32.902 tileurl=https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg subdomains=abcd attribution="Map tiles by Stamen Design, under CC BY 3.0."]', |
| 71 |
), |
| 72 |
__("Marker Popup Messages (on click)", 'leaflet-map') => array( |
| 73 |
'[leaflet-map lat=59.913 lng=10.739 zoom=12]', |
| 74 |
'[leaflet-marker]OSLO![/leaflet-marker]', |
| 75 |
), |
| 76 |
__("Links In Marker Messages (visible)", 'leaflet-map') => array( |
| 77 |
'[leaflet-map lat=28.41 lng=-81.58 zoom=15]', |
| 78 |
'[leaflet-marker visible="true"] Disney World! <a href="https://disneyworld.disney.go.com">Link</a> [/leaflet-marker]', |
| 79 |
), |
| 80 |
__("Basic Lines w/Scrollwheel", 'leaflet-map') => array( |
| 81 |
'[leaflet-map lat=41 lng=29 scrollwheel zoom=6]', |
| 82 |
'[leaflet-line latlngs="41, 29; 44, 18;"]' |
| 83 |
), |
| 84 |
__("Basic Circle", 'leaflet-map') => array( |
| 85 |
'[leaflet-map lat=52 lng=5 zoom=9]', |
| 86 |
'[leaflet-circle lat=52 lng=5 radius=17500]' |
| 87 |
), |
| 88 |
__("Fitted Colored Line on Addresses", 'leaflet-map') => array( |
| 89 |
'[leaflet-map]', |
| 90 |
'[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline]' |
| 91 |
), |
| 92 |
__("More Crazy Line Attributes", 'leaflet-map') => array( |
| 93 |
'[leaflet-map]', |
| 94 |
'[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants fitbounds]' |
| 95 |
), |
| 96 |
__("Disable all Interaction", 'leaflet-map') => array( |
| 97 |
'[leaflet-map address="las vegas" boxZoom=false doubleClickZoom=false dragging=false keyboard=false scrollwheel=0 attribution=0]', |
| 98 |
), |
| 99 |
__("Add GeoJSON by URL (with popups)", 'leaflet-map') => array( |
| 100 |
'[leaflet-map doubleClickZoom=true scrollwheel=true]', |
| 101 |
'[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds popup_property="popup-text"]' |
| 102 |
), |
| 103 |
__("Image Map", 'leaflet-map') => array( |
| 104 |
'[leaflet-image zoom=1 zoomcontrol scrollwheelzoom attribution=0]', |
| 105 |
'[leaflet-marker]' |
| 106 |
) |
| 107 |
); |
| 108 |
|
| 109 |
foreach ($examples as $title => $collection) { |
| 110 |
echo '<div class="list-item">'; |
| 111 |
echo "<h3>$title</h3>"; |
| 112 |
foreach ($collection as $shortcode) { |
| 113 |
echo do_shortcode($shortcode); |
| 114 |
echo "<p>$shortcode</p>"; |
| 115 |
} |
| 116 |
echo '</div>'; |
| 117 |
} |
| 118 |
?> |
| 119 |
</div> |
| 120 |
</div> |
| 121 |
</div> |
| 122 |
</div> |
