jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

The icon can now be changed in real time on the place edit page

Browse source
This commit is contained in:
Jonny Barnes 2017-05-26 10:05:04 +01:00
parent 822bdd70f9
commit d86630dd0d
29 changed files with 66 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
resources/assets/es6/edit-place-icon.js vendored Normal file
View file

@ -0,0 +1,7 @@
//edit-place-icon.js
export default function getIcon() {
let iconOption = document.querySelector('#icon');
return iconOption.value;
}

17
resources/assets/es6/places.js vendored Normal file
View file

@ -0,0 +1,17 @@
//places.js
import addMap from './mapbox-utils';
import getIcon from './edit-place-icon';
let div = document.querySelector('.map');
let map = addMap(div);
let selectElem = document.querySelector('select[name="icon"]');
selectElem.addEventListener('click', function () {
let source = map.getSource('points');
let newIcon = getIcon();
if (source._data.features[0].properties.icon != newIcon) {
source._data.features[0].properties.icon = newIcon;
map.getSource('points').setData(source._data);
}
});

4
resources/assets/sass/mapbox.scss vendored
View file

@ -5,6 +5,10 @@
height: 200px;
}
.mapboxgl-ctrl-logo {
border-bottom: none;
}
.marker {
background-image: url(data:image/png;base64,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);
background-size: contain;