Skip to content

Commit 2fb5f12

Browse files
pixelwattpixelwatt
committed
Initial release.
1 parent c4f549c commit 2fb5f12

File tree

2 files changed

+234
-2
lines changed

2 files changed

+234
-2
lines changed

‎README.md

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,30 @@
1-
# cmb2-mapbox
2-
Mapbox for CMB2
1+
# CMB2 Mapbox
2+
3+
![CMB2 Mapbox Banner](https://robclark.io/assets/cmb2mapbox_banner_new.jpg)
4+
5+
This plugin adds a new CMB2 fieldtype for adding a single point to a Mapbox map. This plugin requires CMB2 and a Mapbox access token.
6+
7+
![The field.](https://robclark.io/assets/cmb2mapbox_screenshot.jpg)
8+
9+
## Description
10+
11+
This is the initial release of a plugin that extends CMB2 by adding a new fieldtype called "mapbox_map", which allows content editors to add a single point to a map.
12+
13+
Location data for the chosen location is saved as an array under the meta key of your choice:
14+
15+
```
16+
Array
17+
(
18+
[lat] => 34.72724208492225
19+
[lng] => -86.58798437717418
20+
[lnglat] => -86.58798437717418,34.72724208492225
21+
)
22+
```
23+
24+
## Installation
25+
26+
1. Upload the `cmb2-mapbox` folder to the `/wp-content/plugins/` directory
27+
2. Activate the plugin through the 'Plugins' menu in WordPress
28+
3. Provide your Mapbox access token and optionally set the default map center by going to Settings > CMB2 Mapbox
29+
4. Add a mapbox_map field to a CMB2 metabox.
30+
5. Profit.

‎cmb2-mapbox.php

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<?php
2+
/*
3+
Plugin Name: CMB2 Mapbox
4+
Plugin URI:
5+
Description: This plugin adds a new CMB2 fieldtype for adding a single point to a Mapbox map. This plugin requires CMB2 and a Mapbox access token.
6+
Version: 1.0.0
7+
Author: Rob Clark
8+
Author URI: https://robclark.io
9+
License: GPLv2 or later
10+
Text Domain: cmb2-mapbox
11+
*/
12+
13+
add_action( 'cmb2_admin_init', 'cmb2_mapbox_options_metabox' );
14+
15+
function cmb2_mapbox_options_metabox() {
16+
17+
/**
18+
* Registers options page menu item and form.
19+
*/
20+
$cmb_options = new_cmb2_box(
21+
array(
22+
'id' => 'cmb2_mapbox_plugin_options_metabox',
23+
'title' => esc_html__( 'CMB2 Mapbox Configuration', 'cmb2-mapbox' ),
24+
'object_types' => array( 'options-page' ),
25+
26+
/*
27+
* The following parameters are specific to the options-page box
28+
* Several of these parameters are passed along to add_menu_page()/add_submenu_page().
29+
*/
30+
31+
'option_key' => 'cmb2_mapbox', // The option key and admin menu page slug.
32+
'menu_title' => esc_html__( 'CMB2 Mapbox', 'cmb2-mapbox' ), // Falls back to 'title' (above).
33+
'position' => 2, // Menu position. Only applicable if 'parent_slug' is left empty.
34+
'parent_slug' => 'options-general.php',
35+
'save_button' => esc_html__( 'Save Mapbox Settings', 'cmb2-mapbox' ), // The text for the options-page save button. Defaults to 'Save'.
36+
)
37+
);
38+
39+
$cmb_options->add_field(
40+
array(
41+
'name' => __( 'Access Token', 'cmb2-mapbox' ),
42+
'id' => 'api_token',
43+
'type' => 'textarea',
44+
)
45+
);
46+
47+
$cmb_options->add_field(
48+
array(
49+
'name' => __( 'Map Center', 'cmb2-mapbox' ),
50+
'id' => 'map_center',
51+
'type' => 'text',
52+
'attributes' => array(
53+
'placeholder' => 'lng, lat',
54+
),
55+
)
56+
);
57+
}
58+
59+
60+
function cmb2_mapbox_scripts() {
61+
wp_enqueue_style( 'mapbox-gl', 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css', array(), null );
62+
wp_enqueue_script( 'mapbox-gl', 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js', array(), null );
63+
if ( is_admin() ) {
64+
wp_enqueue_style( 'mapbox-gl-draw', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css', array(), null );
65+
wp_enqueue_script( 'mapbox-gl-draw', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js', array( 'mapbox-gl' ), null );
66+
}
67+
}
68+
69+
add_action( 'wp_enqueue_scripts', 'cmb2_mapbox_scripts' );
70+
add_action( 'admin_enqueue_scripts', 'cmb2_mapbox_scripts' );
71+
72+
function cmb2_render_mapbox_map_callback( $field, $value, $object_id, $object_type, $field_type ) {
73+
$options = get_option( 'cmb2_mapbox' );
74+
if ( is_array( $options ) ) {
75+
if ( isset( $options['api_token'] ) ) {
76+
$value = wp_parse_args(
77+
$value,
78+
array(
79+
'lat' => '',
80+
'lng' => '',
81+
'lnglat' => '',
82+
),
83+
);
84+
?>
85+
<div id='map' style='width: 100%; height: 400px;'></div>
86+
<script>
87+
mapboxgl.accessToken = '<?php echo $options['api_token']; ?>';
88+
var map = new mapboxgl.Map({
89+
container: 'map',
90+
style: 'mapbox://styles/mapbox/streets-v11',
91+
<?php if ( ! empty( $value['lnglat'] ) ) { ?>
92+
zoom: 13,
93+
center: [<?php echo $value['lnglat']; ?>]
94+
<?php } else { ?>
95+
zoom: 11<?php echo ( isset( $options['map_center'] ) ? ',center: [' . $options['map_center'] . ']' : '' ); ?>
96+
<?php } ?>
97+
});
98+
map.addControl(new mapboxgl.NavigationControl());
99+
var draw = new MapboxDraw({
100+
displayControlsDefault: false,
101+
controls: {
102+
point: true,
103+
trash: true
104+
},
105+
styles: [
106+
{
107+
'id': 'highlight-active-points',
108+
'type': 'circle',
109+
'filter': ['all',
110+
['==', '$type', 'Point'],
111+
['==', 'meta', 'feature'],
112+
['==', 'active', 'true']],
113+
'paint': {
114+
'circle-radius': 8,
115+
'circle-color': '#F29F05'
116+
}
117+
},
118+
{
119+
'id': 'points-are-blue',
120+
'type': 'circle',
121+
'filter': ['all',
122+
['==', '$type', 'Point'],
123+
['==', 'meta', 'feature'],
124+
['==', 'active', 'false']],
125+
'paint': {
126+
'circle-radius': 6,
127+
'circle-color': '#3868A6'
128+
}
129+
}
130+
]
131+
});
132+
map.addControl(draw);
133+
134+
map.on('draw.create', updateEditor);
135+
map.on('draw.delete', updateEditor);
136+
map.on('draw.update', updateEditor);
137+
138+
function updateEditor(e) {
139+
if (e.type !== 'draw.delete') {
140+
var data = draw.getAll();
141+
if (data.features.length > 1) {
142+
draw.delete( data.features[0].id );
143+
data.features.shift();
144+
}
145+
var coords = String( data.features[0].geometry.coordinates ).split(",");
146+
document.getElementById("map_lnglat").value = data.features[0].geometry.coordinates;
147+
document.getElementById("map_lng").value = coords[0];
148+
document.getElementById("map_lat").value = coords[1];
149+
} else {
150+
draw
151+
.deleteAll()
152+
.getAll();
153+
document.getElementById("map_lnglat").value = '';
154+
document.getElementById("map_lng").value = '';
155+
document.getElementById("map_lat").value = '';
156+
}
157+
}
158+
<?php if ( ! empty( $value['lnglat'] ) ) { ?>
159+
map.on('load', function() {
160+
draw.add({ type: 'Point', coordinates: [<?php echo $value['lnglat']; ?>] });
161+
});
162+
<?php } ?>
163+
</script>
164+
<div style="display: none; visibility: hidden;">
165+
<p><label for="<?php echo $field_type->_id( '_lat' ); ?>">Marker Latitude (Manual Entry)</label></p>
166+
<?php
167+
echo $field_type->input(
168+
array(
169+
'name' => $field_type->_name( '[lat]' ),
170+
'id' => $field_type->_id( '_lat' ),
171+
'value' => $value['lat'],
172+
'desc' => '',
173+
)
174+
);
175+
?>
176+
<p><label for="<?php echo $field_type->_id( '_lng' ); ?>">Marker Longitude (Manual Entry)</label></p>
177+
<?php
178+
echo $field_type->input(
179+
array(
180+
'name' => $field_type->_name( '[lng]' ),
181+
'id' => $field_type->_id( '_lng' ),
182+
'value' => $value['lng'],
183+
'desc' => '',
184+
)
185+
);
186+
?><br><br>
187+
<?php
188+
echo $field_type->input(
189+
array(
190+
'name' => $field_type->_name( '[lnglat]' ),
191+
'id' => $field_type->_id( '_lnglat' ),
192+
'value' => $value['lnglat'],
193+
'desc' => '',
194+
)
195+
);
196+
?>
197+
</div>
198+
<?php
199+
}
200+
}
201+
202+
}
203+
204+
add_filter( 'cmb2_render_mapbox_map', 'cmb2_render_mapbox_map_callback', 10, 5 );

0 commit comments

Comments
 (0)