update
This commit is contained in:
406
template/partial/Module/Maps.tpl
Normal file
406
template/partial/Module/Maps.tpl
Normal file
@@ -0,0 +1,406 @@
|
||||
<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}
|
||||
Reference in New Issue
Block a user