Commit 7f756d11 authored by julien's avatar julien
Browse files

update map demo

parent 7d37c07a
Pipeline #902 failed with stage
in 1 second
......@@ -13,43 +13,21 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
<style>
#map1 {
--zoom-level: 5;
--map-center: LatLng(49.49382, 1.565552);
}
.mapData {
position: absolute;
width: 200px;
z-index: 2000;
left: 2em;
top: 2em;
background: white;
border: 2px solid black;
opacity: .6;
}
.mapData:hover {
opacity: 1;
}
.map {
width: 300px;
height: 300px;
background: orange;
}
.map .leaflet-control-zoom.leaflet-bar.leaflet-control {
display: none;
}
.map:hover .leaflet-control-zoom.leaflet-bar.leaflet-control {
display: block;
background: grey;
}
</style>
......@@ -62,32 +40,31 @@
}
afterRendered(pages) {
mapDataUI();
let mapData = document.createElement('div')
mapData.classList.add('mapData');
document.body.insertAdjacentElement('beforeend', mapData)
document.querySelectorAll('.map').forEach(carte => {
let id = carte.id;
let values = getComputedStyle(carte);
let zoom = values.getPropertyValue('--zoom-level');
let center = filterMap(values.getPropertyValue('--map-center'));
if (!zoom.length) {
console.log(`zoom empty`, zoom)
zoom = 10;
}
let mapCSSvalues = getComputedStyle(carte);
if (!values.getPropertyValue('--map-center').length) {
console.log(`center empty`, center)
center = filterMap(`LatLng(49.49382, 1.565552)`);
}
let zoom = mapCSSvalues.getPropertyValue('--zoom-level') ? mapCSSvalues.getPropertyValue('--zoom-level') : 10;
let center = mapCSSvalues.getPropertyValue('--map-center') ? filterMap(mapCSSvalues.getPropertyValue('--map-center')) : [43.838071, 4.355146];
console.log(`zoom ${zoom}, center ${center}, map: ${id}`)
leaf(carte.id, center, zoom);
})
move();
// getvalue
document.querySelector('#copyMapData').addEventListener('click', function () {
let data = this.parentElement.querySelector('.mapDataCss').textContent;
// console.log(`data`, data)
copyToClip(data)
})
document.querySelectorAll('.close').forEach(close => {
close.addEventListener('click', function () {
this.closest('.show').classList.remove("show");
})
})
}
}
Paged.registerHandlers(MyHandler);
......@@ -101,15 +78,18 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// L.marker([51.5, -0.09]).addTo(map)
gauge.innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
gauge.querySelector('pre').innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
map.on('zoomstart zoom zoomend dragend', function (ev) {
gauge.innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
gauge.classList.add('show');
gauge.querySelector('pre').innerHTML = `#${id}{--zoom-level: ${map.getZoom()}; \n --map-center: ${map.getCenter()};}`;
})
}
function filterMap(center) {
center = center.replace(`LatLng(`, '')
center = center.replace(`)`, '');
......@@ -119,6 +99,101 @@
}
function copyToClip(text) {
navigator.clipboard.writeText(text)
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.log('Error in copying text: ', err);
});
}
function move() {
interact('.drag').draggable({
inertia: false,
onmove: function (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function (event) {
console.log(event);
}
}).allowFrom('.move');
}
function mapDataUI() {
let mapDataStyle = `<style>
.mapData pre {
white-space: pre-wrap;
font-size: 0.9em;
border: 1px solid black;
padding: 1ch;
}
.mapData button {
margin:1em 0;
display: block;
}
.mapData{
padding: 1em 2ch;
position: fixed;
z-index: 90000;
top: 2em;
left:2em;
width: 200px;
background: white;
border: 2px solid black;
display: none} .mapData.show{display: block;
}
.mapData .move {width: 2em;
height: 2em;
position: absolute;
top: 0;
right: 0;
}
@media print {
.mapData.show, .leaflet-control-container {display: none;}
}
</style>`
document.head.insertAdjacentHTML('beforeend', mapDataStyle);
let mapDataHTML = `
<div class="move"> <svg class="svg-icon" viewBox="0 0 20 20"><path d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"></path></svg></div>
<h3>CSS for the map </h3>
<pre class="mapDataCss"></pre>
<button id="copyMapData">Copy to the clipboard</button>
<button class="close">close</button>
`
let mapData = document.createElement('div');
mapData.classList.add('mapData', 'drag');
mapData.innerHTML = mapDataHTML;
document.body.insertAdjacentElement('afterbegin', mapData)
}
</script>
</head>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment