406 lines
11 KiB
Smarty
406 lines
11 KiB
Smarty
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
|
|
|
|
<style>
|
|
|
|
|
|
/* The page is split between map and sidebar - the sidebar gets 1/3, map
|
|
gets 2/3 of the page. You can adjust this to your personal liking. */
|
|
.sidebar {
|
|
|
|
border-right: 1px solid rgba(0, 0, 0, 0.25);
|
|
max-height: 400px;
|
|
}
|
|
|
|
.map {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.heading {
|
|
background: #fff;
|
|
border-bottom: 0px solid #eee;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.searchMaps {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
Lista
|
|
|
|
*/
|
|
|
|
.listings {
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.listings .item {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.listings .item:last-child { border-bottom: none; }
|
|
|
|
.listings .item .title {
|
|
display: block;
|
|
color: #00853e;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.listings .item .title small { font-weight: 400; }
|
|
|
|
.listings .item.active .title,
|
|
.listings .item .title:hover { color: #8cc63f; }
|
|
|
|
.listings .item.active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
height: 3px;
|
|
border-left: 0;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #00853e;
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
popup
|
|
|
|
*/
|
|
|
|
/* Marker tweaks */
|
|
.mapboxgl-popup-close-button {
|
|
display: none;
|
|
}
|
|
|
|
.mapboxgl-popup-content {
|
|
font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', sans-serif;
|
|
padding: 0;
|
|
width: 180px;
|
|
}
|
|
|
|
.mapboxgl-popup-content h3 {
|
|
background: #91c949;
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 10px;
|
|
border-radius: 3px 3px 0 0;
|
|
font-weight: 700;
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.mapboxgl-popup-content h4 {
|
|
margin: 0;
|
|
padding: 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mapboxgl-popup-content div {
|
|
padding: 10px;
|
|
}
|
|
|
|
.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
|
|
border-bottom-color: #91c949;
|
|
}
|
|
|
|
.markerMap {
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 56px;
|
|
width: 56px;
|
|
background-image: url({$urlStatic}/image/Strona/Module/Maps/marker.png);
|
|
}
|
|
|
|
.markerMapHean {
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 56px;
|
|
width: 56px;
|
|
background-image: url({$urlStatic}/image/Strona/Module/Maps/marker_hean.png);
|
|
}
|
|
|
|
.mapboxgl-popup {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<section id="contentMain" class="main style3 primary" >
|
|
<div class="container trescSG" style="color: #000099">
|
|
<header>
|
|
<h2 style="color: #000099">Mapy</h2>
|
|
</header>
|
|
<div class="trescSGText">
|
|
np. sklepów, oddziałów, itp.
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="cb"></div>
|
|
<section class="container" style="margin-bottom: 100px;">
|
|
<div class="row">
|
|
<div class="sidebar col-4">
|
|
<div class='heading'>
|
|
<h1>Our locations</h1>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="searchMaps">
|
|
<input name="search" id="search" onkeyup="GetTableContent('{$url}Ajax', $('#search').val());" placeholder="{'find_by_city'|translate}" />
|
|
</div>
|
|
<div id='listings' class='listings'></div>
|
|
</div>
|
|
<div id="map" class="map col-8"></div>
|
|
</div>
|
|
<div class="cb"></div>
|
|
</section>
|
|
<div class="cb"></div>
|
|
|
|
{literal}
|
|
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoibWFrbCIsImEiOiJja3o4djhtaDQwMXE5Mm5vMzF0MWhxYzJjIn0.-fkKhM_PdPA09u4x7U78mw';
|
|
|
|
/**
|
|
* Add the map to the page
|
|
*/
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/light-v10',
|
|
center: [19.138,52.241],
|
|
zoom: 5,
|
|
scrollZoom: true
|
|
});
|
|
|
|
const stores = {/literal}{$mapsListJs};{literal}
|
|
|
|
/**
|
|
* Assign a unique id to each store. You'll use this `id`
|
|
* later to associate each point on the map with a listing
|
|
* in the sidebar.
|
|
*/
|
|
//stores.features.forEach((store, i) => {
|
|
// store.properties.id = i;
|
|
//});
|
|
|
|
/**
|
|
* Wait until the map loads to make changes to the map.
|
|
*/
|
|
map.on('load', () => {
|
|
/**
|
|
* This is where your '.addLayer()' used to be, instead
|
|
* add only the source without styling a layer
|
|
*/
|
|
map.addSource('places', {
|
|
'type': 'geojson',
|
|
'data': stores
|
|
});
|
|
|
|
/**
|
|
* Add all the things to the page:
|
|
* - The location listings on the side of the page
|
|
* - The markers onto the map
|
|
*/
|
|
buildLocationList(stores);
|
|
addMarkers();
|
|
});
|
|
|
|
/**
|
|
* Add a marker to the map for every store listing.
|
|
**/
|
|
function addMarkers() {
|
|
/* For each feature in the GeoJSON object above: */
|
|
for (const marker of stores.features) {
|
|
|
|
/* Create a div element for the marker. */
|
|
const el = document.createElement('div');
|
|
/* Assign a unique `id` to the marker. */
|
|
el.id = `marker-${marker.properties.id}`;
|
|
/* Assign the `marker` class to each marker for styling. */
|
|
if (marker.properties.type == 1) {
|
|
el.className = 'markerMap';
|
|
} else {
|
|
el.className = 'markerMapHean';
|
|
}
|
|
/**
|
|
* Create a marker using the div element
|
|
* defined above and add it to the map.
|
|
**/
|
|
new mapboxgl.Marker(el, { offset: [0, -23] })
|
|
.setLngLat(marker.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
/**
|
|
* Listen to the element and when it is clicked, do three things:
|
|
* 1. Fly to the point
|
|
* 2. Close all other popups and display popup for clicked store
|
|
* 3. Highlight listing in sidebar (and remove highlight for all other listings)
|
|
**/
|
|
el.addEventListener('click', (e) => {
|
|
/* Fly to the point */
|
|
flyToStore(marker);
|
|
/* Close all other popups and display popup for clicked store */
|
|
createPopUp(marker);
|
|
/* Highlight listing in sidebar */
|
|
const activeItem = document.getElementsByClassName('active');
|
|
e.stopPropagation();
|
|
if (activeItem[0]) {
|
|
activeItem[0].classList.remove('active');
|
|
}
|
|
const listing = document.getElementById(
|
|
`listing-${marker.properties.id}`
|
|
);
|
|
listing.classList.add('active');
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add a listing for each store to the sidebar.
|
|
**/
|
|
function buildLocationList(stores) {
|
|
for (const store of stores.features) {
|
|
/* Add a new listing section to the sidebar. */
|
|
const listings = document.getElementById('listings');
|
|
const listing = listings.appendChild(document.createElement('div'));
|
|
/* Assign a unique `id` to the listing. */
|
|
listing.id = `listing-${store.properties.id}`;
|
|
/* Assign the `item` class to each listing for styling. */
|
|
listing.className = 'item';
|
|
|
|
/* Add the link to the individual listing created above. */
|
|
const link = listing.appendChild(document.createElement('a'));
|
|
link.href = '#';
|
|
link.className = 'title';
|
|
link.id = `link-${store.properties.id}`;
|
|
link.innerHTML = `${store.properties.name}`;
|
|
|
|
/* Add details to the individual listing. */
|
|
const details = listing.appendChild(document.createElement('div'));
|
|
details.innerHTML = `${store.properties.address} <p>${store.properties.city}</p>`;
|
|
if (store.properties.phone) {
|
|
details.innerHTML += ` · ${store.properties.phoneFormatted}`;
|
|
}
|
|
|
|
/**
|
|
* Listen to the element and when it is clicked, do four things:
|
|
* 1. Update the `currentFeature` to the store associated with the clicked link
|
|
* 2. Fly to the point
|
|
* 3. Close all other popups and display popup for clicked store
|
|
* 4. Highlight listing in sidebar (and remove highlight for all other listings)
|
|
**/
|
|
link.addEventListener('click', function () {
|
|
for (const feature of stores.features) {
|
|
if (this.id === `link-${feature.properties.id}`) {
|
|
flyToStore(feature);
|
|
createPopUp(feature);
|
|
}
|
|
}
|
|
const activeItem = document.getElementsByClassName('active');
|
|
if (activeItem[0]) {
|
|
activeItem[0].classList.remove('active');
|
|
}
|
|
this.parentNode.classList.add('active');
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Use Mapbox GL JS's `flyTo` to move the camera smoothly
|
|
* a given center point.
|
|
**/
|
|
function flyToStore(currentFeature) {
|
|
console.log(currentFeature.geometry.coordinates);
|
|
map.flyTo({
|
|
center: currentFeature.geometry.coordinates,
|
|
zoom: 15
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create a Mapbox GL JS `Popup`.
|
|
**/
|
|
function createPopUp(currentFeature) {
|
|
console.log(currentFeature);
|
|
|
|
//alert(currentFeature);
|
|
const popUps = document.getElementsByClassName('mapboxgl-popup');
|
|
if (popUps[0]) popUps[0].remove();
|
|
const popup = new mapboxgl.Popup({ closeOnClick: false })
|
|
.setLngLat(currentFeature.geometry.coordinates)
|
|
.setHTML(
|
|
`<h3>${currentFeature.properties.name}</h3>
|
|
<h4>${currentFeature.properties.address}</h4>
|
|
<h4>${currentFeature.properties.city}</h4>
|
|
<a class="action secondary" href="https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${currentFeature.properties.googleCor}" target="_blank">Wyznacz trasę</a>
|
|
`
|
|
)
|
|
.addTo(map);
|
|
}
|
|
|
|
function GetTableContent(url, search) {
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url,
|
|
cache: false,
|
|
data: ({search: search}),
|
|
success: function (html) {
|
|
$('#listings').html(html);
|
|
console.log(html);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function flyToStoreAjax(coordinates) {
|
|
var arrayCord = JSON.parse(coordinates);
|
|
console.log(stores);
|
|
map.flyTo({
|
|
center: arrayCord,
|
|
zoom: 15
|
|
});
|
|
}
|
|
|
|
function createPopUpAjax(coordinates, html) {
|
|
//alert(currentFeature);
|
|
var arrayCord = JSON.parse(coordinates);
|
|
const popUps = document.getElementsByClassName('mapboxgl-popup');
|
|
if (popUps[0]) popUps[0].remove();
|
|
const popup = new mapboxgl.Popup({ closeOnClick: false })
|
|
.setLngLat(arrayCord)
|
|
.setHTML(html)
|
|
.addTo(map);
|
|
}
|
|
|
|
</script>
|
|
{/literal} |