Context Navigation

← Previous Changeset
Next Changeset →

Changeset 2368995

Timestamp:

08/25/2020 08:58:49 PM (6 years ago)

Author:

tempranova

Message:

update to 3.0.0

Location:

wp-mapbox-gl-js

Files:

: 2460 added
: 3 deleted
: 10 edited

Legend:

: Unmodified
: Added
: Removed

wp-mapbox-gl-js/trunk/admin/class-wp-mapbox-gl-js-admin.php

-                      r2005792
+                      r2368995
         wp_enqueue_style('wp_mapbox_gl_js_react-css', plugin_dir_url( __FILE__ ) . '/wp-mapmaker/public/css/style.css', array(), mt_rand(10,1000), 'all' );
         wp_enqueue_style( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . '/css/wp-mapbox-gl-js-admin.css', array(), $this->version, 'all' );
+        wp_enqueue_style('wp_mapbox_gl_js_balloon', plugin_dir_url( __FILE__ ) . '/css/balloon.css', array(), mt_rand(10,1000), 'all' );
+        wp_enqueue_style('wp_mapbox_gl_js_rc_slider', plugin_dir_url( __FILE__ ) . '/css/rc-slider.min.css', array(), mt_rand(10,1000), 'all' );
+    }
 …
         if( is_object( $screen ) && $cpt == $screen->post_type ){
+                    wp_enqueue_script('wp_mapbox_gl_js_react', plugin_dir_url( __FILE__ ) . '/wp-mapmaker/build/static/js/main.8802e6f7.js', '', '', true);
+                    wp_enqueue_script( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . '/js/wp-mapbox-gl-js-admin.js', array('jquery'), $this->version, 'all' );
+                    // PROD
+                    // if (!in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
+                    // code for localhost here
+                        // PROD
+                        $JSfiles = scandir(dirname(__FILE__) . '/wp-mapmaker/build/static/js/');
+                        $react_js_to_load = '';
+                        foreach($JSfiles as $filename) {
+                            if(strpos($filename,'.js')&&!strpos($filename,'.js.map')) {
+                                $react_js_to_load = plugin_dir_url( __FILE__ ) . 'wp-mapmaker/build/static/js/' . $filename;
+                            }
+                        }
+                    // } else {
+                    //  $react_js_to_load = 'http://localhost:3000/static/js/bundle.js';
+                    // }
+                    // React dynamic loading
+                    wp_register_script('wp_mapbox_gl_js_react', $react_js_to_load, '', mt_rand(10,1000), true);
+                    wp_localize_script('wp_mapbox_gl_js_react', 'params', array(
+                        'nonce' => wp_create_nonce('wp_rest'),
+                        'nonce_verify' => wp_verify_nonce($_REQUEST['X-WP-Nonce'], 'wp_rest')
+                    ));
+                    wp_enqueue_script( 'wp_mapbox_gl_js_react' );
+                    // Loading for auxiliary maps
+                    wp_enqueue_script('mapbox_gl_js', 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js', array('jquery'), '', false);
+                    wp_enqueue_script( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . '/js/wp-mapbox-gl-js-admin.js', array('mapbox_gl_js'), mt_rand(10,1000), 'all' );
+        }
     } else {
             wp_enqueue_script('mapbox_gl_js', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js', array(), '', false);
+            wp_enqueue_script('mapbox_gl_js', 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js', array(), '', false);
             wp_enqueue_script( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . '/js/wp-mapbox-gl-js-admin.js', array('jquery'), $this->version, 'all' );
+        }
 …
             array(
                 'labels' => array(
                     'name' => 'Mapbox Maps',
                     'singular_name' => 'Mapbox Map',
+                    'name' => 'GL JS Maps',
+                    'singular_name' => 'GL JS Map',
                     'add_new' => 'Add New',
                     'add_new_item' => 'Add New Map',
 …
                     'slug' => 'maps', 'with_front' => TRUE
                 ),
                 'supports' => array( 'title' ),
                 'taxonomies' => array( '' ),
+                'supports' => array( 'title','editor','thumbnail','revisions','custom-fields','excerpt'),
+                'taxonomies' => array( 'gl_js_maps_category' ),
                 'menu_icon' => 'dashicons-admin-site',
                 'has_archive' => true
+            )
         );
+            register_taxonomy( 'gl_js_maps_category', 'gl_js_maps', array(
+                    'labels' => array(
+                            'name' => 'Maps Categories',
+                            'singular_name' => 'Maps Categories',
+                            'add_new' => 'Add New Category',
+                            'add_new_item' => 'Add New Map Category',
+                            'edit' => 'Edit',
+                            'edit_item' => 'Edit Map Category',
+                            'new_item' => 'New Map Category',
+                            'view' => 'View',
+                            'view_item' => 'View Map Category',
+                            'search_items' => 'Search Category',
+                            'not_found' => 'No Map Categories found',
+                            'not_found_in_trash' => 'No Categories found in Trash',
+                            'parent' => 'Parent Category'
+                    ),
+                    'hierarchical' => true,
+                    'show_admin_column' => true
+            ) );
+            $set = get_option( 'post_type_rules_flushed_gl_js_maps' );
+            if ( $set !== true ){
+            flush_rewrite_rules( false );
+            update_option( 'post_type_rules_flushed_gl_js_maps', true );
+            }
+            // Disable gutenberg
+            function wp_mapbox_gl_js_disable_gutenberg($is_enabled, $post_type) {
+                if ($post_type === 'gl_js_maps')  {
+                    return false;
+                }
+                return $is_enabled;
+            }
+            add_filter('use_block_editor_for_post_type', 'wp_mapbox_gl_js_disable_gutenberg', 10, 2);
             // Create default option
 …
                 <div class="wp_mapbox_gl_js_editor_content_container">
                     <?php wp_editor('', 'wp_mapbox_gl_js_editor_content', array('quicktags'=>false)); ?>
+                    <?php wp_editor('', 'wp_mapbox_gl_js_editor_content' ); ?>
                 </div>
 …
                 if($map_object) { ?>
                     [wp_mapbox_gl_js map_id="<?php echo $post->ID; ?>"]
                     <p><em><a href="https://www.mapster.me/wp-mapbox-gl-js/docs/map-creator/" target="_blank">Need help?</a></em></p>
+                    <p><em><a href="http://mapster.me/wp-mapbox-gl-js" target="_blank">Need help?</a></em></p>
                 <?php } else { ?>
                     <p><em>A code you can use to add your map to posts and widgets will appear here after you save your map.</em></pre></p>
+                    <p>A code you can use to add your map to posts and widgets will appear here after you save your map.</p>
                 <?php }
+            }
 …
             ?>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_location_search" /> Location Search</p>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_location_search" /> Location Search </p>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_controls_geolocater" /> Geolocate <span data-balloon-length="medium" data-balloon="Your website needs HTTPS for the geolocator to appear." data-balloon-pos="left" class="wp_mapbox_gl_js_tooltip">?</span></p>
             <p><input type="checkbox" id="wp_mapbox_gl_js_distance" /> Distance scale</p>
             <p><input type="checkbox" id="wp_mapbox_gl_js_zoompan" /> Zoom & Pan</p>
             <p><input type="checkbox" id="wp_mapbox_gl_js_fullscreen" /> Fullscreen</p>
             <p><input type="checkbox" id="wp_mapbox_gl_js_directions" /> Directions</p>
+            <p id="wp_mapbox_gl_js_directions_pre_fill_checkbox">
+                <input type="checkbox" id="wp_mapbox_gl_js_directions_pre_fill_input" />
+                Pre-Fill Directions <span data-balloon="Whatever you put into the Directions Input will be saved." data-balloon-length="medium" data-balloon-pos="left" class="wp_mapbox_gl_js_tooltip">?</span>
+            </p>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_scroll_zoom" /> Scroll on Zoom</p>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_category_filter" /> Custom Feature Filter <span data-balloon-length="medium" data-balloon="Allows you to create custom categories to filter map features." data-balloon-pos="left" class="wp_mapbox_gl_js_tooltip">?</span></p>
+                <div id="wp_mapbox_gl_js_category_creator">
+                    <div>
+              <input type="text" class="widefat" id="category_filter_input" />
+              <button class="button" id="category_filter_input_submit">Create Category</button>
+                    </div>
+                </div>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_layer_filter" /> Custom Layer Filter <span data-balloon-length="medium" data-balloon="Allows you to create filter Mapbox style layers." data-balloon-pos="left" class="wp_mapbox_gl_js_tooltip">?</span></p>
+                <div id="wp_mapbox_gl_js_layer_creator">
+                    <div>
+                        <select multiple="multiple" id="wp_mapbox_gl_js_layer_select">
+                        </select>
+                    </div>
+                </div>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_location_sidebar" /> Location Sidebar <span data-balloon-length="medium" data-balloon="This will create a list of locations on the side of your map." data-balloon-pos="left" class="wp_mapbox_gl_js_tooltip">?</span></p>
+            <p><input type="checkbox" id="wp_mapbox_gl_js_cluster_markers" /> Cluster Markers</p>
             <?php
 …
             <p>OR enter your own custom style.</p>
             <input type="text" class='widefat' id="wp-mapbox-gl-js-custom-style" />
+            <p><em>Confused? <a href="https://www.mapster.me/wp-mapbox-gl-js/docs/map-creator/" target="_blank">Watch our quick help video!</a></em></p>
+            <p><em>Confused? <a href="http://mapster.me/wp-mapbox-gl-js" target="_blank">Watch our quick help videos!</a></em></p>
+            <p><strong>Preset Initial Map View</strong></p>
+            <input type="checkbox" id="wp-mapbox-gl-js-set-current-map-view" checked="checked"> Set to current map view<br />
+            <?php if(get_post_meta( $post->ID, 'wp_mapbox_gl_js_hidden_in_post', true)) { ?>
+                <input type="checkbox" id="wp-mapbox-gl-js-set-current-map-view-in-post" name="wp_mapbox_gl_js_hidden_in_post" value="checked"> Show map in post<br /><br />
+            <?php } else { ?>
+                <input type="checkbox" id="wp-mapbox-gl-js-set-current-map-view-in-post" name="wp_mapbox_gl_js_hidden_in_post" value="checked" checked="checked"> Show map in post<br /><br />
+            <?php } ?>
             <button class="wp-mapbox-gl-js-advanced-options-button button">Advanced options</button>
             <div class="wp-mapbox-gl-js-advanced-options">
+                <p><strong>Preset Initial Map View</strong></p>
+                <input type="checkbox" id="wp-mapbox-gl-js-set-current-map-view"> Set to current map view<br />
+                <p><input type="checkbox" class='widefat' id="wp-mapbox-gl-js-marker-overlap" /> Hide Markers on Overlap<br /></p>
                 <p>Center<br /><small><em>Coordinate location to start the map. In format "-123.40, 76.40".</small></em></p>
                 <input type="text" class='widefat' id="wp-mapbox-gl-js-center" />
 …
                 <p>Pitch<br /><small><em>This affects the "angle" the view sees the map from. Can be a number from 0 to 60.</small></em></p>
                 <input type="text" class='widefat' id="wp-mapbox-gl-js-pitch" />
+                <p><button class='button' id="wp-mapbox-gl-js-marker-hide" /> Hide marker popups on load <button></p>
             </div>
             <?php
+        }
+        add_meta_box(
+            'wp_mapbox_gl_js_dataset_management',
+            'GL JS Dataset Management',
+            'wp_mapbox_gl_js_dataset_management',
+            'gl_js_maps',
+            'side',
+            'low'
+        );
+        function wp_mapbox_gl_js_dataset_management( $post, $metabox ) {
+            $dataset_id = str_replace('"', "", get_post_meta($post->ID,'wp_mapbox_gl_js_dataset_id', true));
+            if(get_option('mapbox_gl_js_secret_access_token')&&get_option('mapbox_gl_js_secret_access_token')!=='') {
+                $datasetOK = false;
+                echo $dataset_id;
+                if($dataset_id!=="") {
+                    $curl = curl_init();
+                    curl_setopt ($curl, CURLOPT_URL, "https://api.mapbox.com/datasets/v1/".get_option( 'mapbox_gl_js_username' )."/".$dataset_id."?access_token=".get_option( 'mapbox_gl_js_secret_access_token' ));
+                    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
+                    $results = curl_exec ($curl);
+                    curl_close ($curl);
+                    $results = json_decode($results);
+                    if($results->id) {
+                        $datasetOK = true;
+                    }
+                }
+                if($dataset_id==""||!$datasetOK) {
+                    ?>
+                    <div>
+                        <input type="hidden" id="wp_mapbox_gl_js_username" value="<?php echo get_option( 'mapbox_gl_js_username' ); ?>" />
+                        <input type="hidden" id="wp_mapbox_gl_js_secret_token" value="<?php echo get_option( 'mapbox_gl_js_secret_access_token' ); ?>" />
+                        <p>This post is not associated with any Mapbox dataset.</p>
+                        <p>If you would like to associate it with a Mapbox feature from one of your datasets, select below.</p>
+                        <select id="wp_mapbox_gl_js_dataset_list" name="wp_mapbox_gl_js_dataset_list">
+                            <option value="">(no dataset selected)</option>
+                            <?php
+                                $curl = curl_init();
+                                curl_setopt ($curl, CURLOPT_URL, "https://api.mapbox.com/datasets/v1/".get_option( 'mapbox_gl_js_username' )."?access_token=".get_option( 'mapbox_gl_js_secret_access_token' ));
+                                curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
+                                $results = curl_exec ($curl);
+                                curl_close ($curl);
+                                $results = json_decode($results);
+                                foreach($results as $result) {
+                                    echo '<option value="'.$result->id.'">'.$result->name.'</option>';
+                                }
+                            ?>
+                        </select>
+                        <div class="wp_mapbox_gl_js_features">
+                            <h3>Add Features to Mapbox</h3>
+                            <button class="button" id="wp-mapbox-gl-js-to-dataset-add">Add features to Mapbox</button>
+                            <div id="wp-mapbox-gl-js-from-dataset-update-updated"><span>Updated Mapbox features.</div>
+                            <h3>Link Single Feature to Mapbox</h3>
+                            <p><small>See documentation for help on linking features.</small></p>
+                            <select id="wp_mapbox_gl_js_feature_list" name="wp_mapbox_gl_js_feature_list"></select>
+                            <input type="hidden" id="wp_mapbox_gl_js_dataset_id_set" name="wp_mapbox_gl_js_dataset_id_set" />
+                            <button class="button" id="set_wp_mapbox_gl_js_feature">Link feature to post</button>
+                            <div class="wp_mapbox_gl_js_dataset_error"></div>
+                        </div>
+                    </div>
+                    <?php
+                } else {
+                    $curl = curl_init();
+                    curl_setopt ($curl, CURLOPT_URL, "https://api.mapbox.com/datasets/v1/".get_option( 'mapbox_gl_js_username' )."/".$dataset_id."?access_token=".get_option( 'mapbox_gl_js_secret_access_token' ));
+                    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
+                    $results = curl_exec ($curl);
+                    curl_close ($curl);
+                    $results = json_decode($results);
+                    $map_object = json_decode(get_post_meta( $post->ID, 'wp_mapbox_gl_js_map_object', true ));
+                    $feature_ids = [];
+                    foreach($map_object->mapData as $feature) {
+                        array_push($feature_ids, $feature->id);
+                    }
+                    ?>
+                    <div>
+                        <input type="hidden" id="wp_mapbox_gl_js_username" value='<?php echo get_option( 'mapbox_gl_js_username' ); ?>' />
+                        <input type="hidden" id="wp_mapbox_gl_js_secret_token" value='<?php echo get_option( 'mapbox_gl_js_secret_access_token' ); ?>' />
+                        <input type="hidden" id="wp_mapbox_gl_js_features" value='<?php echo json_encode($feature_ids); ?>' />
+                        <input type="hidden" id="wp_mapbox_gl_js_dataset" value='<?php echo $dataset_id; ?>' />
+                        <p>This shows the features linked in this map as they currently appear in Mapbox.</p>
+                        <p>Dataset: <?php echo $results->name; ?></p>
+                        <div id="wp-mapbox-gl-js-dataset-map"></div>
+                        <br />
+                        <button id="wp-mapbox-gl-js-to-dataset-update" class="button">Update Mapbox features</button>
+                        <div id="wp-mapbox-gl-js-to-dataset-update-updated">Updated! Mapbox will take five minutes to update, but it worked!</div>
+                        <br />
+                        <button id="wp-mapbox-gl-js-to-dataset-delete" class="button">Delete Mapbox features</button>
+                        <div id="wp-mapbox-gl-js-to-dataset-update-deleted">Deleted! Mapbox will take five minutes to update, but it worked!</div>
+                        <br /><br />
+                        <button id="wp-mapbox-gl-js-from-dataset-update" class="button">Update post's features</button>
+                        <div id="wp-mapbox-gl-js-from-dataset-update-updated"><span>Updated <span id="wp-mapbox-gl-js-from-dataset-update-updated-number">0</span> features!</span> This post will save and reload in a moment.</div>
+                    </div>
+                    <?php
+                }
+            } else {
+                echo 'You must add your username and secret token in WP Mapbox Settings to use dataset management.';
+            }
+        }
+    }
 …
      */
     public function wp_mapbox_gl_js_admin_menu() {
+        add_menu_page('Maps Settings', 'Maps Settings', 'manage_options', 'wp-mapbox-gl-js-settings', function() { include 'wp-mapbox-gl-js-settings.php'; } );
+        add_menu_page('WP Mapbox', 'WP Mapbox', 'manage_options', 'wp-mapbox-gl-js-settings' );
+        add_submenu_page('wp-mapbox-gl-js-settings', 'WP Mapbox Settings', 'WP Mapbox Settings', 'manage_options', 'wp-mapbox-gl-js-settings', function() { include 'partials/wp-mapbox-gl-js-settings.php'; } );
+        add_submenu_page('wp-mapbox-gl-js-settings','WP Mapbox Tools', 'WP Mapbox Tools', 'manage_options', 'wp-mapbox-gl-js-tools', function() { include 'partials/wp-mapbox-gl-js-tools.php'; } );
+    }
 …
     public function move_above_editor() {
         global $post, $wp_meta_boxes;
         do_meta_boxes(get_current_screen(), 'gl_js_maps_context', $post);
         unset($wp_meta_boxes['gl_js_maps']['gl_js_maps_context']);
+        do_meta_boxes(get_current_screen(), 'advanced', $post);
+        unset($wp_meta_boxes['gl_js_maps']['advanced']);
+    }
 …
                 update_post_meta( $post_id, 'wp_mapbox_gl_js_map_object', $_POST['wp_mapbox_gl_js_map_object']);
