From 059d56d26fd6e02ed62bc992c1dae695df6744b8 Mon Sep 17 00:00:00 2001 From: lenovo Date: Tue, 15 Nov 2022 16:09:14 +0100 Subject: [PATCH] fixed cluster zoom problem with map bounds restriction --- README.md | 10 +++---- .../plugins/map_prof/scripts/mp_create_map.js | 22 ++++++++++---- .../map_prof/scripts/mp_create_markers.js | 10 ------- .../map_prof/scripts/mp_draw_clusters.js | 8 ++++- .../map_prof/scripts/mp_filter_events.js | 12 ++++++-- srcs/plugins/map_prof/scripts/mp_init_map.js | 30 ++++++++----------- 6 files changed, 51 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 7a5d847..14eea01 100644 --- a/README.md +++ b/README.md @@ -23,20 +23,20 @@ - [/] check errors on real site - [/] create action to publish all - [/] deal with multiplication of filters -- [ ] deal with error double event irl and online -- [ ] change appearance of filter according to other filters - [/] deal with window size - [/] la carte ne s'affiche pas sur les pages - [/] filtres sur chrome - [/] infowindow new design - [/] infowindow enlever scroll border -- [ ] hide filters before css ready +- [/] hide filters before css ready - [x] reduire hauteur du select menu -- [ ] zoom sur cluster problem - [/] dans categories, placer "autres" en bas - [/] dans categories, transformer fleches en "autres" -- [ ] effacer les fenetres, au moins sur le bouton effacer, ou sur mouvement +- [/] effacer les fenetres, au moins sur le bouton effacer, ou sur mouvement +- [/] zoom sur cluster problem +- [ ] change appearance of filter according to other filters +- [ ] deal with error double event irl and online #### verifications: - api only for this site on fabien's google account diff --git a/srcs/plugins/map_prof/scripts/mp_create_map.js b/srcs/plugins/map_prof/scripts/mp_create_map.js index 644ceb2..ead03cc 100644 --- a/srcs/plugins/map_prof/scripts/mp_create_map.js +++ b/srcs/plugins/map_prof/scripts/mp_create_map.js @@ -1,8 +1,23 @@ + +function restrict_map(restrict) { + let map_restriction = { + latLngBounds: g_world_bound, + strictBounds: true, + }; + if (restrict) + g_map.setOptions({restriction: map_restriction,}); + else + g_map.setOptions({restriction: null,}); +}; + function create_map(map_div) { // default map center to france let map_center = coordinates_default; // map_center = {lat:-2.515748362923059, lng:32.93366215464864}; - let world_bound = g_init_bounds; + let map_restriction = { + latLngBounds: g_world_bound, + strictBounds: true, + }; let map_options = { /* map options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions */ disableDefaultUI: true, @@ -19,10 +34,7 @@ function create_map(map_div) { //draggable: "true", // deprecated center: map_center, - restriction: { - latLngBounds: world_bound, - strictBounds: true, - }, + restriction: map_restriction, } return new google.maps.Map(map_div, map_options); diff --git a/srcs/plugins/map_prof/scripts/mp_create_markers.js b/srcs/plugins/map_prof/scripts/mp_create_markers.js index 42a4d4e..00838d2 100644 --- a/srcs/plugins/map_prof/scripts/mp_create_markers.js +++ b/srcs/plugins/map_prof/scripts/mp_create_markers.js @@ -11,13 +11,6 @@ function create_markers(map, locations, infowindow) { let icon_circle_radius = 40 - icon_stroke_width / 2; -// let svg_icon = window.btoa(` -// -// -// -// -// `); - let markers = []; for (loc of locations) { @@ -54,9 +47,6 @@ function create_markers(map, locations, infowindow) { 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); diff --git a/srcs/plugins/map_prof/scripts/mp_draw_clusters.js b/srcs/plugins/map_prof/scripts/mp_draw_clusters.js index 5f2a74a..8f00a8a 100644 --- a/srcs/plugins/map_prof/scripts/mp_draw_clusters.js +++ b/srcs/plugins/map_prof/scripts/mp_draw_clusters.js @@ -48,5 +48,11 @@ function draw_clusters(map, markers) { } } - return new markerClusterer.MarkerClusterer({ map, markers, renderer }); + let onClusterClick = (_, cluster, map) => { + restrict_map(false); + map.fitBounds(cluster.bounds); + restrict_map(true); + }; + + return new markerClusterer.MarkerClusterer({ map, markers, renderer, onClusterClick }); } diff --git a/srcs/plugins/map_prof/scripts/mp_filter_events.js b/srcs/plugins/map_prof/scripts/mp_filter_events.js index 6b4a340..0e6e91a 100644 --- a/srcs/plugins/map_prof/scripts/mp_filter_events.js +++ b/srcs/plugins/map_prof/scripts/mp_filter_events.js @@ -93,6 +93,8 @@ function is_element_unchecked(element) { function filter_show_only_selection(element, indexes, menu, add = false, zoom_in = true) { + g_infowindow.close(); + // BAD WORKAROUND solution because we can't actually put onclick event inside select options // on chrome, so I have to recover the indexes another way if (element.type == "select-one") { @@ -115,7 +117,6 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in g_marker_cluster.clearMarkers(true); let marker = g_markers[0]; -// let position = marker.getPosition(); let current_bounds = g_map.getBounds(); let bounds = new google.maps.LatLngBounds(); @@ -134,8 +135,10 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in g_map.setCenter(position); g_map.setZoom(max_zoom); } - else if (indexes_count > 1) + else if (indexes_count > 1) { + console.log("index_bound"); g_map.fitBounds(bounds); + } } } @@ -154,10 +157,13 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in } function filter_show_all() { + g_infowindow.close(); + g_indexes = {}; g_marker_cluster.clearMarkers(true); g_marker_cluster.addMarkers(g_markers); - //g_map.fitBounds(g_init_bounds); + /* dont use fitBounds because it's not well centered */ + //g_map.fitBounds(g__init_bounds); g_map.setCenter(coordinates_default); g_map.setZoom(2); } diff --git a/srcs/plugins/map_prof/scripts/mp_init_map.js b/srcs/plugins/map_prof/scripts/mp_init_map.js index 3c4c22c..1e652ab 100644 --- a/srcs/plugins/map_prof/scripts/mp_init_map.js +++ b/srcs/plugins/map_prof/scripts/mp_init_map.js @@ -2,14 +2,14 @@ let g_map = {}; let g_markers = []; let g_marker_cluster = {}; -const g_init_bounds = { +let g_indexes = {}; +let g_infowindow = {}; +const g_world_bound = { north: 80, south: -80, west: -180, east: 180, }; -let g_indexes = {}; -let g_infowindow = {}; function mp_init_map() { @@ -51,26 +51,22 @@ function mp_init_map() { //let filters_div = document.getElementById("ljdp_map_filters"); g_infowindow = new google.maps.InfoWindow(); - - /* - * DRAW MAP - */ - g_map = create_map(map_div); g_markers = create_markers(g_map, locations, g_infowindow); g_marker_cluster = draw_clusters(g_map, g_markers); - //console.log("locations:"); - //console.log(locations); - //console.log("filters:"); - //console.log(filters); - //console.log("markers:"); - //console.log(g_markers); - - - // add listener to close infowindow at any click on map + // add listener to close infowindow + // https://developers.google.com/maps/documentation/javascript/events g_map.addListener('click', function() { g_infowindow.close(); }); + g_map.addListener('drag', function() { + g_infowindow.close(); + }); + g_map.addListener('zoom_changed', function() { + g_infowindow.close(); + }); + + //g_map.addListener('clusteringbegin', restrict_map(false)); }