pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cluster markers works

Browse Source 
+ 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
This commit is contained in:
lenovo
2022-11-04 21:27:39 +01:00
parent e6857d2849
commit 7b37d30f7b
10 changed files with 298 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -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

57
srcs/plugins/map_prof/map_prof_hooks.php
View File

@@ -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 = '<div id="ljdp_map">map here</div>';
// 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 = '<div id="ljdp_map"></div>';
return $mp_api_script;
}
add_shortcode('lejourduprof_map', 'mp_add_div');

12
srcs/plugins/map_prof/mp_add_to_scripts.php
View File

@@ -1,6 +1,6 @@
<?php
require_once(dirname(__FILE__) . '/mp_get_markers.php');
require_once(dirname(__FILE__) . '/mp_get_events.php');
function mp_php_to_js($php_var, $js_var_name) {
$js_var = 'let ' . $js_var_name . ' = ';
@@ -12,13 +12,15 @@ function mp_php_to_js($php_var, $js_var_name) {
function mp_add_to_scripts() {
global $mp_icon_size;
global $mp_icon_url;
// global $mp_icon_label_color;
$markers = mp_get_published_markers();
global $mp_icon_cluster_url;
global $mp_icon_color;
$events = mp_get_published_events();
wp_add_inline_script('mp_init_map', mp_php_to_js($markers, 'locations'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($events, 'events'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_url, 'icon_url'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_cluster_url, 'icon_cluster_url'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_size, 'icon_size'), 'before');
// wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_label_color, 'icon_label_color'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color, 'icon_color'), 'before');
}
?>

141
srcs/plugins/map_prof/mp_get_events.php Normal file
View File

@@ -0,0 +1,141 @@
<?php
/*
FORMS FIELDS
0: "engagement"
1: "fichier"
2: "liste_des_depenses"
3: "montant_demande"
4: "recettes_prevues"
5: "depenses_prevues"
6: "participation"
7: "plan_de_communication"
8: "composition_autres"
9: "composition_4"
10: "composition_3"
11: "composition_2"
12: "composition_1"
13: "composition"
14: "resultats_attendus"
15: "public_vise"
16: "activite_concerne"
17: "description_longue"
18: "description_courte"
--- 19: "categorie"
20: "se_connecter"
21: "lien_internet"
22: "adresse_courriel_de_contact"
--- 23: "heure_de_fin"
--- 24: "heure_de_debut"
--- 25: "date"
26: "map"
--- 27: "pays"
--- 28: "ville"
--- 29: "adresse"
30: "mode"
31: "fonction"
32: "institution"
33: "telephone"
34: "adresse_courriel"
--- 35: "prenom"
--- 36: "nom"
*/
// FUNCTION TO RETRIEVE FORMS FIELDS
// not used anymore
//
//function mp_get_form_fields() {
// $get_form_args = array(
// 'numberposts' => -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;
}
?>

229
srcs/plugins/map_prof/mp_get_markers.php
View File

@@ -1,229 +0,0 @@
<?php
function mp_get_form_fields() {
$get_form_args = array(
'numberposts' => -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 = "<p>adresse: ";
$end = "</p>";
$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;
}
?>

7
srcs/plugins/map_prof/scripts/mp_errors_map.js Normal file
View File

@@ -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);
}

137
srcs/plugins/map_prof/scripts/mp_init_map.js
View File

@@ -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(`
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50%" cy="50%" r="27%" stroke="#ba197a" stroke-width="26" fill="#ffffff80" />
<polygon points="35,80 65,80 50,100" fill="#ba197a" />
</svg>
`);
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(`
<svg xmlns="http://www.w3.org/2000/svg" width="${cluster_icon_size[0]}" height="${cluster_icon_size[1]}">
<circle cx="50%" cy="50%" r="37%" stroke="#ba197a" stroke-width="6" fill="#ffffff80" />
</svg>
`);
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 });
}

18
srcs/plugins/map_prof/settings/mp_optionnals.php
View File

@@ -1,14 +1,24 @@
<?php
/*
* decommenter les parametres pour les appliquer
*
* les parametres suivants sont optionnels pour le fonctionnement du plugin
* le plugin fonctionne sans eux, grace a des valeurs par defauts
*/
/* dimensions de l'icone des marqueurs */
$mp_icon_size_setting = [40, 40];
/* */
//$mp_icon_label_color = "red";
/*
dimensions de l'icone des marqueurs
valeur par defaut [40, 40]
*/
//$mp_settings_icon_size = [50, 50];
/*
couleur des markers
valeur par defaut "#ba197a"
*/
//$mp_settings_icon_color = "#d168a8";
?>

5
srcs/plugins/map_prof/settings/mp_required.php
View File

@@ -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';
?>

1
srcs/plugins/map_prof/styles/mp_style.css
View File

@@ -25,3 +25,4 @@ button.gm-control-active {
button.gm-control-active ~ div {
height: 10px !important;
}