From 7b37d30f7b5859b7be9f8282b7dceb7c6630d806 Mon Sep 17 00:00:00 2001 From: lenovo Date: Fri, 4 Nov 2022 21:27:39 +0100 Subject: [PATCH] cluster markers works + they are personalizable + cluster icon grow without getting fat + js function for errors + scripts dont enqueue on all pages + php array of event function more light without coordinates - coordinates not yet retrieved by js --- README.md | 1 + srcs/plugins/map_prof/map_prof_hooks.php | 57 ++--- srcs/plugins/map_prof/mp_add_to_scripts.php | 12 +- srcs/plugins/map_prof/mp_get_events.php | 141 +++++++++++ srcs/plugins/map_prof/mp_get_markers.php | 229 ------------------ .../plugins/map_prof/scripts/mp_errors_map.js | 7 + srcs/plugins/map_prof/scripts/mp_init_map.js | 137 +++++++---- .../map_prof/settings/mp_optionnals.php | 18 +- .../plugins/map_prof/settings/mp_required.php | 5 +- srcs/plugins/map_prof/styles/mp_style.css | 1 + 10 files changed, 298 insertions(+), 310 deletions(-) create mode 100644 srcs/plugins/map_prof/mp_get_events.php delete mode 100644 srcs/plugins/map_prof/mp_get_markers.php create mode 100644 srcs/plugins/map_prof/scripts/mp_errors_map.js diff --git a/README.md b/README.md index 8aea42c..db89ffa 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ # MAP todo: +- redisgn + and - for zoom -> color and thickness - [changed plugin directory in wp](https://wordpress.stackexchange.com/questions/120075/how-to-change-location-of-the-plugins-wordpress-themes-folder) - googlemap api key : AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE diff --git a/srcs/plugins/map_prof/map_prof_hooks.php b/srcs/plugins/map_prof/map_prof_hooks.php index 1242350..fbd1736 100644 --- a/srcs/plugins/map_prof/map_prof_hooks.php +++ b/srcs/plugins/map_prof/map_prof_hooks.php @@ -26,37 +26,24 @@ require_once(dirname(__FILE__) . '/settings/mp_optionnals.php'); * global variables : */ -$mp_icon_url = '/wp-content/plugins/map_prof/images/' . $mp_icon_file; -$mp_icon_size = [50, 50]; -if (isset($mp_icon_size_setting)) { - if (is_array($mp_icon_size_setting)) { - if (count($mp_icon_size_setting) === 2) { - if ( is_numeric($mp_icon_size_setting[0]) && is_numeric($mp_icon_size_setting[1]) ) { - $mp_icon_size = $mp_icon_size_setting; +$mp_icon_base_url = '/wp-content/plugins/map_prof/images/'; +$mp_icon_url = $mp_icon_base_url . $mp_icon_file; +$mp_icon_cluster_url = $mp_icon_base_url . $mp_icon_cluster_file; + +$mp_icon_size = [40, 40]; +if (isset($mp_settings_icon_size)) { + if (is_array($mp_settings_icon_size)) { + if (count($mp_settings_icon_size) === 2) { + if ( is_numeric($mp_settings_icon_size[0]) && is_numeric($mp_settings_icon_size[1]) ) { + $mp_icon_size = $mp_settings_icon_size; } } } } -//$mp_icon_label_color = "red"; - - -/** - * add scripts and styles to the header or the footer - */ - -function mp_enqueue_scripts() { - // https://developers.google.com/maps/documentation/javascript/marker-clustering - $marker_clusterer = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"; - - wp_enqueue_style( 'mp_style', plugins_url('styles/mp_style.css', __FILE__), '', '', ''); - wp_enqueue_script('mp_marker_clusterer', $marker_clusterer, '', '', true); - wp_enqueue_script('mp_init_map', plugins_url('scripts/mp_init_map.js', __FILE__), ['mp_marker_clusterer'],'', true); - wp_enqueue_script('mp_google_api', mp_url_api(), ['mp_init_map'], '', true); - - mp_add_to_scripts(); -} -add_action( 'wp_enqueue_scripts', 'mp_enqueue_scripts' ); +$mp_icon_color = "#ba197a"; +if (isset($mp_settings_icon_color)) + $mp_icon_color = $mp_settings_icon_color; @@ -74,11 +61,25 @@ add_filter('script_loader_tag', 'mp_tag_scripts', 10, 2); /** - * when 'shortcode' found in page, replace by return + * when 'shortcode' found in page, enqueue scripts and styles, + * run php script, and replace shortcode by return value */ function mp_add_div() { - $mp_api_script = '
map here
'; + + // https://developers.google.com/maps/documentation/javascript/marker-clustering + $marker_clusterer = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"; + + wp_enqueue_style( 'mp_style', plugins_url('styles/mp_style.css', __FILE__), '', '', ''); + wp_enqueue_script('mp_errors_maps', plugins_url('scripts/mp_errors_map.js', __FILE__), '', '', true); + wp_enqueue_script('mp_marker_clusterer', $marker_clusterer, ['mp_errors_maps'], '', true); + wp_enqueue_script('mp_init_map', plugins_url('scripts/mp_init_map.js', __FILE__), ['mp_marker_clusterer'],'', true); + wp_enqueue_script('mp_google_api', mp_url_api(), ['mp_init_map'], '', true); + + mp_add_to_scripts(); + + $mp_api_script = '
'; + return $mp_api_script; } add_shortcode('lejourduprof_map', 'mp_add_div'); diff --git a/srcs/plugins/map_prof/mp_add_to_scripts.php b/srcs/plugins/map_prof/mp_add_to_scripts.php index 5108e89..4742bde 100644 --- a/srcs/plugins/map_prof/mp_add_to_scripts.php +++ b/srcs/plugins/map_prof/mp_add_to_scripts.php @@ -1,6 +1,6 @@ diff --git a/srcs/plugins/map_prof/mp_get_events.php b/srcs/plugins/map_prof/mp_get_events.php new file mode 100644 index 0000000..516c8f0 --- /dev/null +++ b/srcs/plugins/map_prof/mp_get_events.php @@ -0,0 +1,141 @@ + -1, +// 'post_status' => 'publish', +// 'post_type' => 'acf-field', +// ); +// $forms = get_posts($get_form_args); +// $fields = []; +// foreach ($forms as $form) { +// $field = $form->post_excerpt; +// array_push($fields, $field); +// } +// return $fields; +//} + +function mp_get_published_posts() { + +// $post_args = array( +// 'numberposts' => -1, +// 'post_status' => 'draft', +// //'post_status' => 'publish', +// 'post_type' => 'post', +// ); +// $post_list = get_posts($post_args); +// foreach ($post_list as $post) { +// wp_update_post(array( +// 'ID' => $post->ID, +// //'post_status' => 'draft', +// 'post_status' => 'publish', +// )); +// } + + $get_posts_args = array( + 'numberposts' => -1, + 'post_status' => 'publish', + 'post_type' => 'post', + ); + $posts_published = get_posts($get_posts_args); + return $posts_published; +} + +function mp_fill_fields_value($id) { + $fields = array( + "heure_de_debut", + "heure_de_fin", + "categorie", + "date", + "pays", + "ville", + "adresse", + "prenom", + "nom", + ); + $event = (object)[]; + foreach($fields as $field) { + $event->$field = get_field($field, $id); + } + $presentiel = get_field("mode", $id); + $event->irl = false; + if ($presentiel[0] === "En présentiel") + $event->irl = true; + return $event; +} + +function mp_get_coordinates(&$marker) { + global $mp_api_key; + $address = $marker->adresse . "," + . $marker->ville . "," + . $marker->pays; + $geolocation = 'https://maps.googleapis.com/maps/api/geocode/json' + . '?address=' . urlencode($address) + . '&key=' . $mp_api_key; + + $jsoncontent = file_get_contents($geolocation); + $content = json_decode($jsoncontent); + $coordinates = $content->results[0]->geometry->location; + return $coordinates; +} + +function mp_get_published_events() { + $posts_list = mp_get_published_posts(); + $events = []; + foreach ($posts_list as $post) { + $event = mp_fill_fields_value($post->ID); + $event->id = $post->ID; + $event->title = $post->post_title; +// $event->coordinates = mp_get_coordinates($event); + array_push($events, $event); + } + mp_console_log($events); + return $events; +} + +?> diff --git a/srcs/plugins/map_prof/mp_get_markers.php b/srcs/plugins/map_prof/mp_get_markers.php deleted file mode 100644 index b9b788d..0000000 --- a/srcs/plugins/map_prof/mp_get_markers.php +++ /dev/null @@ -1,229 +0,0 @@ - -1, - 'post_status' => 'publish', - 'post_type' => 'acf-field', - ); - $forms = get_posts($get_form_args); - $fields = []; - foreach ($forms as $form) { - $field = $form->post_excerpt; - array_push($fields, $field); - } - return $fields; -} - -function mp_get_published_posts() { -// $get_posts_args = array( -// 'numberposts' => -1, -// 'post_status' => 'publish', -// 'post_type' => 'post', -// ); -// $posts_published = get_posts($get_posts_args); -// mp_console_log("posts published: "); -// mp_console_log($posts_published); -// mp_console_log("\n"); - -// $get_posts_args = array( -// 'numberposts' => -1, -// 'post_status' => 'publish', -// 'post_type' => 'acf-field', -// ); -// $posts_published = get_posts($get_posts_args); -// mp_console_log("acf published: "); -// mp_console_log($posts_published); -// mp_console_log("\n"); -// $list_fields = []; -// foreach ($posts_published as $post) { -// $field = $post->post_excerpt; -// array_push($list_fields, $field); -// } -// mp_console_log($list_fields); - -// $get_posts_args = array( -// 'numberposts' => 1, -// 'post_status' => 'draft', -// 'post_type' => 'post', -// ); -// $posts_published = get_posts($get_posts_args); -// mp_console_log("post draft: "); -// mp_console_log($posts_published); -// mp_console_log("\n"); - -// $get_posts_args = array( -// 'numberposts' => 1, -// 'post_status' => 'draft', -// 'post_type' => 'acf-field', -// ); -// $posts_published = get_posts($get_posts_args); -// mp_console_log("acf draft: "); -// mp_console_log($posts_published); -// mp_console_log("\n"); - - $get_posts_args = array( - 'numberposts' => -1, - 'post_status' => 'publish', - 'post_type' => 'post', - ); - $posts_published = get_posts($get_posts_args); -// mp_console_log("posts: "); -// mp_console_log($posts_published); -// mp_console_log("\n"); -// $post = $posts_published[1]; -// mp_console_log("post :"); -// mp_console_log($post); -// mp_console_log("\n"); -// $adresse = get_field('adresse', $post->ID); -// mp_console_log("field adresse :"); -// mp_console_log($adresse); -// mp_console_log("\n"); -// $adresse = get_field('fonction', $post->ID); -// mp_console_log("field fonction :"); -// mp_console_log($adresse); -// mp_console_log("\n"); - - return $posts_published; -} - -function mp_extract_address(&$content) { - $begin = "

