perso/DOCKER_wordpress
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added bounds to keep view inside map

Browse Source 
+ changed marker icon to works unified with cluster
This commit is contained in:
lenovo
2022-11-07 18:57:05 +01:00
parent 65ab0c455e
commit cfc747bad3
12 changed files with 243 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@@ -1,6 +1,25 @@
# MAP
questions:
- liens vers les pages
questions traitees:
- bound la carte limite pour ne pas voir la zone grise
- quelles infos on mets dans les infowindow
- adresse en haut (surtout pour les markers avec plusieurs evenements)
- filtres: au dessus de la carte
- zoom : on reste avec le fonctionnement par defaut
- est-ce qu'on peut changer la phrase "ctrl + scroll" pour un truc en francais ?
- comment gerer les mauvaises adresses
- verifier la maniere dont je les recuperes, tous les posts devraient avoir un pays
- comportement des infowindows
- centrees, c nickel
- markers avec plusieurs evenements a la meme adresse
- utiliser uniquement les markers qui servent actuellement pour les clusters
- quand c'est un cluster, on zoom,
- quand c'est plusieurs evenements au meme endroit, on les affiche
todo:
- add info-window
- add filter options

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

@@ -50,9 +50,9 @@ $mp_icon_color = "#ba197a";
if (isset($mp_settings_icon_color))
$mp_icon_color = $mp_settings_icon_color;
$mp_cluster_size_factor = 2.5;
if (isset($mp_settings_cluster_size_factor))
$mp_cluster_size_factor = $mp_settings_cluster_size_factor;
$mp_icon_size_factor = 2.5;
if (isset($mp_settings_icon_size_factor))
$mp_icon_size_factor = $mp_settings_icon_size_factor;
$mp_coordinates_default = (object)["lat" => 46.227638, "lng" => 2.213749]; // france
if (isset($mp_settings_coordinates_default))
@@ -65,6 +65,9 @@ if (isset($mp_settings_icon_color))
if (isset($mp_settings_icon_color_back))
$mp_icon_color_back = $mp_settings_icon_color_back;
$mp_icon_stroke_width = 6;
if (isset($mp_settings_icon_stroke_width))
$mp_icon_stroke_width = $mp_settings_icon_stroke_width;
/**
@@ -92,7 +95,10 @@ function mp_add_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__), '', '', false);
wp_enqueue_style('mp_style', plugins_url('styles/mp_style.css', __FILE__), '', '', false);
wp_enqueue_style('mp_style_info_windows', plugins_url('styles/mp_info_windows.css', __FILE__), '', '', false);
wp_enqueue_style('mp_style_zoom', plugins_url('styles/mp_zoom.css', __FILE__), '', '', false);
wp_enqueue_script('mp_info_window', plugins_url('scripts/mp_info_window.js', __FILE__), '', '', false);
wp_enqueue_script('mp_create_markers', plugins_url('scripts/mp_create_markers.js', __FILE__), '', '', false);
wp_enqueue_script('mp_draw_clusters', plugins_url('scripts/mp_draw_clusters.js', __FILE__), '', '', false);
@@ -100,9 +106,28 @@ function mp_add_div() {
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();
/*
pays
ville
categorie
*/
$pays = array();
mp_add_to_scripts($pays);
$mp_api_script = '<div id="ljdp_map"></div>';
$mp_api_script = '
<div id="ljdp_map_wrapper">
<div id="ljdp_map"></div>
<div id="ljdp_map_filters">
';
foreach ($pays as $loc) {
$mp_api_script .= '<p>';
$mp_api_script .= $loc;
$mp_api_script .= '</p>';
}
$mp_api_script .= '
</div>
</div>
';
return $mp_api_script;
}

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