+            }
+            if( isset( $_POST['wp_mapbox_gl_js_dataset_id_set'] ) && is_string($_POST['wp_mapbox_gl_js_dataset_id_set']) ) {
+                update_post_meta( $post_id, 'wp_mapbox_gl_js_dataset_id', $_POST['wp_mapbox_gl_js_dataset_id_set']);
+            }
+            if( isset( $_POST['wp_mapbox_gl_js_hidden_in_post'] ) && $_POST['wp_mapbox_gl_js_hidden_in_post']=='checked' ) {
+                update_post_meta( $post_id, 'wp_mapbox_gl_js_hidden_in_post', false);
+            } else {
+                update_post_meta( $post_id, 'wp_mapbox_gl_js_hidden_in_post', true);
+            }
+    }
 …
             <div class="notice notice-success is-dismissible">
               <img style="width: 50px;margin-top:10px;float:left;margin-right: 10px;" src="<?php echo plugins_url(); ?>/wp-mapbox-gl-js/admin/img/logo-Mapster.png" />
                     <h2>Nice work, you installed WP Mapbox GL JS Maps!</h2>
+                    <h2>Nice work, you installed WP Mapbox GL JS!</h2>
                     <p>Next, let's set up your Mapbox Access Token. Mapbox requires this in order to use their maps in a website. Go to <a href="<?php echo get_admin_url(); ?>/admin.php?page=wp-mapbox-gl-js-settings" target="_blank">the settings page</a> to enter yours.</p>
                     <p>If you're not sure what an Access Token is, we have lots of help available.</p>
 …
+    }
+    /**
+     * Add meta field we can set when uploading media
+     *
+     * @since    1.0.0
+     */
+    function wp_mapbox_gl_js_register_meta() {
+        register_meta('post', 'wp_mapbox_gl_js_media', array(
+          "type" => "string",
+          "show_in_rest" => true,
+      // 'single' => true
+        ));
+    }
+}

wp-mapbox-gl-js/trunk/admin/css/wp-mapbox-gl-js-admin.css

-                      r2005792
+                      r2368995
+.wp_mapbox_gl_js_staging {
+  display: none;
+}
 .wp-mapbox-gl-js-advanced-options {
   display: none;
 …
   background: #eee;
+}
+/* #wp_mapbox_gl_js_editor_content-html {
+  display: none;
+} */
+.wp-mapbox-gl-js-custom-icon-creator canvas {
+  /* float: right; */
+  /* max-width: 90%; */
+  /* min-width: 50px; */
+}
+.wp-mapbox-gl-js-custom-icon-creator #wp_mapbox_gl_js_canvas_img {
+  display: none;
+  height: 100px;
+  width: auto;
+}
+.wp-mapbox-gl-js-custom-icon-creator, .wp-mapbox-gl-js-property-editor {
+  transition: 1s;
+  visibility: hidden;
+    position: fixed;
+    z-index: 2000;
+    background:rgba(0,0,0,0.6);
+}
+/* end icon creator */
+.wp-mapbox-gl-js-custom-icon-creator.now-active, .wp-mapbox-gl-js-property-editor.now-active {
+  display: block;
+  visibility: visible;
+}
+.wp-mapbox-gl-js-custom-icon-creator-container {
+  width: 85%;
+  margin-top: 100px;
+  background: white;
+  margin-left: 7.5%;
+  display: flex;
+  text-align: center;
+}
+.wp-mapbox-gl-js-property-editor-container {
+  width: 85%;
+  margin-top: 100px;
+  background: white;
+  margin-left: 7.5%;
+  padding: 15px;
+}
+.wp-mapbox-gl-js-custom-icon-creator-editor {
+  /* width: 30%;
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 100px;
+  display: flex; */
+}
+.wp_mapbox_gl_js_actions {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin-right: 7.5%;
+}
+.wp-mapbox-gl-js-custom-icon-creator-icons {
+  overflow-y: scroll;
+  width: 80%;
+}
+.wp-mapbox-gl-js-custom-icon-creator-icons p {
+  padding: 0;
+  margin: 0;
+}
+.wp-mapbox-gl-js-custom-icon-creator-single-icon {
+  width: 50px;
+  padding: 10px;
+  display: inline-block;
+  text-align: center;
+  transition: 0.5s;
+}
+.wp-mapbox-gl-js-custom-icon-creator-single-icon:hover {
+  background: #efefef;
+  cursor: pointer;
+}
+.wp-mapbox-gl-js-custom-icon-creator-single-icon img {
+  width: 100%;
+  height: auto;
+  transition: 0.5s;
+  margin-bottom: 0px;
+  margin-top: 5px;
+}
+.wp-mapbox-gl-js-custom-icon-creator-single-icon:hover img {
+  margin-bottom: 5px;
+  margin-top: 0px;
+}
+#wp_mapbox_gl_js_category_creator, #wp_mapbox_gl_js_layer_creator {
+  display: none;
+  margin-left: 20px;
+}
+#wp_mapbox_gl_js_category_creator > div, #wp_mapbox_gl_js_layer_creator > div {
+  display: flex;
+}
+#category_filter_input {
+  width: 60%;
+}
+.wp-mapbox-gl-js-custom-category-control, .wp-mapbox-gl-js-custom-layer-control {
+  background: white;
+  padding: 5px;
+  box-shadow: 1px 1px 1px #333;
+  width: 200px;
+  min-height: 50px;
+}
+.wp-mapbox-gl-js-custom-category-control > div, .wp-mapbox-gl-js-custom-layer-control > div {
+  margin-top: 5px;
+}
+.wp-mapbox-gl-js-custom-category-control h3, .wp-mapbox-gl-js-custom-layer-control h3 {
+  margin: 0;
+  padding: 0;
+}
+/* tooltips */
+.wp_mapbox_gl_js_tooltip {
+  background: grey;
+  float: right;
+  color: white;
+  border-radius: 50%;
+  padding: 1px 6px;
+  cursor: pointer;
+}
+/* dataset management */
+.wp_mapbox_gl_js_dataset_error {
+  margin-top: 10px;
+}
+.wp_mapbox_gl_js_features {
+  display: none;
+}
+#wp-mapbox-gl-js-dataset-map {
+  height: 200px;
+  width: 100%;
+}
+#wp-mapbox-gl-js-to-dataset-update-updated, #wp-mapbox-gl-js-from-dataset-update-updated, #wp-mapbox-gl-js-from-dataset-update-updated-number, #wp-mapbox-gl-js-to-dataset-update-deleted {
+  display: none;
+  margin-top: 5px;
+}
+#wp_mapbox_gl_js_directions_pre_fill_checkbox, #wp_mapbox_gl_js_directions_pre_fill_btn_container {
+  display: flex;
+  flex-direction: column;
+  display: none;
+  margin-left: 10px;
+}
+.directions-btn {
+  width: 150px;
+}
+#select_origin_btn {
+  margin-bottom: 5px;
+}
+#wp_mapbox_gl_js_credentials {
+  display: none;
+}
+.wp-mapbox-gl-js-modal-options {
+  background: white;
+  padding: 10px;
+}

