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; } +