adresse: "; - $end = "

"; - $len = strlen($begin); - $address = substr($content, strpos($content, $begin)+$len); - $address = substr($content, 0, strpos($content, $end)); - return $address; -} - -function mp_convert_coordinates(&$address) { - global $mp_api_key; - $geolocation = 'https://maps.googleapis.com/maps/api/geocode/json' - . '?address=' . urlencode($address) - . '&key=' . $mp_api_key; - - $jsoncontent = file_get_contents($geolocation); - $content = json_decode($jsoncontent); - $coordinates = $content->results[0]->geometry->location; - return $coordinates; -} - -function mp_get_coordinates(&$marker) { - global $mp_api_key; - $address = $marker->adresse . "," - . $marker->ville . "," - . $marker->pays; - mp_console_log("address:"); - mp_console_log($address); - $geolocation = 'https://maps.googleapis.com/maps/api/geocode/json' - . '?address=' . urlencode($address) - . '&key=' . $mp_api_key; - - $jsoncontent = file_get_contents($geolocation); - $content = json_decode($jsoncontent); - $coordinates = $content->results[0]->geometry->location; - return $coordinates; -} - -function mp_post_content($post) { - - //temp - $content = $post->post_content; - - // $args = array( - // 'page_id' => 29718 - // ); - // $post_query = new WP_Query( $args ); - // mp_console_log("0 tmp_content:"); - // if ( $post_query->have_posts() ) { - // mp_console_log("1 tmp_content:"); - // while ( $post_query->have_posts() ) { - // $post_query->the_post(); - // $tmp_content = apply_filters( 'the_content', get_the_content() ); - // mp_console_log("2 tmp_content:"); - // mp_console_log($tmp_content); - // } - // } - // wp_reset_query(); - - // $the_content = $post->post_content; - - // $the_content = get_the_content(null, false, $post->ID); - - // $the_content = apply_filters( 'the_content', $post->post_content ); - // $the_content = apply_filters( 'the_content', $post->post_content, 99 ); - // $the_content = apply_filters( 'the_content', $post->post_content, -1 ); - - // $the_content = apply_filters( 'the_content', get_the_content(null, false, $post->ID) ); - // $the_content = apply_filters( 'the_content', get_the_content(null, false, $post->ID), 99 ); - // $the_content = apply_filters( 'the_content', get_the_content(null, false, $post->ID), -1 ); - -// $post_id = $post->ID; -// $post_type = $post->post_type; -// mp_console_log("post_type:"); -// mp_console_log($post_type); -// mp_console_log("\n"); -// // "post" -// $taxonomies = get_object_taxonomies($post_type); -// mp_console_log("taxonomies:"); -// mp_console_log($taxonomies); -// mp_console_log("\n"); -// // ["category", "post_tag", "post_format"] -// foreach ($taxonomies as $taxonomy_key => $taxonomy) { -// $terms = get_the_terms($post_id, $taxonomy_key); -// mp_console_log("terms (key = ".$taxonomy_key.") : "); -// mp_console_log($terms); -// mp_console_log("\n"); -// $terms = get_the_terms($post_id, $taxonomy); -// mp_console_log("terms (value = ".$taxonomy.") : "); -// mp_console_log($terms); -// mp_console_log("\n"); -// } - - // mp_console_log("the_content:"); - // mp_console_log($the_content); - // mp_console_log("\n"); - - return $content; -} - -function mp_retrieve_address($posts_list) { - $locs = array(); - foreach ($posts_list as $post) { - $content = mp_post_content($post); - $address = mp_extract_address($post); - if (strlen($address) > 0) - { - $lat_lng = mp_convert_coordinates($address); - if ($lat_lng !== null) - array_push($locs, $lat_lng); - } - }; - return $locs; -} - -function mp_fill_fields_value(&$form_fields, $id) { - $marker = (object)[]; - foreach($form_fields as $field) { - $marker->$field = get_field($field, $id); - } - return $marker; -} - -function mp_get_published_markers() { - $posts_list = mp_get_published_posts(); - $form_fields = mp_get_form_fields(); - $markers = []; - foreach ($posts_list as $post) { - $marker = mp_fill_fields_value($form_fields, $post->ID); - $marker->coordinates = mp_get_coordinates($marker); - array_push($markers, $marker); - } - mp_console_log("markers:"); - mp_console_log($markers); - - $tmp_markers = mp_retrieve_address($posts_list); - return $tmp_markers; -} - -?> diff --git a/srcs/plugins/map_prof/scripts/mp_errors_map.js b/srcs/plugins/map_prof/scripts/mp_errors_map.js new file mode 100644 index 0000000..4d868a6 --- /dev/null +++ b/srcs/plugins/map_prof/scripts/mp_errors_map.js @@ -0,0 +1,7 @@ +function print_error(error) { + let div_map = document.getElementById("ljdp_map"); + let p_err = document.createElement('p'); + + p_err.textContent = error; + div_map.after(p_err); +} diff --git a/srcs/plugins/map_prof/scripts/mp_init_map.js b/srcs/plugins/map_prof/scripts/mp_init_map.js index f368731..e45e78d 100644 --- a/srcs/plugins/map_prof/scripts/mp_init_map.js +++ b/srcs/plugins/map_prof/scripts/mp_init_map.js @@ -1,61 +1,114 @@ function mp_init_map() { /* - * following variable are created by mp_locations.php - * - let locations = [{lat:xxx, lng:xxx}, {}...] - * - let icon_url - * - let icon_size[x, y] + * following variable are created by mp_add_to_script.php + * - let events = [{}, {}...] + * - let icon_url = "" + * - let icon_cluster_url = "" + * - let icon_color = "" + * - let icon_size = [x, y] */ + /* + * SETTINGS + */ + + //print_error("error"); + console.log("hello"); + // default map center to france let map_center = {lat:46.227638, lng:2.213749}; - if (locations.length > 0) - map_center = locations[0]; + let map_options = { + /* map options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions */ + disableDefaultUI: true, + zoomControl: true, + scaleControl: true, + zoom: 2, + //gestureHandling: "cooperative", + //gestureHandling: "greedy", + //gestureHandling: "none", + //gestureHandling: "auto", + //disableDoubleClickZoom: "false", //deprecated + //draggable: "true", //deprecated + center: map_center, + } - let map = new google.maps.Map( - document.getElementById("ljdp_map"), - { - // mpa options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions - - // maps controls : - disableDefaultUI: true, - zoomControl: true, - scaleControl: true, - - // other controls : - zoom: 5, - //gestureHandling: "cooperative", - //gestureHandling: "greedy", - gestureHandling: "none", - //gestureHandling: "auto", - //disableDoubleClickZoom: "false", - //draggable: "true", - center: map_center, - } - ); - //map.addListener("zoom_changed", () => { - // // do nothing ? - //}); - let marker, icon, label; - icon = { - url: icon_url, + let svg_icon = window.btoa(` + + + + + `); + let icon_options = { + url: `data:image/svg+xml;base64,${svg_icon}`, scaledSize: new google.maps.Size(icon_size[0], icon_size[1]), }; - label = { -// text: String(count), - text: "hello", -// color: icon_label_color, + let label_options = { + //text: String(count), + text: "?", + //color: icon_label_color, fontSize: "12px", }; + + + + /* + * DRAW MAP + */ + + let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options); let markers = []; - for (loc of locations) { + for (ev of events) { marker = new google.maps.Marker({ - position: loc, + position: ev.coordinates, map: map, - icon: icon, - // label: label, + icon: icon_options, + //label: label_options, }); markers.push(marker); }; - new markerClusterer.MarkerClusterer({ map, markers }); + + + /* + * DRAW CLUSTERS + */ + + let renderer = { + render({ count, position }, stats) { + + /* CLUSTERS SETTINGS */ + + let cluster_icon_size = [ + icon_size[0] + ( 2.5 * (count - 2) ), + icon_size[1] + ( 2.5 * (count - 2) ) + ]; + let cluster_svg = window.btoa(` + + + + `); + let cluster_icon = { + url: `data:image/svg+xml;base64,${cluster_svg}`, + scaledSize: new google.maps.Size(cluster_icon_size[0], cluster_icon_size[1]), + }; + let cluster_label = { + text: String(count), + color: "#ba197a", + fontSize: "12px", + fontWeight: "bold", + }; + let cluster_title = `Cluster of ${count} markers`; + let cluster_zIndex = Number(google.maps.Marker.MAX_ZINDEX) + count; + + return new google.maps.Marker({ + position, + icon: cluster_icon, + label: cluster_label, + title: cluster_title, + zIndex: cluster_zIndex, + }); + } + } + + new markerClusterer.MarkerClusterer({ map, markers, renderer }); } diff --git a/srcs/plugins/map_prof/settings/mp_optionnals.php b/srcs/plugins/map_prof/settings/mp_optionnals.php index 15b00e6..90ef8de 100644 --- a/srcs/plugins/map_prof/settings/mp_optionnals.php +++ b/srcs/plugins/map_prof/settings/mp_optionnals.php @@ -1,14 +1,24 @@ diff --git a/srcs/plugins/map_prof/settings/mp_required.php b/srcs/plugins/map_prof/settings/mp_required.php index f29c3b3..6e1ea89 100644 --- a/srcs/plugins/map_prof/settings/mp_required.php +++ b/srcs/plugins/map_prof/settings/mp_required.php @@ -7,8 +7,9 @@ /* cle api de google maps */ $mp_api_key = 'AIzaSyCvdGV2ssD4ov4a9CuIlQhoJyz5gWWiSvE'; -/* nom du fichier image situe dans le dossier "images" */ -/* pour l'icone des marqueurs sur la carte */ +/* nom des fichiers image situe dans le dossier "images" */ +/* pour les icones des marqueurs sur la carte */ $mp_icon_file = 'marker.png'; +$mp_icon_cluster_file = 'marker_cluster.png'; ?> diff --git a/srcs/plugins/map_prof/styles/mp_style.css b/srcs/plugins/map_prof/styles/mp_style.css index c3e35e2..cd20a27 100644 --- a/srcs/plugins/map_prof/styles/mp_style.css +++ b/srcs/plugins/map_prof/styles/mp_style.css @@ -25,3 +25,4 @@ button.gm-control-active { button.gm-control-active ~ div { height: 10px !important; } +