wp-mapbox-gl-js/trunk/admin/js/wp-mapbox-gl-js-admin.js

-                      r2005792
+                      r2368995
     'use strict';
+    // Check is post title exists
+    $(document).on('click','#publish',function(e) {
+        if($('#title').val()==='') {
+            e.preventDefault();
+            alert('Please ensure you give the map post a title. It will not save properly otherwise.');
+        }
+    });
+    $(document).on('click','#save-post',function(e) {
+        if($('#title').val()==='') {
+            e.preventDefault();
+            alert('Please ensure you give the map post a title. It will not save properly otherwise.');
+        }
+    });
+    // Setting up allowing users to set feature, doing API call to get features
+    $(document).on('change', '#wp_mapbox_gl_js_dataset_list', function(e) {
+        e.preventDefault();
+        $('#wp_mapbox_gl_js_dataset_id_set').val(e.target.value);
+        if(e.target.value!=='') {
+            $('.wp_mapbox_gl_js_features').show();
+            $.ajax({
+                url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+e.target.value+"/features?access_token="+$('#wp_mapbox_gl_js_secret_token').val()
+            }).done(function(data) {
+                // opt for using "name" or "Name" if it exists; otherwise use the first property
+                data.features.forEach(function(feature, index) {
+                    var featureName = '';
+                    if(featureName==='' && feature.properties.name) {
+                        featureName = feature.properties.name;
+                    }
+                    if(featureName==='' && feature.properties.Name) {
+                        featureName = feature.properties.Name;
+                    }
+                    if(featureName==='') {
+                        for(var prop in feature.properties) {
+                            featureName = feature.properties[prop];
+                        }
+                    }
+                    if(featureName==='') {
+                        featureName = 'Feature '+index;
+                    }
+                    $('#wp_mapbox_gl_js_feature_list').append('<option value="'+feature.id+'">'+featureName+'</option>');
+                })
+            });
+        } else {
+            $('.wp_mapbox_gl_js_features').hide();
+        }
+    });
+    // Toggling slider edit page
     $(document).on('click','.wp-mapbox-gl-js-advanced-options-button',function(e) {
         e.preventDefault();
 …
     });
+    if($('#toggle_wp_mapbox_gl_js_credentials').length) {
+        $(document).on('click','#toggle_wp_mapbox_gl_js_credentials',function(e) {
+            e.preventDefault();
+            $('#wp_mapbox_gl_js_credentials').slideToggle();
+        })
+    }
+    // Export functionality
+    $(document).on('click','#wp-mapbox-gl-js-export-button',function(e) {
+        function downloadTextFile(text, name) {
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL( new Blob([text], { type:`text/${name.split(".").pop()}` }) );
+          a.download = name;
+          a.click();
+        }
+        e.preventDefault();
+        if($('#wp-mapbox-gl-js-category-export').val()!=='') {
+            $.ajax({
+                url : $('#wp-mapbox-gl-js-plugins').val()+"/wp-mapbox-gl-js/admin/partials/wp-mapbox-gl-js-print.php?gl_js_maps_category="+$('#wp-mapbox-gl-js-category-export').val(),
+                method : 'GET',
+                dataType: "json",
+                contentType: "application/json;charset=utf-8"
+            }).done(function(data) {
+                downloadTextFile(JSON.stringify(data), $('#wp-mapbox-gl-js-category-export').val()+'.json');
+            });
+        }
+    });
+    // Testing to see if access token is correct
     if(window.location.href.indexOf("wp-mapbox-gl-js-settings") > -1) {
         try {
             var access_token = $('#mapbox_gl_js_access_token').val();
+            var access_token = $('#wp_mapbox_gl_js_access_token').val();
             mapboxgl.accessToken = access_token;
             var map = new mapboxgl.Map({
 …
             $('.dashicons-no').show();
+        }
-        // pk.eyJ1IjoidGVtcHJhbm92YSIsImEiOiJjaWd0c3M2MW4wOHI2dWNrbzZ5dWo1azVjIn0.x5sm8OjRxO9zO_uUmxYEqg
+    }
+})( jQuery );
+    // Dataset map management
+    $(document).on('click','#wp-mapbox-gl-js-to-dataset-add',function(e) {
+        e.preventDefault();
+        if(confirm('Are you sure you want to add these features in Mapbox? \n\n NOTE: it will take up to 10 minutes for Mapbox to show the changes in its dataset.')) {
+            var updatedFeatures = [];
+            var mapObject = JSON.parse($('#wp_mapbox_gl_js_map_object').val());
+            mapObject.mapData.forEach(function(feature) {
+                if(feature.id) {
+                    if(feature.properties.marker_icon_anchor==='bottom'||feature.properties.marker_icon_anchor==='center') {
+                        delete feature.properties.marker_icon_anchor;
+                    }
+                    if(feature.properties.popup_open) {
+                        delete feature.properties.popup_open;
+                    }
+                    if(feature.properties.marker_icon_url.indexOf('black_default.png')>-1) {
+                        delete feature.properties.marker_icon_url;
+                    }
+                    if(feature.properties.marker_title==='Line'||feature.properties.marker_title==='Fill'||feature.properties.marker_title==='Marker') {
+                        delete feature.properties.marker_title;
+                    }
+                    if(feature.properties.color==='#333') {
+                        delete feature.properties.color;
+                    }
+                    if(feature.properties.description==='Description') {
+                        delete feature.properties.description;
+                    }
+                    $.ajax({
+                        headers : { "Content-Type": "application/json"},
+                        url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+$('#wp_mapbox_gl_js_dataset_list').val()+"/features/"+feature.id+"?access_token="+$('#wp_mapbox_gl_js_secret_token').val(),
+                        method : "PUT",
+                        data : JSON.stringify(feature)
+                    }).done(function(data) {
+                        updatedFeatures.push(data);
+                        if(updatedFeatures.length===mapObject.mapData.length) {
+                            $('#wp-mapbox-gl-js-from-dataset-update-updated').fadeIn();
+                            setTimeout(function() {
+                                $('#publish').trigger('click');
+                            },1000);
+                        }
+                    });
+                }
+            });
+        }
+    });
+    if($('#wp_mapbox_gl_js_access_token').length && $('#wp-mapbox-gl-js-dataset-map').length) {
+        var access_token = $('#wp_mapbox_gl_js_access_token').val();
+        mapboxgl.accessToken = access_token;
+        var map = new mapboxgl.Map({
+            style : 'mapbox://styles/mapbox/light-v9',
+            container : 'wp-mapbox-gl-js-dataset-map'
+        });
+        // Load the features listed in the dataset
+        map.on('load',function() {
+            var features = [];
+            var featureIDs = JSON.parse($('#wp_mapbox_gl_js_features').val());
+            var bounds = new mapboxgl.LngLatBounds();
+            var count = 0;
+            featureIDs.forEach(function(feature, index) {
+                $.ajax({
+                    url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+$('#wp_mapbox_gl_js_dataset').val()+"/features/"+feature+"?access_token="+$('#wp_mapbox_gl_js_secret_token').val()
+                }).done(function(data) {
+                    // features.push(data);
+                    count += 1;
+                    if(data.geometry.type==="Point") {
+                    bounds.extend(data.geometry.coordinates);
+                    }
+                    if(data.geometry.type==="LineString") {
+                        data.geometry.coordinates.forEach(function(coord) {
+                        bounds.extend(coord);
+                        })
+                    }
+                    if(data.geometry.type==="Polygon") {
+                        data.geometry.coordinates[0].forEach(function(coord) {
+                        bounds.extend(coord);
+                        })
+                    }
+                    map.addSource('imported-'+index, {
+                        type : 'geojson',
+                        data : {
+                            type : "FeatureCollection",
+                            features : [data]
+                        }
+                    })
+                    if(data.geometry.type==='Point') {
+                        map.addLayer({
+                            id : 'imported-'+index,
+                            source : 'imported-'+index,
+                        type: "circle"
+                        });
+                    }
+                    if(data.geometry.type==='LineString'||data.geometry.type==='MultiLineString') {
+                        map.addLayer({
+                            id : 'imported-'+index,
+                            source : 'imported-'+index,
+                        type: "line"
+                        });
+                    }
+                    if(data.geometry.type==='Polygon'||data.geometry.type==='MultiPolygon') {
+                        map.addLayer({
+                            id : 'imported-'+index,
+                            source : 'imported-'+index,
+                        type: "fill"
+                        });
+                    }
+                    map.fitBounds(bounds);
+                });
+            });
+        });
+        $(document).on('click','#wp-mapbox-gl-js-to-dataset-delete',function(e) {
+            e.preventDefault();
+            if(confirm('Are you sure you want to completely delete these features in Mapbox? This cannot be reversed. \n\n NOTE: it will take up to 10 minutes for Mapbox to show the changes in its dataset.')) {
+                var updatedFeatures = [];
+                var mapObject = JSON.parse($('#wp_mapbox_gl_js_map_object').val());
+                mapObject.mapData.forEach(function(feature) {
+                    if(feature.id) {
+                        $.ajax({
+                            headers : { "Content-Type": "application/json"},
+                            url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+$('#wp_mapbox_gl_js_dataset').val()+"/features/"+feature.id+"?access_token="+$('#wp_mapbox_gl_js_secret_token').val(),
+                            method : "DELETE"
+                        }).done(function(data) {
+                            updatedFeatures.push(data);
+                            if(updatedFeatures.length===mapObject.mapData.length) {
+                                $('#wp-mapbox-gl-js-to-dataset-update-deleted').fadeIn();
+                            }
+                        });
+                    }
+                });
+            }
+        });
+        $(document).on('click','#wp-mapbox-gl-js-to-dataset-update',function(e) {
+            e.preventDefault();
+            if(confirm('Are you sure you want to send the features from this WP GL JS post to Mapbox? This is not easily reversed. \n\n NOTE: it will take up to 10 minutes for Mapbox to show the changes in its dataset.')) {
+                var updatedFeatures = [];
+                var mapObject = JSON.parse($('#wp_mapbox_gl_js_map_object').val());
+                mapObject.mapData.forEach(function(feature) {
+                    if(feature.id) {
+                        if(feature.properties.marker_icon_anchor==='bottom'||feature.properties.marker_icon_anchor==='center') {
+                            delete feature.properties.marker_icon_anchor;
+                        }
+                        if(feature.properties.popup_open) {
+                            delete feature.properties.popup_open;
+                        }
+                        if(feature.properties.marker_icon_url.indexOf('black_default.png')>-1) {
+                            delete feature.properties.marker_icon_url;
+                        }
+                        if(feature.properties.marker_title==='Line'||feature.properties.marker_title==='Fill'||feature.properties.marker_title==='Marker') {
+                            delete feature.properties.marker_title;
+                        }
+                        if(feature.properties.color==='#333') {
+                            delete feature.properties.color;
+                        }
+                        if(feature.properties.description==='Description') {
+                            delete feature.properties.description;
+                        }
+                        $.ajax({
+                            headers : { "Content-Type": "application/json"},
+                            url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+$('#wp_mapbox_gl_js_dataset').val()+"/features/"+feature.id+"?access_token="+$('#wp_mapbox_gl_js_secret_token').val(),
+                            method : "PUT",
+                            data : JSON.stringify(feature)
+                        }).done(function(data) {
+                            updatedFeatures.push(data);
+                            if(updatedFeatures.length===mapObject.mapData.length) {
+                                $('#wp-mapbox-gl-js-to-dataset-update-updated').fadeIn();
+                            }
+                        });
+                    }
+                });
+            }
+        });
+        $(document).on('click','#wp-mapbox-gl-js-from-dataset-update',function(e) {
+            e.preventDefault();
+            if(confirm('Are you sure you want to overwrite the features in this WP GL JS post using the latest data in your Mapbox dataset?')) {
+                var mapObject = JSON.parse($('#wp_mapbox_gl_js_map_object').val());
+                var currentNumber = parseInt($('#wp-mapbox-gl-js-from-dataset-update-updated-number').text());
+                var numberToMatch = 0;
+                mapObject.mapData.forEach(function(feature) {
+                    if(feature.id) {
+                        numberToMatch += 1;
+                        $.ajax({
+                            url : "https://api.mapbox.com/datasets/v1/"+$('#wp_mapbox_gl_js_username').val()+"/"+$('#wp_mapbox_gl_js_dataset').val()+"/features/"+feature.id+"?access_token="+$('#wp_mapbox_gl_js_secret_token').val(),
+                        }).done(function(data) {
+                            mapObject.mapData.forEach(function(thisMapData) {
+                                if(thisMapData.id===data.id) {
+                                    thisMapData.geometry = data.geometry;
+                                    for (var property in data.properties) {
+                                        thisMapData.properties[property] = data.properties[property];
+                                    }
+                                    currentNumber += 1;
+                                    $('#wp-mapbox-gl-js-from-dataset-update-updated').fadeIn();
+                                    $('#wp-mapbox-gl-js-from-dataset-update-updated-number').fadeIn();
+                                    $('#wp-mapbox-gl-js-from-dataset-update-updated-number').text(currentNumber);
+                                }
+                            });
+                            if(currentNumber===numberToMatch) {
+                                setTimeout(function() {
+                                    $('#wp_mapbox_gl_js_map_object').val(JSON.stringify(mapObject));
+                                    $('#publish').trigger('click');
+                                },1000);
+                            }
+                        });
+                    }
+                })
+            }
+        });
+    }
+})(jQuery);