@@ -10,13 +10,14 @@ function mp_php_to_js($php_var, $js_var_name) {
return $js_var;
}
function mp_add_to_scripts() {
function mp_add_to_scripts(&$pays) {
global $mp_icon_size;
global $mp_icon_color;
global $mp_icon_color_back;
global $mp_cluster_size_factor;
global $mp_icon_size_factor;
global $mp_coordinates_default;
$events = mp_get_published_events();
global $mp_icon_stroke_width;
$events = mp_get_published_events($pays);
$locations = mp_sort_events($events);
//wp_add_inline_script('mp_init_map', mp_php_to_js($events, 'events'), 'before');
@@ -24,8 +25,9 @@ function mp_add_to_scripts() {
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_color, 'icon_color'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color_back, 'icon_color_back'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_cluster_size_factor, 'cluster_size_factor'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_size_factor, 'icon_size_factor'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_coordinates_default, 'coordinates_default'), 'before');
wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_stroke_width, 'icon_stroke_width'), 'before');
}
?>

10
srcs/plugins/map_prof/mp_get_events.php
View File

@@ -127,7 +127,7 @@ function mp_get_published_posts() {
return $posts_published;
}
function mp_fill_fields_value($id) {
function mp_fill_fields_value($post, $id, &$pays) {
/*
* get_field is an ACF function
@@ -153,7 +153,8 @@ function mp_fill_fields_value($id) {
);
$event = (object)[];
foreach($fields as $field) {
$event->$field = get_field($field, $id);
$value = get_field($field, $id);
$event->$field = $value;
}
// add mode irl or online (irl: true | false)
@@ -165,15 +166,16 @@ function mp_fill_fields_value($id) {
return $event;
}
function mp_get_published_events() {
function mp_get_published_events(&$pays) {
$posts_list = mp_get_published_posts();
$events = [];
foreach ($posts_list as $post) {
$event = mp_fill_fields_value($post, $post->ID, $pays);
$event->id = $post->ID;
$event->title = $post->post_title;
$event = mp_fill_fields_value($post->ID);
array_push($events, $event);
}
mp_console_log("nombre de posts: " . count($events));
return $events;
}

49
srcs/plugins/map_prof/scripts/mp_create_markers.js
View File

@@ -5,26 +5,55 @@ function create_markers(map, locations, infowindow) {
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - let icon_stroke_width = Number
*/
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="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
</svg>
`);
let icon_options = {
url: `data:image/svg+xml;base64,${svg_icon}`,
scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
};
let icon_circle_radius = 40 - icon_stroke_width / 2;
// 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="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
// <polygon points="35,80 65,80 50,100" fill="${icon_color}" />
// </svg>
// `);
let markers = [];
for (loc of locations) {
let count = loc.events.length;
let marker_icon_size = [
icon_size[0] + ( icon_size_factor * (count - 2) ),
icon_size[1] + ( icon_size_factor * (count - 2) )
];
let svg_icon = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
<circle cx="50%" cy="50%" r="${icon_circle_radius}%" stroke="${icon_color}" stroke-width="${icon_stroke_width}" fill="${icon_color_back}" />
</svg>
`);
let icon_options = {
url: `data:image/svg+xml;base64,${svg_icon}`,
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let marker_label = {
text: String(count),
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};
let marker_title = `address of ${count} events`;
let marker = new google.maps.Marker({
position: loc.coordinates,
map: map,
icon: icon_options,
title: marker_title,
label: marker_label,
});
// // hide label if "1" (you must comment the label option in marker)
// if (count > 1)
// marker.setLabel(marker_label);
attach_info_window(map, marker, loc.events, infowindow);

19
srcs/plugins/map_prof/scripts/mp_draw_clusters.js
View File

@@ -5,30 +5,33 @@ function draw_clusters(map, markers) {
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - let icon_size_factor = Number
* - let icon_stroke_width = Number
*/
let icon_circle_radius = 40 - icon_stroke_width / 2;
let renderer = {
render({ count, position }, stats) {
/* CLUSTERS SETTINGS */
let cluster_icon_size = [
icon_size[0] + ( cluster_size_factor * (count - 2) ),
icon_size[1] + ( cluster_size_factor * (count - 2) )
let marker_icon_size = [
icon_size[0] + ( icon_size_factor * (count - 2) ),
icon_size[1] + ( icon_size_factor * (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="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
<circle cx="50%" cy="50%" r="${icon_circle_radius}%" stroke="${icon_color}" stroke-width="${icon_stroke_width}" fill="${icon_color_back}" />
</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]),
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let cluster_label = {
text: String(count),
color: "#ba197a",
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};

44
srcs/plugins/map_prof/scripts/mp_info_window.js
View File

@@ -5,15 +5,51 @@ function attach_info_window(map, marker, events, infowindow) {
* https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
*/
let window_content = '<div id="info_window">';
for (key in events) {
if (key > 0)
window_content += `<hr />`;
let presence = "en ligne";
if (events[key].irl)
presence = "en presentiel";
window_content += `
<p>
${events[key].title}
</p>
<p>
${presence}
</p>
`;
};
window_content += '</div>';
marker.addListener('click', () => {
let view_center = map.getCenter();
let marker_position = marker.getPosition();
console.log("marker position: " + marker_position);
let window_position = view_center;
infowindow.setOptions({
disableAutoPan: true,
//position: center_position,
//disableAutoPan: true,
disableAutoPan: false,
content: window_content,
/* dimensions */
//maxWidth: 400,
//minWidth: 400,
/* center window */
position: window_position,
/* center window */
//position: (map.getCenter()),
//pixelOffset: { width: 50, height: 50 },
//shouldFocus: false,
});
infowindow.setPosition(map.getCenter());
infowindow.setContent("test");
infowindow.open(map);
});

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

@@ -21,19 +21,29 @@ function mp_init_map() {
// default map center to france
let map_center = coordinates_default;
let world_bound = {
north: 80,
south: -80,
west: -180,
east: 180,
};
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: "cooperative",
//gestureHandling: "greedy",
//gestureHandling: "none",
//gestureHandling: "auto",
//disableDoubleClickZoom: "false", //deprecated
//draggable: "true", //deprecated
center: map_center,
restriction: {
latLngBounds: world_bound,
strictBounds: true,
},
}
let map_div = document.getElementById("ljdp_map");
let infowindow = new google.maps.InfoWindow();

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

@@ -21,7 +21,7 @@
facteur de taille des clusters
valeur par defaut "2.5"
************************************ */
//$mp_settings_cluster_size_factor = 4;
//$mp_settings_icon_size_factor = 4;
@@ -56,4 +56,12 @@
// 0.9 : e6
/* ************************************
epaisseur de trait des icones
valeurs par defaut "6"
************************************ */
$mp_settings_icon_stroke_width = 8;
?>

34
srcs/plugins/map_prof/styles/mp_info_windows.css Normal file
View File

@@ -0,0 +1,34 @@
/*
* INFO WINDOW
*/
/*
window itself
*/
.gm-style-iw.gm-style-iw-c {
padding: 0px !important;
}
/*
triangle
*/
.gm-style-iw-tc {
display: none !important;
}
/*
croice
.gm-ui-hover-effect {
display: none !important;
}
*/
/*
content
*/
#info_window {
margin: 20px;
}

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

@@ -1,3 +1,8 @@
#ljdp_map_wrapper {
position: relative;
}
#ljdp_map {
height: 500px;
width: 100%;
@@ -7,22 +12,13 @@
}
/*
* styling zoom buttons on map
*/
/* hide the rectangular box container */
div.gmnoprint div {
visibility: hidden;
}
/* shape buttons in circles */
button.gm-control-active {
visibility: visible;
border-radius: 50% !important;
background-color: rgb(255, 255, 255) !important;
}
/* gap between the buttons */
button.gm-control-active ~ div {
height: 10px !important;
#ljdp_map_filters {
border: 1px solid blue;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 30px;
}

24
srcs/plugins/map_prof/styles/mp_zoom.css Normal file
View File

@@ -0,0 +1,24 @@
/*
* ZOOM BUTTONS
*/
/* hide the rectangular box container
div.gmnoprint div {
visibility: hidden;
}
*/
/* shape buttons in circles
button.gm-control-active {
visibility: visible;
border-radius: 50% !important;
background-color: rgb(255, 255, 255) !important;
}
*/
/* gap between the buttons
button.gm-control-active ~ div {
height: 10px !important;
}
*/