tonyair
/
silverstripe-mapboxfield
mirror of https://github.com/a2nt/silverstripe-mapboxfield.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Map style support + JS linting

This commit is contained in:
Tony Air 2019-09-07 09:02:44 +07:00 committed by GitHub
parent 41ff0e18ae
commit dca136448a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/MapboxField/MapboxField.js
View File

@ -1,4 +1,3 @@
class MapboxField { class MapboxField {
/** /**
* @param {jQuery} $container * @param {jQuery} $container
@ -22,8 +21,8 @@ class MapboxField {
*/ */
_getLngLatValue() { _getLngLatValue() {
return [ return [
this._getLngField().val(), this._getLngField().val(),
this._getLatField().val() this._getLatField().val()
] ]
} }
@ -41,7 +40,7 @@ class MapboxField {
* @private * @private
*/ */
_getLngField() { _getLngField() {
return this.$container.find('input[data-mapbox-field="Longitude"]'); return this.$container.find('input[data-mapbox-field="Longtitude"]');
} }
/** /**
@ -49,7 +48,7 @@ class MapboxField {
* @private * @private
*/ */
_getLatField() { _getLatField() {
return this.$container.find('input[data-mapbox-field="Latitude"]'); return this.$container.find('input[data-mapbox-field="Lattitude"]');
} }
/** /**
@ -65,16 +64,16 @@ class MapboxField {
const map = new mapboxgl.Map({ const map = new mapboxgl.Map({
center: this._getLngLatValue(), center: this._getLngLatValue(),
container: this.$container.find('.mapbox__map').get(0), container: this.$container.find('.mapbox__map').get(0),
style: 'mapbox://styles/mapbox/basic-v9', style: this.$container.data('style') ? this.$container.data('style') : 'mapbox://styles/mapbox/basic-v9',
zoom: 15 zoom: 15,
}); });
// Add marker // Add marker
const marker = new mapboxgl.Marker({ const marker = new mapboxgl.Marker({
draggable: true draggable: true,
}) })
.setLngLat(this._getLngLatValue()) .setLngLat(this._getLngLatValue())
.addTo(map); .addTo(map);
// Udpdate the coordinates after dragging marker // Udpdate the coordinates after dragging marker
marker.on('dragend', () => { marker.on('dragend', () => {
@ -105,6 +104,7 @@ class MapboxField {
_onMarkerUpdate(marker) { _onMarkerUpdate(marker) {
const lngLat = marker.getLngLat(); const lngLat = marker.getLngLat();
this._setLngLatValue([lngLat.lng, lngLat.lat]); this._setLngLatValue([lngLat.lng, lngLat.lat]);
this.$container.parents('form').find('input[name="LatLngOverride"]').prop('checked', true);
} }
} }