wp-mapbox-gl-js/trunk/admin/wp-mapbox-gl-js-settings.php

-                      r2005792
+                      r2368995
 <div class="wrap">
     <h1>WP Mapbox GL JS Maps</h1>
+    <h1>WP Mapbox GL JS</h1>
     <p>Enter your <a href="https://www.mapbox.com/account/access-tokens" target="_blank">access token</a> here.
     <p><a href="https://www.mapster.me/wp-mapbox-gl-js/" target="_blank">Visit the documentation</a> to learn more about using the WP Mapbox GL JS shortcode. More features coming soon!</p>
+    <p><a href="http://www.mapster.me/wp-mapbox-gl-js/wp-mapbox-gl-js-shortcode-documentation/" target="_blank">Visit the documentation</a> to learn more about using the WP Mapbox GL JS shortcode. More features coming soon!</p>
   <form action="" method="POST">

wp-mapbox-gl-js/trunk/admin/wp-mapmaker/public/css/style.css

-                      r2005792
+                      r2368995
 .wp-mapbox-gl-js-tabs-left {
     width: 20%;
+}
+.wp-mapbox-gl-js-tabs-left ul {
+    margin-top: 0px;
+}
 .wp-mapbox-gl-js-tabs-left ul li {
 …
     margin-top: 10px;
+}
+.wp-mapbox-gl-js-dropzone > div {
+    padding: 15px;
+    font-size: 12px;
+    width: auto !important;
+    height: auto !important;
+}
 .wp-mapbox-gl-js-custom-draw-controls {
 …
     margin-bottom: 15px;
     width: 90px;
+    margin-left: -60px;
+    margin-left: -45px;
+    /* width: 150px;
+    margin-left: -75px; */
     margin-top: 340px;
+}
 …
+}
+#extrusion-input-container {
+    display: flex;
+}
+#extrusion-input-container label {
+    display: flex;
+    flex-direction: column;
+    margin-right: 5px;
+    width: 100px;
+}
+#controls-container {
+    display: flex;
+}
+#category-filter-container {
+    margin-top: auto;
+    max-width: 220px;
+    display: flex;
+    height: 28px;
+}
+#category-filter-container-btn {
+    margin-left: 5px;
+    width: 200px;
+}
+#category_filter_input_form_container {
+    margin-top: 5px;
+}
+#category_filter_input_form_container #category_filter_input_submit {
+    margin-top: 5px;
+}
 @keyframes fade-in-out {
 % {

wp-mapbox-gl-js/trunk/includes/class-wp-mapbox-gl-js.php

-                      r2005792
+                      r2368995
         $this->loader->add_action( 'add_meta_boxes', $plugin_admin, 'add_wp_mapbox_gl_js_meta_box' );
         $this->loader->add_action( 'init', $plugin_admin, 'create_gl_js_maps' );
+        $this->loader->add_action( 'init', $plugin_admin, 'wp_mapbox_gl_js_register_meta' );
         $this->loader->add_action( 'edit_form_after_title', $plugin_admin, 'move_above_editor' );
         $this->loader->add_action( 'save_post', $plugin_admin, 'wp_mapbox_gl_js_map_save' );
         $this->loader->add_action( 'admin_notices', $plugin_admin, 'wp_mapbox_gl_js_admin_notice' );
+    }
 …
         $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' );
     $this->loader->add_action( 'init', $plugin_public, 'register_shortcodes' );
+        $this->loader->add_filter( 'the_content', $plugin_public, 'wp_mapbox_gl_js_add_map_to_content' );
+    }

