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

separate js functions in multiple files

Browse Source
This commit is contained in:
lenovo
2022-11-06 10:57:33 +01:00
parent 4845e4ddf8
commit 767aa3eff7
4 changed files with 58 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,10 +92,12 @@ 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__), '', '', '');
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);
wp_enqueue_style( 'mp_style', plugins_url('styles/mp_style.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_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();

35
srcs/plugins/map_prof/scripts/mp_create_markers.js Normal file
View File

@@ -0,0 +1,35 @@
function create_markers(map, locations, infowindow) {
/*
* following variable are created by mp_add_to_script.php
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
*/
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 markers = [];
for (loc of locations) {
let marker = new google.maps.Marker({
position: loc.coordinates,
map: map,
icon: icon_options,
});
attach_info_window(map, marker, loc.events, infowindow);
markers.push(marker);
};
return markers;
}

13
srcs/plugins/map_prof/scripts/mp_info_window.js Normal file
View File

@@ -0,0 +1,13 @@
function attach_info_window(map, marker, events, infowindow) {
/*
* https://developers.google.com/maps/documentation/javascript/infowindows
* https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
*/
marker.addListener('click', () => {
infowindow.setContent("test");
infowindow.open(map, marker);
});
}

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

@@ -39,16 +39,8 @@ function mp_init_map() {
//draggable: "true", //deprecated
center: map_center,
}
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 map_div = document.getElementById("ljdp_map");
let infowindow = new google.maps.InfoWindow();
@@ -56,63 +48,8 @@ function mp_init_map() {
* DRAW MAP
*/
let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options);
let markers = [];
for (loc of locations) {
let marker = new google.maps.Marker({
position: loc.coordinates,
map: map,
icon: icon_options,
});
//marker.content = loc.events;
//attach_info_window(map, marker, marker.content);
let infowindow = new google.maps.InfoWindow({
content: loc.events[0].title,
});
marker.addListener('click', () => {
infowindow.open(map, marker);
});
markers.push(marker);
};
/*
* INFO WINDOW
*
* https://developers.google.com/maps/documentation/javascript/infowindows
* https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
*/
// let infowindow = new google.maps.InfoWindow();
//
// google.maps.event.addListener(marker, 'click', function(map, marker){
// //map.infowindow.setContent(marker.content[0].title);
// map.infowindow.setContent("test");
// map.infowindow.open(map, marker);
// });
// google.maps.event.addListener(marker, 'click', (function(marker) {
// return function() {
// //infowindow.setContent(marker.content[0].title);
// infowindow.setContent("test");
// infowindow.open(map, marker);
// }
// })(marker));
// let infowindow = new google.maps.InfoWindow({
// content: "test",
// });
//
// marker.addListener("click", () => {
// infowindow.open({
// anchor: marker,
// map,
// });
// });
let map = new google.maps.Map(map_div, map_options);
let markers = create_markers(map, locations, infowindow);
/*
* DRAW CLUSTERS