532 lines
19 KiB
PHP
532 lines
19 KiB
PHP
<?php
|
||
|
||
|
||
//Get societes from class to display the map.
|
||
$societes = CSociete::get_all_societe_to_js();
|
||
$societes = str_replace('"this.pinOn.orgPin"','this.pinOn.orgPin',$societes);
|
||
$societes = str_replace('"this.pinOn.redPin"','this.pinOn.redPin',$societes);
|
||
$societes = str_replace('"this.pinOn.bluePin"','this.pinOn.bluePin',$societes);
|
||
$societes = str_replace('"this.pinOn.purplePin"','this.pinOn.purplePin',$societes);
|
||
$societes = str_replace('"this.pinOn.greenPin"','this.pinOn.greenPin',$societes);
|
||
|
||
$societes = str_replace('"this.pinOn.coralPin"','this.pinOn.coralPin',$societes);
|
||
$societes = str_replace('"this.pinOn.emeraldPin"','this.pinOn.emeraldPin',$societes);
|
||
$societes = str_replace('"this.pinOn.beigePin"','this.pinOn.beigePin',$societes);
|
||
$societes = str_replace('"this.pinOn.grayPin"','this.pinOn.grayPin',$societes);
|
||
$societes = str_replace('"this.pinOn.pinkPin"','this.pinOn.pinkPin',$societes);
|
||
$societes = str_replace('"this.pinOn.brownPin"','this.pinOn.brownPin',$societes);
|
||
$societes = str_replace('"this.pinOn.yellowPin"','this.pinOn.yellowPin',$societes);
|
||
|
||
|
||
$societes = str_replace('"this.pinOn.multiPin"','this.pinOn.multiPin',$societes);
|
||
|
||
global $wpdb;
|
||
|
||
?>
|
||
|
||
<!---- POC Google map implantations ------>
|
||
<style>
|
||
#implantation-wap {
|
||
height:700px;
|
||
}
|
||
.wrapperMap h2 {
|
||
font-size:1em;
|
||
margin:0;
|
||
}
|
||
.wrapperMap hr {
|
||
margin: 5px 0;
|
||
}
|
||
.map_section .wrapperMap {
|
||
position: absolute;
|
||
bottom:100%;
|
||
}
|
||
.map_section .wrapperMap #map {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 650px; }
|
||
.map_section .wrapperMap .ctrl {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background-color: white;
|
||
padding: 10px;
|
||
width: 280px;
|
||
float:left; }
|
||
|
||
.pin-list {
|
||
columns: 2;
|
||
}
|
||
|
||
.pin-list>* {
|
||
-webkit-column-break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.pin-title {
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.pin-wrap p {
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.map_section .wrapperMap .ctrl p {
|
||
display: flex;
|
||
align-items:center;
|
||
margin-bottom: 5px;
|
||
/* width: 50%;
|
||
float: left;*/
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin {
|
||
-webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75);
|
||
box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.75);
|
||
position: relative;
|
||
display: inline-block;
|
||
height: 30px;
|
||
width: 30px;
|
||
flex: 0 0 auto;
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.blue:before {
|
||
background-color: #557AD8; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.orange:before {
|
||
background-color: #E3932E; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.red:before {
|
||
background-color: #DC2034; }
|
||
|
||
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.coral:before {
|
||
background-color: #9B27AF; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.emerald:before {
|
||
background-color: #673AB6; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.beige:before {
|
||
background-color: #CCDB39; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.gray:before {
|
||
background-color: #00BBD3; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.pink:before {
|
||
background-color: #785548; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.brown:before {
|
||
background-color: #3567FE; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.yellow:before {
|
||
background-color: #A72C00; }
|
||
|
||
|
||
|
||
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.purple:before {
|
||
background-color: #C96391; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.green:before {
|
||
background-color: #03841e; }
|
||
|
||
|
||
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.amont:before {
|
||
background-color: #6fbc45;
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.traiteur:before {
|
||
background-color: #f29100;
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.internationnal:before {
|
||
background-color: #b24881;
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.plateformes:before {
|
||
background-color: #6d6d6d;
|
||
}
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.volaille:before {
|
||
background-color: #DC2034;
|
||
}
|
||
|
||
|
||
.map_section .wrapperMap .ctrl p .ckeckPin:before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
-ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
width: 60%;
|
||
height: 60%; }
|
||
.map_section .wrapperMap .ctrl p .ckeckPin.unckeck:before {
|
||
background-color: transparent; }
|
||
.map_section .wrapperMap .ctrl p span {
|
||
margin-left: 10px;
|
||
padding-top: 3px;
|
||
display: inline-block; }
|
||
|
||
.map_section .wrapperSociete {
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: -55%;
|
||
}
|
||
.map_section .wrapperSociete #blocSociete {
|
||
opacity: 0;
|
||
display: none;
|
||
position: relative;
|
||
margin-left: 20px;
|
||
background-color: #FFF;
|
||
width: 450px;
|
||
padding: 20px;
|
||
border-bottom: 5px solid #DC2034;
|
||
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
|
||
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
|
||
z-index: 3; }
|
||
.map_section .wrapperSociete #blocSociete.blue {
|
||
border-bottom: 5px solid #557AD8; }
|
||
.map_section .wrapperSociete #blocSociete.blue h1, .map_section .wrapperSociete #blocSociete.blue a {
|
||
color: #557AD8; }
|
||
.map_section .wrapperSociete #blocSociete.red {
|
||
border-bottom: 5px solid #DC2034; }
|
||
.map_section .wrapperSociete #blocSociete.red h1, .map_section .wrapperSociete #blocSociete.red a {
|
||
color: #DC2034; }
|
||
.map_section .wrapperSociete #blocSociete.purple {
|
||
border-bottom: 5px solid #C96391; }
|
||
.map_section .wrapperSociete #blocSociete.purple h1, .map_section .wrapperSociete #blocSociete.purple a {
|
||
color: #C96391; }
|
||
.map_section .wrapperSociete #blocSociete.orange {
|
||
border-bottom: 5px solid #E3932E; }
|
||
.map_section .wrapperSociete #blocSociete.orange h1, .map_section .wrapperSociete #blocSociete.orange a {
|
||
color: #E3932E; }
|
||
.map_section .wrapperSociete #blocSociete.green {
|
||
border-bottom: 5px solid #03841e; }
|
||
.map_section .wrapperSociete #blocSociete.green h1, .map_section .wrapperSociete #blocSociete.green a {
|
||
color: #03841e; }
|
||
.map_section .wrapperSociete #blocSociete .close {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 10px;
|
||
right: 10px; }
|
||
.map_section .wrapperSociete header img {
|
||
max-height: 82px;
|
||
width: auto;
|
||
float: left;
|
||
margin-right: 14px; }
|
||
|
||
.map_section .wrapperSociete p {
|
||
color: #949494; }
|
||
.map_section .wrapperSociete b {
|
||
font-weight: normal;
|
||
color: #222222; }
|
||
.map_section .wrapperLegende {
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto; }
|
||
.map_section .wrapperLegende .txtLegende {
|
||
background-color: #92c0d3;
|
||
position: absolute;
|
||
z-index: 3;
|
||
width: 385px;
|
||
top: 50px;
|
||
padding: 30px;
|
||
border-radius: 15px; }
|
||
|
||
.map_section .wrapperLegende .txtLegende h1 {
|
||
color: #ffffff;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
font-size:1em;
|
||
}
|
||
.map_section .wrapperLegende .txtLegende p {
|
||
color: #ffffff;
|
||
font-style: italic;
|
||
padding-right: 80px; }
|
||
|
||
.map_section .wrapperLegende .txtLegende p i {
|
||
font-size: 42px;
|
||
float: left;
|
||
margin-right: 13px;
|
||
margin-top: 3px; }
|
||
|
||
#blocSociete hr {
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.blocSociete-titre {
|
||
font-size: 1em;
|
||
margin:0;
|
||
}
|
||
|
||
.map-implantation .implantation-container {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 1.2%;
|
||
z-index: 13;
|
||
font-size:2em;
|
||
}
|
||
#map_anchor {
|
||
height: 140px;
|
||
width: 350px;
|
||
float: left;
|
||
top: 251px;
|
||
left: 2px;
|
||
position: absolute;
|
||
}
|
||
|
||
.map-text {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
bottom: 2%;
|
||
z-index: 1;
|
||
color: #fff;
|
||
padding: 10px;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
transform: translateY(-50%);
|
||
max-width: 100%;
|
||
}
|
||
|
||
.effectif {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
<section style="position:relative;">
|
||
<div class="map-text">Cliquez sur les points pour visualiser les informations de l’implantation</div>
|
||
<div id="implantation-wap" class="google-map"></div>
|
||
|
||
<div id="map_anchor" class="map_section">
|
||
<div class="wrapperMap">
|
||
<div class="ctrl">
|
||
<h2>Filtrer les implantations</h2>
|
||
<hr>
|
||
<div class="pin-list">
|
||
<!--<div class="pin-wrap">
|
||
<div class="pin-title"><i class="parent" ></i><span>Volaille</span></div>
|
||
|
||
<p><i class="children ckeckPin coral" ></i><span>Le Gaulois/Loué</span></p>
|
||
<p><i class="children ckeckPin emerald" ></i><span>Sud-Est</span></p>
|
||
<p><i class="children ckeckPin beige" ></i><span>SNV</span></p>
|
||
<p><i class="children ckeckPin gray" ></i><span>Cailles Robin</span></p>
|
||
<p><i class="children ckeckPin pink" ></i><span>Maitre Coq</span></p>
|
||
<p><i class="children ckeckPin brown" ></i><span>SBV</span></p>
|
||
<p><i class="children ckeckPin yellow" ></i><span>Hauts-De-France</span></p>
|
||
</div>-->
|
||
<div class="pin-wrap">
|
||
<div class="pin-title"><i class="parent" ></i><span>Pôles</span></div>
|
||
<p><i class="ckeckPin red volaille" ></i><span>Volaille</span></p>
|
||
<p><i class="ckeckPin blue amont" ></i><span>Amont</span></p>
|
||
<p><i class="ckeckPin orange traiteur" ></i><span>Traiteur</span></p>
|
||
<p><i class="ckeckPin purple internationnal" ></i><span>Internationnal</span></p>
|
||
<p><i class="ckeckPin green plateformes" ></i><span>Plateformes</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrapperSociete">
|
||
<div id="blocSociete">
|
||
<i class="fas fa-times close"></i>
|
||
<header>
|
||
<img class="logoSociete" src="" alt="">
|
||
<div class="info">
|
||
<div class="blocSociete-titre"></>
|
||
<p class="filiere"><span></span></p>
|
||
<p class="responsable"><b>Responsable : </b><span></span></p>
|
||
</div>
|
||
</header>
|
||
<hr>
|
||
<p class="effectif"><b>Effectifs : </b><span></span> salariés</p>
|
||
<div class="adresse"><b>Adresse : </b><div></div></div>
|
||
<p class="contact"><b>Contact : </b><span></span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASv6sEn5Fomicc_GmQUKr6mGOkfuGpg18"></script>
|
||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
|
||
|
||
<script>
|
||
var url_theme = '<?php echo get_template_directory_uri(); ?>/';
|
||
|
||
var styles = [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.man_made","elementType":"labels.text.fill","stylers":[{"lightness":"0"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"lightness":"-63"}]},{"featureType":"road.arterial","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#92c0d3"}]}];
|
||
var center; //centre de la carte
|
||
var zoom;
|
||
var map; //la carte
|
||
var oms;
|
||
var allMarkers = [];
|
||
function initMap() {
|
||
map = new google.maps.Map(document.getElementById('implantation-wap'), {
|
||
center: center,
|
||
zoom: zoom,
|
||
//disableDefaultUI: true,
|
||
zoomControl: true,
|
||
zoomControlOptions: {
|
||
position: google.maps.ControlPosition.RIGHT_CENTER
|
||
},
|
||
mapTypeControl: false,
|
||
streetViewControl: false,
|
||
fullscreenControl: false,
|
||
scrollwheel: false,
|
||
draggable : true,
|
||
styles: styles
|
||
});
|
||
oms = new OverlappingMarkerSpiderfier(map, {
|
||
markersWontMove: true,
|
||
markersWontHide: true,
|
||
basicFormatEvents: true,
|
||
nearbyDistance: 50,
|
||
circleSpiralSwitchover: Infinity,
|
||
circleFootSeparation : 50,
|
||
circleStartAngle : 3.14 / 6,
|
||
});
|
||
google.maps.event.addDomListener(window, 'resize', function() {
|
||
map.setCenter(center);
|
||
map.setZoom(zoom);
|
||
});
|
||
}
|
||
|
||
/* Gestion du zoom de la carte selon la largeur du viewport */
|
||
$(window).resize(function() {
|
||
if(window.matchMedia("(min-width: 769px)").matches){
|
||
center = {lat: 47.121, lng: -4.675392};
|
||
zoom = 6;
|
||
google.maps.event.trigger(map, "resize");
|
||
} else {
|
||
zoom = 5;
|
||
center = {lat: 49.132846, lng: 1.625977};
|
||
google.maps.event.trigger(map, "resize");
|
||
}
|
||
});
|
||
|
||
this.pinOn = {
|
||
'redPin' : url_theme + 'assets/images/red-pin.png',
|
||
'bluePin' : url_theme + 'assets/images/amont-pin.png',
|
||
'orgPin' : url_theme + 'assets/images/traiteur-pin.png',
|
||
'purplePin' : url_theme + 'assets/images/internationnal-pin.png',
|
||
'multiPin' : url_theme + 'assets/images/mulit-pin.png',
|
||
'greenPin' : url_theme + 'assets/images/plateformes-pin.png',
|
||
|
||
'coralPin' : url_theme + 'assets/images/222.png',
|
||
'emeraldPin' : url_theme + 'assets/images/333.png',
|
||
'beigePin' : url_theme + 'assets/images/444.png',
|
||
'graydPin' : url_theme + 'assets/images/555.png',
|
||
'pinkdPin' : url_theme + 'assets/images/666.png',
|
||
'browndPin' : url_theme + 'assets/images/777.png',
|
||
'yellowPin' : url_theme + 'assets/images/888.png'
|
||
};
|
||
|
||
this.myAddress = <?php echo $societes;?>,
|
||
style = [
|
||
{ "hue": "#8800ff" },
|
||
{ "saturation": -95 },
|
||
{ "visibility": "on" }
|
||
];
|
||
|
||
if(window.matchMedia("(min-width: 769px)").matches){
|
||
//center = {lat: 46.121, lng: -4.675392};
|
||
center = {lat: 47.888, lng: 2.644};
|
||
//47.888005, 2.644068
|
||
zoom = 5;
|
||
google.maps.event.trigger(map, "resize");
|
||
} else {
|
||
zoom = 4;
|
||
center = {lat: 49.132846, lng: 1.625977};
|
||
google.maps.event.trigger(map, "resize");
|
||
}
|
||
function loadContent(societe){
|
||
if(societe.data.imgLogo != ""){
|
||
$('#blocSociete .logoSociete').attr('src', societe.data.imgLogo);
|
||
$('#blocSociete .logoSociete').show();
|
||
}else{$('#blocSociete .logoSociete').hide();}
|
||
|
||
if(societe.data.society != ""){
|
||
$('#blocSociete .titre').html( societe.data.society);
|
||
$('#blocSociete .titre').show();
|
||
}else{$('#blocSociete .titre').hide();}
|
||
|
||
if(societe.data.filiere != ""){
|
||
$('#blocSociete .filiere span').html( societe.data.filiere);
|
||
$('#blocSociete .filiere').show();
|
||
}else{$('#blocSociete .filiere').hide();}
|
||
|
||
if(societe.data.responsable != ""){
|
||
$('#blocSociete .responsable span').html( societe.data.responsable);
|
||
$('#blocSociete .responsable').show();
|
||
}else{$('#blocSociete .responsable').hide();}
|
||
|
||
$('#blocSociete').removeClass();
|
||
if(societe.tag[0] != ""){
|
||
$('#blocSociete').addClass(societe.tag[0]);
|
||
}
|
||
|
||
if(societe.data.effective != ""){
|
||
$('#blocSociete .effectif span').html( societe.data.effective);
|
||
$('#blocSociete .effectif').show();
|
||
}else{$('#blocSociete .effectif').hide();}
|
||
|
||
if(societe.data.address1 != ""){
|
||
$('#blocSociete .adresse div').html( societe.data.address1);
|
||
$('#blocSociete .adresse').show();
|
||
}else{$('#blocSociete .adresse').hide();}
|
||
|
||
if(societe.data.contact != ""){
|
||
$('#blocSociete .contact span').html( societe.data.contact);
|
||
$('#blocSociete .contact').show();
|
||
}else{$('#blocSociete .contact').hide();}
|
||
|
||
if(societe.url != ""){
|
||
$('#blocSociete .url a').attr('href', societe.url);
|
||
$('#blocSociete .url a').html(societe.url);
|
||
$('#blocSociete .url').show();
|
||
}else{$('#blocSociete .url').hide();}
|
||
}
|
||
|
||
// ---- Gestion des clicks sur les filtres
|
||
$(".ckeckPin").click(function(event) {
|
||
event.preventDefault();
|
||
$(this).toggleClass('unckeck');
|
||
|
||
$.each(allMarkers, function (index, mark) {
|
||
if($("."+mark.tag).hasClass('unckeck')) {
|
||
mark.setVisible(false);
|
||
}else{
|
||
mark.setVisible(true);
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
$(document).ready(function() {
|
||
|
||
initMap();
|
||
$.each(myAddress, function (index, societe) {
|
||
var mark = new google.maps.Marker({
|
||
position: {
|
||
lat: parseFloat(societe.lat),
|
||
lng: parseFloat(societe.lng)
|
||
},
|
||
icon: societe.options.icon,
|
||
animation: google.maps.Animation.DROP,
|
||
tag: societe.tag[0]
|
||
});
|
||
oms.addMarker(mark);
|
||
mark.addListener('spider_click', function() {
|
||
if(window.matchMedia("(min-width: 769px)").matches){
|
||
if($('#blocSociete').css('opacity') == 0){
|
||
loadContent(societe);
|
||
$('div#blocSociete').show();
|
||
$('div#blocSociete').animate({opacity: "1"}, 200);
|
||
} else {
|
||
$('div#blocSociete').animate({opacity: "0"}, 200, function(){loadContent(societe);});
|
||
$('div#blocSociete').animate({opacity: "1"}, 200);
|
||
}
|
||
} else {
|
||
$('#blocSociete').css('opacity',1);
|
||
if($('#blocSociete').is(":visible")){
|
||
$('#blocSociete').slideUp(400, function(){loadContent(societe);});
|
||
$('#blocSociete').slideDown(400);
|
||
} else {
|
||
loadContent(societe);
|
||
$('#blocSociete').slideDown(400);
|
||
}
|
||
}
|
||
});
|
||
allMarkers.push(mark);
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|