wp-mapbox-gl-js/trunk/public/class-wp-mapbox-gl-js-public.php

-                      r2356757
+                      r2368995
     public function enqueue_scripts() {
+            wp_enqueue_script('mapbox_gl_js', 'https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js', array('jquery'), '', false);
+            wp_enqueue_script('mapbox_gl_geocoder_js', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js', array('mapbox_gl_js'), '', false);
+            wp_enqueue_script('mapbox_gl_directions_js', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js', array('mapbox_gl_geocoder_js'), '', false);
+            wp_enqueue_script( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . 'js/wp-mapbox-gl-js-public.js', array( 'mapbox_gl_directions_js' ), mt_rand(10,1000), false );
+    }
+        wp_enqueue_script('mapbox_gl_js', 'https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js', array('jquery'), '', false);
+        wp_enqueue_script('mapbox_gl_geocoder_js', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js', array('mapbox_gl_js'), '', false);
+        wp_enqueue_script('mapbox_gl_directions_js', 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js', array('mapbox_gl_geocoder_js'), '', false);
+        wp_enqueue_script( $this->wp_mapbox_gl_js, plugin_dir_url( __FILE__ ) . 'js/wp-mapbox-gl-js-public.js', array( 'mapbox_gl_directions_js' ), mt_rand(10,1000), false );
+    }
     /**
 …
             'zoom' => '',
             'pitch' => '',
+            'bearing' => ''
+            'bearing' => '',
+            'scrollZoom' => '',
+            'mapCategories' => '',
+            'mapLayersFilter' => '',
         ), $atts, 'wp_mapbox_gl_js' );
 …
             // $map_post = get_post($atts['map_id']);
             $map_object = json_decode(get_post_meta( $atts['map_id'], 'wp_mapbox_gl_js_map_object', true ));
             // var_dump($map_object);
             $zoom = ($atts['zoom']=='' ? $map_object->zoom : esc_attr($atts['zoom']));
             $pitch = ($atts['pitch']=='' ? $map_object->pitch : esc_attr($atts['pitch']));
             $bearing = ($atts['bearing']=='' ? $map_object->bearing : esc_attr($atts['bearing']));
+            if(isset($map_object->scrollZoom)) {
+                $scrollZoom = ($atts['scrollZoom']=='' ? $map_object->scrollZoom : esc_attr($atts['scrollZoom']));
+            }
+            if(isset($map_object->controls->scrollZoom)) {
+                $scrollZoom = ($atts['scrollZoom']=='' ? $map_object->controls->scrollZoom : esc_attr($atts['scrollZoom']));
+            }
+            $mapCategories = ($atts['mapCategories']=='' ? $map_object->mapCategories : esc_attr($atts['mapCategories']));
+            $mapOrigin = ($atts['mapOrigin']=='' ? $map_object->preFillDirections->origin : esc_attr($atts['mapOrigin']));
+            $mapDestination = ($atts['mapDestination']=='' ? $map_object->preFillDirections->destination : esc_attr($atts['mapDestination']));
+            $mapLayersFilter = ($atts['mapLayersFilter']=='' ? $map_object->mapLayersFilter : esc_attr($atts['mapLayersFilter']));
             $center = ($atts['center']=='' ? implode(',',$map_object->center) : esc_attr($atts['center']));
             $style = $map_object->style;
 …
                     data-center='<?php echo $center; ?>'
                     data-zoom='<?php echo $zoom; ?>'
+                    data-scroll-zoom='<?php echo json_encode($scrollZoom); ?>'
                     data-pitch='<?php echo $pitch; ?>'
                     data-bearing='<?php echo $bearing; ?>'
                     data-style='<?php echo $style; ?>'
                     data-controls='<?php echo json_encode($map_object->controls); ?>'
                     data-mapdata='<?php echo json_encode($map_object->mapData); ?>'
+                    data-mapdata='<?php echo esc_html(json_encode($map_object->mapData)); ?>'
                     data-token='<?php echo get_option( 'mapbox_gl_js_access_token', true); ?>'
+                    data-map-categories='<?php echo json_encode($mapCategories); ?>'
+                    data-map-origin='<?php echo json_encode($mapOrigin); ?>'
+                    data-map-destination='<?php echo json_encode($mapDestination); ?>'
+                    data-map-layers-filter='<?php echo json_encode($mapLayersFilter); ?>'
                     class="wp-mapbox-gl-js-map" ></div>
             <?php
 …
                     data-center='<?php echo esc_attr($atts['center']); ?>'
                     data-zoom='<?php echo esc_attr($atts['zoom']); ?>'
+                    data-scrollZoom='<?php echo esc_attr($atts['scrollZoom']); ?>'
                     data-pitch='<?php echo esc_attr($atts['pitch']); ?>'
                     data-bearing='<?php echo esc_attr($atts['bearing']); ?>'
                     data-style='<?php echo esc_attr($first_style); ?>'
                     data-token='<?php echo get_option( 'mapbox_gl_js_access_token', true); ?>'
+                    data-map-categories='<?php echo json_encode($mapCategories); ?>'
+                    data-map-layers-filter='<?php echo json_encode($mapLayersFilter); ?>'
                     class="wp-mapbox-gl-js-map" ></div>
             </div>
 …
+    }
+    /**
+        * Add shortcode to map page
+        *
+        * @since 1.0.0
+        *
+    */
+    function wp_mapbox_gl_js_add_map_to_content( $content ) {
+        if ( is_singular('gl_js_maps') && get_post_meta( get_the_ID(), 'wp_mapbox_gl_js_hidden_in_post', true) ) {
+            return $content;
+        } elseif (is_singular('gl_js_maps')) {
+        $custom_content = do_shortcode('[wp_mapbox_gl_js map_id="'.get_the_ID().'"]');
+            $custom_content .= '<br />';
+        $custom_content .= $content;
+        return $custom_content;
+        } else {
+            return $content;
+        }
+    }
+}

wp-mapbox-gl-js/trunk/public/css/wp-mapbox-gl-js-public.css

-                      r2005792
+                      r2368995
     font-family: 'Open Sans', sans-serif;
+}
+#wp_mapbox_gl_js_category_creator, #wp_mapbox_gl_js_layer_creator {
+    display: none;
+    margin-left: 20px;
+}
+#wp_mapbox_gl_js_category_creator > div, #wp_mapbox_gl_js_layer_creator > div {
+    display: flex;
+}
+#category_filter_input {
+    width: 60%;
+}
+.wp-mapbox-gl-js-custom-category-control, .wp-mapbox-gl-js-custom-layer-control {
+    background: white;
+    padding: 5px;
+    box-shadow: 1px 1px 1px #333;
+    width: 200px;
+    min-height: 50px;
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+.wp-mapbox-gl-js-custom-category-control > div, .wp-mapbox-gl-js-custom-layer-control > div {
+    margin-top: 5px;
+}
+.wp-mapbox-gl-js-custom-category-control input, .wp-mapbox-gl-js-custom-layer-control input {
+    margin-right: 5px;
+}
+.wp-mapbox-gl-js-custom-category-control h3, .wp-mapbox-gl-js-custom-layer-control h3 {
+    font-weight: 600;
+    font-size: 1.3em;
+    margin: 0;
+    padding: 0;
+}
+.wp-mapbox-gl-js-custom-category-control div div, .wp-mapbox-gl-js-custom-layer-control div div {
+    display: flex;
+}
+/* .wp_mapbox_gl_js_frontend_popup {
+    maxWidth: 66%;
+} */
+.wp-mapbox-gl-js-location-sidebar p {
+  background: #fff;
+  border-bottom: 1px solid #eee;
+  min-height: 60px;
+  line-height: 60px;
+  margin-bottom: 0px;
+  padding: 0 10px;
+  background-color: #00853e;
+  color: #fff;
+}
+.wp-mapbox-gl-js-location-sidebar li {
+  display: block;
+  color: #00853e;
+  border-bottom: 1px solid #eee;
+  padding: 10px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.wp-mapbox-gl-js-location-sidebar li:hover {
+   color: #8cc63f;
+ }

wp-mapbox-gl-js/trunk/public/js/wp-mapbox-gl-js-public.js

-                      r2005792
+                      r2368995
       $('.wp-mapbox-gl-js-map').each(function() {
          var data = $(this).data();
+         // console.log(data)
+         var map = false;
+        //  console.log(data)
+        //  window._data = data;
          var mapStyle = {
            'container' : $(this).attr('id'),
 …
+           }
          });
+         var map = new mapboxgl.Map(mapStyle);
+         // Change size of the div if store locator turned on
+         if(data.controls.locationSidebar) {
+           var originalWidth = $(this).width();
+           var newDivWrap = document.createElement('div');
+           $(this).attr('style', function(i, style) {
+              return style && style.replace(/width[^;]+;?/g, '');
+           });
+           $(this).css('width',originalWidth*0.8);
+           $(this).css('float','right');
+           $(this).wrap(newDivWrap);
+           var locationSidebarDiv = document.createElement('div');
+           locationSidebarDiv.className = 'wp-mapbox-gl-js-location-sidebar';
+           locationSidebarDiv.style.width = originalWidth*0.19+'px';
+           locationSidebarDiv.style.height = $(this).height()+'px';
+           locationSidebarDiv.style.float = 'left';
+           $(locationSidebarDiv).append('<p><strong>Locations</strong></p>');
+           var thisLocationUL = document.createElement('ul');
+           data.mapdata.forEach(function(feature, index) {
+             var bounds = getBoundingBox(feature);
+             var thisLocationLI = document.createElement('li');
+             thisLocationLI.setAttribute('data-bounds', JSON.stringify(bounds));
+             thisLocationLI.textContent = feature.properties.marker_title;
+             thisLocationLI.addEventListener('click', function() {
+               if($(this).data().bounds[0][0]===$(this).data().bounds[1][0]&$(this).data().bounds[0][1]===$(this).data().bounds[1][1]) {
+                 map.flyTo({
+                   center : $(this).data().bounds[0],
+                   zoom : 13
+                 });
+               } else {
+                 map.fitBounds($(this).data().bounds)
+               }
+             });
+             thisLocationUL.appendChild(thisLocationLI);
+           });
+           $(locationSidebarDiv).append(thisLocationUL);
+           $(this).parent().prepend(locationSidebarDiv)
+         }
+         map = new mapboxgl.Map(mapStyle);
          allMaps[$(this).attr('id')] = map;
          map.on('load',function() {
+           // console.log(data.controls)
+          // console.log('DATA.CONTROLS', data.controls)
             // Add controls
            if(data.controls.navigation) {
 …
+           }
            if(data.controls.directions) {
+             map.addControl(new MapboxDirections({
+                accessToken: mapboxgl.accessToken
+             }), 'top-left');
+             var mapboxDirections = new MapboxDirections({
+              accessToken: mapboxgl.accessToken,
+              interactive: false
+             });
+             window['_mapboxDirections'] = mapboxDirections;
+             map.addControl(mapboxDirections, 'top-left');
+           }
+          if(data.controls.directions && data.controls.preFillInput && window['_mapboxDirections']) {
+            window['_mapboxDirections'].setOrigin(data.mapOrigin);
+            window['_mapboxDirections'].setDestination(data.mapDestination);
+          }
+           // scrollZoom setting
+           if (data.scrollZoom === false) {
+             map.scrollZoom.disable();
+           } else if (data.scrollZoom === true) {
+             map.scrollZoom.enable();
+           }
+           if (data.controls.geolocaterControl) {
+            const geolocaterControl = new mapboxgl.GeolocateControl({
+              positionOptions: { enableHighAccuracy: true },
+              trackUserLocation: true
+            });
+            map.addControl(geolocaterControl);
+           }
+          //  Layer filter
+          if (data.controls.layerFilter) {
+            const layerControl = new CustomLayerControl({
+             layers : data.mapLayersFilter
+            });
+            map.addControl(layerControl, 'top-left');
+          }
+          //  Category filter
+          if (data.controls.categoryFilter) {
+             const categoryControl = new CustomCategoryControl({
+              categories : data.mapCategories,
+              mapData : data.mapdata
+             });
+             map.addControl(categoryControl, 'top-left');
+           }
            // Map data add
            data.mapdata.forEach(function(feature,index) {
+           data.mapdata.forEach(function(feature, index) {
              var featureCollection = {
                "type" : "FeatureCollection",
 …
              // If only a marker icon or color has changed
              if(typeof map.getSource(feature.id)==='undefined') {
+               if(typeof feature.properties.opacity === 'undefined') {
+                 feature.properties.opacity = 0.4;
+               }
                map.addSource(feature.id, {
                  "type": "geojson",
 …
                  // Add the icon image, then add layer
                  if(!map.hasImage(feature.properties.marker_icon_url)) {
+                   map.loadImage($('#wp_mapbox_gl_js_plugin_url').val()+'/wp-mapbox-gl-js/admin/wp-mapmaker/public/img/'+feature.properties.marker_icon_url, function(error, image) {
+                     if (error) throw error;
+                     map.addImage(feature.properties.marker_icon_url, image);
+                     // default_marker.svg
+                   var canvas = document.createElement('canvas');
+                   var ctx = canvas.getContext('2d');
+                   var img  = document.createElement('img');
+                   img.onload = function() {
+                     var sizingOfImage = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[1];
+                     var widthHeight = sizingOfImage ? sizingOfImage.split('-') : [100,100];
+                     canvas.width  = widthHeight[0];
+                     canvas.height = widthHeight[1];
+                     ctx.drawImage(img, 0, 0, widthHeight[0], widthHeight[1]);
+                     map.addImage(feature.properties.marker_icon_url, ctx.getImageData(0, 0, widthHeight[0], widthHeight[1]) );
+                     var markerOverlap = true;
+                     if(typeof data.controls.markerNoDisappear !== 'undefined') {
+                       markerOverlap = data.controls.markerNoDisappear;
+                     }
                      var lineLayer = map.addLayer({
                        'id': feature.id,
 …
                        'layout': {
                          'icon-image': feature.properties.marker_icon_url,
+                         'icon-anchor' : 'bottom',
+                         'icon-size' : 0.2
+                         'icon-anchor' : feature.properties.marker_icon_anchor,
+                         'icon-size' : 0.2,
+                         'icon-allow-overlap' : markerOverlap
+                       }
                      })
                      if(feature.properties.popup_open) {
                        var popup = new mapboxgl.Popup({
+                         offset : 20
+                       });
+                         offset : 20,
+                         className: 'wp_mapbox_gl_js_frontend_popup'
+                      });
                        popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]})
                          .setHTML(
 …
                            '</div>'
                          ).addTo(map);
+                     }
+                   });
+                        popup._container.style.maxWidth = "66%";
+                      }
+                   };
+                   img.src = feature.properties.marker_icon_url.split('-wp_mapbox_gl_js_sizing-')[0];
                  } else {
                    var lineLayer = map.addLayer({
 …
                    map.on('click',feature.id,function(e) {
                      var popup = new mapboxgl.Popup({
+                       offset : 20
+                     })
+                      offset : 20,
+                      className: 'wp_mapbox_gl_js_frontend_popup'
+                    })
                      popup.setLngLat({lat: feature.geometry.coordinates[1], lng: feature.geometry.coordinates[0]})
                        .setHTML(
 …
                          '</div>'
                        ).addTo(map);
+                       popup._container.style.maxWidth = "66%";
+                      })
+                 }
+               } else if(feature.geometry.type==='Polygon') {
+                 if(feature.fillType) {
+                   var lineLayer = map.addLayer({
+                     'id': feature.id,
+                     'type': 'fill-extrusion',
+                     'source' : feature.id,
+                     'paint': {
+                       'fill-extrusion-color' : feature.properties.color,
+                       'fill-extrusion-opacity' : feature.properties.opacity,
+                       'fill-extrusion-height' : feature.properties.height,
+                       'fill-extrusion-base' : feature.properties.base_height
+                     }
+                   })
+                 } else {
+                   var lineLayer = map.addLayer({
+                     'id': feature.id,
+                     'type': 'fill',
+                     'source' : feature.id,
+                     'paint': {
+                       'fill-color' : feature.properties.color,
+                       'fill-opacity' : feature.properties.opacity
+                     }
                    })
+                 }
-               } else if(feature.geometry.type==='Polygon') {
-                 var lineLayer = map.addLayer({
-                   'id': feature.id,
-                   'type': 'fill',
-                   'source' : feature.id,
-                   'paint': {
-                     'fill-color' : feature.properties.color,
-                     'fill-opacity' : 0.4
+                   }
-                 })
                } else if(feature.geometry.type==='LineString') {
                  var lineLayer = map.addLayer({
 …
         allMaps[$(this).data('map-id')].setStyle($(this).attr('id'));
       });
+      $(document).on('click','#wp_mapbox_gl_js_set_directions',function(e) {
+        e.preventDefault();
+        var coords = $(this).data('lngLat');
+        window._mapboxDirections.setDestination(coords);
+      });
+    }
+    // Custom Layer Control Class
+    class CustomLayerControl {
+      // Commented b/c it was throwing errors
+      // _options: {
+      //   layers: []
+      // };
+      constructor(options) {
+        const _options = { layers: [] };
+        this._options = Object.assign({}, _options, options)
+      }
+      addHeading() {
+        var heading = document.createElement('h3');
+        heading.appendChild(document.createTextNode('Layer Filter'));
+        return heading;
+      }
+      onAdd(map){
+        this.map = map;
+        this.container = document.createElement('div');
+        this.container.className = 'mapboxgl-ctrl wp-mapbox-gl-js-custom-layer-control';
+        this.container.appendChild(this.addHeading());
+        var thisCategoryDiv = this._addLayers(this._options.layers);
+        this.container.appendChild(thisCategoryDiv);
+        return this.container;
+      }
+      onRemove(){
+        this.container.parentNode.removeChild(this.container);
+        this.map = undefined;
+      }
+      _addLayers(layers) {
+        const el = window.document.createElement('div')
+        layers.forEach(function(layer) {
+          const innerElement = window.document.createElement('div')
+          const input = window.document.createElement('input')
+          input.type = "checkbox";
+          input.checked = "checked";
+          input.name = layer;
+          input.value = layer;
+          input.id = 'wp-mapbox-gl-js-'+layer;
+          input.addEventListener('change',(e)=>{
+            if(e.target.checked) {
+              this.map.setLayoutProperty(layer,'visibility','visible');
+            } else {
+              this.map.setLayoutProperty(layer,'visibility','none');
+            }
+          });
+          innerElement.appendChild(input)
+          var label = document.createElement('label')
+          label.htmlFor = 'wp-mapbox-gl-js-'+layer;;
+          label.appendChild(document.createTextNode(layer));
+          innerElement.appendChild(label)
+          el.appendChild(innerElement);
+        }.bind(this));
+        return el;
+      }
+      updateLayers(layers) {
+        this.container.innerHTML = '';
+        this.container.appendChild(this.addHeading());
+        var thisLayerDiv = this._addLayers(layers);
+        this.container.appendChild(thisLayerDiv);
+      }
+    }
+    // Custom Category Control Class
+    class CustomCategoryControl {
+      // _options: {
+      //   categories: [],
+      //   mapData : []
+      // };
+      constructor(options) {
+        const _options = { categories: [], mapData : [] };
+        this._options = Object.assign({}, _options, options);
+      }
+      addHeading() {
+        var heading = document.createElement('h3');
+        heading.appendChild(document.createTextNode('Filter'));
+        return heading;
+      }
+      onAdd(map){
+        this.map = map;
+        this.container = document.createElement('div');
+        this.container.className = 'mapboxgl-ctrl wp-mapbox-gl-js-custom-category-control';
+        this.container.appendChild(this.addHeading());
+        var thisCategoryDiv = this._addCategories(this._options.categories);
+        this.container.appendChild(thisCategoryDiv);
+        return this.container;
+      }
+      onRemove(){
+        this.container.parentNode.removeChild(this.container);
+        this.map = undefined;
+      }
+      _addCategories(categories) {
+        const el = window.document.createElement('div')
+        categories.forEach(function(category) {
+          const innerElement = window.document.createElement('div')
+          const input = window.document.createElement('input')
+          input.type = "checkbox";
+          input.checked = "checked";
+          input.name = category;
+          input.value = category;
+          input.id = 'wp-mapbox-gl-js-'+category;
+          input.addEventListener('change',(e)=>{
+            if(e.target.checked) {
+              this._options.mapData.forEach(function(feature) {
+                if(feature.properties.category===e.target.value) {
+                  this.map.setLayoutProperty(feature.id,'visibility','visible');
+                }
+              }.bind(this));
+            } else {
+              this._options.mapData.forEach(function(feature) {
+                if(feature.properties.category===e.target.value) {
+                  this.map.setLayoutProperty(feature.id,'visibility','none');
+                }
+              }.bind(this));
+            }
+          });
+          innerElement.appendChild(input)
+          var label = document.createElement('label')
+          label.htmlFor = 'wp-mapbox-gl-js-'+category;;
+          label.appendChild(document.createTextNode(category));
+          innerElement.appendChild(label)
+          el.appendChild(innerElement);
+        }.bind(this));
+        return el;
+      }
+      updateCategories(categories) {
+        this.container.innerHTML = '';
+        this.container.appendChild(this.addHeading());
+        var thisCategoryDiv = this._addCategories(categories);
+        this.container.appendChild(thisCategoryDiv);
+      }
+      updateMapData(mapData) {
+        this._options.mapData = mapData;
+      }
+    }
   });
+  function getBoundingBox(data) {
+    var bounds = {}, coords, point, latitude, longitude;
+    coords = data.geometry.coordinates;
+    if(!isNaN(coords[0])) {
+      longitude = coords[0];
+      latitude = coords[1];
+      bounds = []
+      bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
+      bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
+      bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
+      bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
+    } else if(!isNaN(coords[0][0])) {
+      for (var j = 0; j < coords.length; j++) {
+        longitude = coords[j][0];
+        latitude = coords[j][1];
+        bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
+        bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
+        bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
+        bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
+      }
+    } else {
+      for (var j = 0; j < coords[0].length; j++) {
+        longitude = coords[0][j][0];
+        latitude = coords[0][j][1];
+        bounds.xMin = bounds.xMin < longitude ? bounds.xMin : longitude;
+        bounds.xMax = bounds.xMax > longitude ? bounds.xMax : longitude;
+        bounds.yMin = bounds.yMin < latitude ? bounds.yMin : latitude;
+        bounds.yMax = bounds.yMax > latitude ? bounds.yMax : latitude;
+      }
+    }
+    var boundsToReturn = [[bounds.xMin, bounds.yMin], [bounds.xMax, bounds.yMax]];
+    return boundsToReturn;
+  }
 })(jQuery);

wp-mapbox-gl-js/trunk/wp-mapbox-gl-js.php

-                      r2356757
+                      r2368995
+ *
  * @link              http://mapster.me/wp-mapbox-gl-js
  * @since             2.0.6
+ * @since             3.0.0
  * @package           WP_Mapbox_GL_JS
+ *
 …
  * Plugin URI:        http://mapster.me/wp-mapbox-gl-js/
  * Description:       This plugin allows you to create custom Mapbox maps and display them around your site.
  * Version:             2.0.6
+ * Version:             3.0.0
  * Author:            Mapster Tech
  * Author URI:        http://mapster.me/wp-mapbox-gl-js/
 …
  * Rename this for your plugin and update it as you release new versions.
  */
 define( 'WP_MAPBOX_GL_JS_VERSION', '2.0.6' );
+define( 'WP_MAPBOX_GL_JS_VERSION', '3.0.0' );
 /**

Note: See TracChangeset for help on using the changeset viewer.

Trac UI Preferences

Plugin Directory

Context Navigation

Changeset 2368995

Legend:

wp-mapbox-gl-js/trunk/admin/class-wp-mapbox-gl-js-admin.php

wp-mapbox-gl-js/trunk/admin/css/wp-mapbox-gl-js-admin.css

wp-mapbox-gl-js/trunk/admin/js/wp-mapbox-gl-js-admin.js

wp-mapbox-gl-js/trunk/admin/wp-mapbox-gl-js-settings.php

wp-mapbox-gl-js/trunk/admin/wp-mapmaker/public/css/style.css

wp-mapbox-gl-js/trunk/includes/class-wp-mapbox-gl-js.php

wp-mapbox-gl-js/trunk/public/class-wp-mapbox-gl-js-public.php

wp-mapbox-gl-js/trunk/public/css/wp-mapbox-gl-js-public.css

wp-mapbox-gl-js/trunk/public/js/wp-mapbox-gl-js-public.js

wp-mapbox-gl-js/trunk/wp-mapbox-gl-js.php

Download in other formats: