| 1 |
<style> |
| 2 |
.marching-ants { |
| 3 |
animation: dash 35s infinite linear; |
| 4 |
} |
| 5 |
|
| 6 |
@keyframes dash { |
| 7 |
to { |
| 8 |
stroke-dashoffset: -1000; |
| 9 |
} |
| 10 |
} |
| 11 |
</style> |
| 12 |
|
| 13 |
<div class="wrap"> |
| 14 |
<h2>Shortcode Helper</h2> |
| 15 |
<div class="wrap"> |
| 16 |
<?php |
| 17 |
$drag = __('Drag Me', 'leaflet-map'); |
| 18 |
|
| 19 |
echo do_shortcode('[leaflet-map zoom=2 zoomcontrol=1 doubleClickZoom=1 height=300 scrollwheel=1]'); |
| 20 |
echo do_shortcode(sprintf('[leaflet-marker draggable=1 visible="true"] %s [/leaflet-marker]', |
| 21 |
$drag |
| 22 |
)); |
| 23 |
?> |
| 24 |
<div class="wrap"> |
| 25 |
<hr> |
| 26 |
<h2><?php _e('Interactive Shortcodes:', 'leaflet-map'); ?></h2> |
| 27 |
<p class="description"><?php _e('Move the map and the marker to generate shortcodes below:', 'leaflet-map'); ?></p> |
| 28 |
<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> |
| 29 |
<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> |
| 30 |
<hr> |
| 31 |
<h2><?php _e('Examples', 'leaflet-map'); ?>:</h2> |
| 32 |
<div class="examples"> |
| 33 |
<?php |
| 34 |
$examples = array( |
| 35 |
__("Standard", 'leaflet-map') => array( |
| 36 |
'[leaflet-map zoom=12 lat=51.05 lng=-114.06]', |
| 37 |
), |
| 38 |
__("Many Markers!", 'leaflet-map') => array( |
| 39 |
'[leaflet-map zoom=10 lat=43.65 lng=-79.385]', |
| 40 |
'[leaflet-marker]', |
| 41 |
'[leaflet-marker lat=43.68 lng=-79.275]', |
| 42 |
'[leaflet-marker lat=43.67 lng=-79.4]', |
| 43 |
), |
| 44 |
__("Draggable Marker", 'leaflet-map') => array( |
| 45 |
'[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel=1]', |
| 46 |
'[leaflet-marker draggable=1]', |
| 47 |
), |
| 48 |
__("Marker Icon", 'leaflet-map') => array( |
| 49 |
'[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel=1]', |
| 50 |
'[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]' |
| 51 |
), |
| 52 |
__("Zoom Buttons", 'leaflet-map') => array( |
| 53 |
'[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol=1]', |
| 54 |
), |
| 55 |
__("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array( |
| 56 |
'[leaflet-map zoom=2 scrollwheel=1 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."]', |
| 57 |
), |
| 58 |
__("Marker Popup Messages (on click)", 'leaflet-map') => array( |
| 59 |
'[leaflet-map lat=59.913 lng=10.739 zoom=12]', |
| 60 |
'[leaflet-marker]OSLO![/leaflet-marker]', |
| 61 |
), |
| 62 |
__("Links In Marker Messages (visible)", 'leaflet-map') => array( |
| 63 |
'[leaflet-map lat=28.41 lng=-81.58 zoom=15]', |
| 64 |
'[leaflet-marker visible="true"] Disney World! <a href="https://disneyworld.disney.go.com">Link</a> [/leaflet-marker]', |
| 65 |
), |
| 66 |
__("Basic Lines w/Scrollwheel", 'leaflet-map') => array( |
| 67 |
'[leaflet-map lat=41 lng=29 scrollwheel=1 zoom=6]', |
| 68 |
'[leaflet-line latlngs="41, 29; 44, 18;"]' |
| 69 |
), |
| 70 |
__("Fitted Colored Line on Addresses", 'leaflet-map') => array( |
| 71 |
'[leaflet-map]', |
| 72 |
'[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline=1]' |
| 73 |
), |
| 74 |
__("More Crazy Line Attributes", 'leaflet-map') => array( |
| 75 |
'[leaflet-map]', |
| 76 |
'[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants fitbounds=1]' |
| 77 |
), |
| 78 |
__("Disable all Interaction", 'leaflet-map') => array( |
| 79 |
'[leaflet-map address="las vegas" boxZoom=false doubleClickZoom=false dragging=false keyboard=false scrollwheel=0 attribution=0]', |
| 80 |
), |
| 81 |
__("Add GeoJSON by URL (with popups)", 'leaflet-map') => array( |
| 82 |
'[leaflet-map doubleClickZoom=true scrollwheel=true]', |
| 83 |
'[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds=1 popup_property="popup-text"]' |
| 84 |
), |
| 85 |
__("Test Image Map", 'leaflet-map') => array( |
| 86 |
'[leaflet-image zoom=1 zoomcontrol=1 scrollwheelzoom=1 attribution=0]', |
| 87 |
'[leaflet-marker]' |
| 88 |
) |
| 89 |
); |
| 90 |
|
| 91 |
foreach ($examples as $title => $collection) { |
| 92 |
echo '<div class="list-item">'; |
| 93 |
echo "<h3>$title</h3>"; |
| 94 |
foreach ($collection as $shortcode) { |
| 95 |
echo do_shortcode($shortcode); |
| 96 |
echo "<p>$shortcode</p>"; |
| 97 |
} |
| 98 |
echo '</div>'; |
| 99 |
} |
| 100 |
?> |
| 101 |
</div> |
| 102 |
</div> |
| 103 |
</div> |
| 104 |
</div> |
