882 lines
29 KiB
JavaScript
882 lines
29 KiB
JavaScript
(function($){
|
|
|
|
// Globals
|
|
var fieldSelector = false;
|
|
var map = false;
|
|
var currentMarker = false;
|
|
var isPublic = true;
|
|
|
|
function getDefaultCenter() {
|
|
let center = [0, 0]
|
|
|
|
return center;
|
|
}
|
|
|
|
function getDefaultZoom() {
|
|
let zoom = 2;
|
|
|
|
return zoom;
|
|
}
|
|
|
|
// Mapping
|
|
function initializeMap(id) {
|
|
let center = getDefaultCenter();
|
|
let zoom = getDefaultZoom();
|
|
if($('.mapster-map-submission-frontend').length) {
|
|
center = $('.mapster-front-submission-options').data('center');
|
|
zoom = $('.mapster-front-submission-options').data('zoom');
|
|
}
|
|
let mapInit = {
|
|
container: id,
|
|
style: {
|
|
'version': 8,
|
|
"glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
|
|
'sources': {
|
|
'raster-tiles': {
|
|
'type': 'raster',
|
|
'tiles': [
|
|
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
],
|
|
'tileSize': 256,
|
|
'attribution': '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}
|
|
},
|
|
'layers': [
|
|
{
|
|
'id': 'simple-tiles',
|
|
'type': 'raster',
|
|
'source': 'raster-tiles',
|
|
'minzoom': 0,
|
|
'maxzoom': 22
|
|
}
|
|
]
|
|
},
|
|
center: center,
|
|
zoom: zoom
|
|
}
|
|
|
|
let newMap = new maplibregl.Map(mapInit);
|
|
newMap.on('load', () => {
|
|
newMap.resize();
|
|
|
|
generateStyle(); // For loading a base image
|
|
|
|
if(getGeoJSON().features.length > 0) {
|
|
var bbox = turf.bbox(getGeoJSON());
|
|
newMap.fitBounds(bbox, { padding : 20, maxZoom : 13, duration: 0 });
|
|
}
|
|
});
|
|
return newMap;
|
|
}
|
|
|
|
function initializeGeoJSON() {
|
|
|
|
if(getPostType() === 'location') {
|
|
showCurrentCoordinates()
|
|
}
|
|
|
|
getACFValues();
|
|
|
|
map.on('load', () => {
|
|
map.addSource('feature', {
|
|
type : 'geojson',
|
|
data : getGeoJSON()
|
|
})
|
|
addLayers()
|
|
})
|
|
}
|
|
|
|
function addLayers() {
|
|
if(getPostType() === 'location') {
|
|
if(getLocationType() === 'circle') {
|
|
map.addLayer({
|
|
id : 'feature',
|
|
type : 'circle',
|
|
source : 'feature'
|
|
});
|
|
}
|
|
if(getLocationType() === 'label' || getLocationType() === 'marker') {
|
|
map.addLayer({
|
|
id : 'feature',
|
|
type : 'symbol',
|
|
source : 'feature'
|
|
});
|
|
if(getLocationType() === 'marker') {
|
|
manageMarker()
|
|
}
|
|
}
|
|
}
|
|
if(getPostType() === 'line') {
|
|
map.addLayer({
|
|
id : 'feature',
|
|
type : 'line',
|
|
source : 'feature'
|
|
});
|
|
}
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill') {
|
|
map.addLayer({
|
|
id : 'feature',
|
|
type : 'fill',
|
|
source : 'feature'
|
|
});
|
|
}
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill-extrusion') {
|
|
map.addLayer({
|
|
id : 'feature',
|
|
type : 'fill-extrusion',
|
|
source : 'feature'
|
|
});
|
|
}
|
|
setPaintAndLayoutProperties()
|
|
}
|
|
|
|
function removeMarker() {
|
|
if(currentMarker) {
|
|
currentMarker.remove();
|
|
}
|
|
}
|
|
|
|
function manageMarker() {
|
|
if(getPostType() === 'location' && getLocationType() === 'marker') {
|
|
removeMarker();
|
|
if(getGeoJSON().features.length > 0) {
|
|
var values = getACFValues()
|
|
var options = values.marker;
|
|
var newMarker = new maplibregl.Marker(options).setLngLat(getGeoJSON().features[0].geometry.coordinates);
|
|
newMarker.addTo(map)
|
|
currentMarker = newMarker
|
|
}
|
|
}
|
|
}
|
|
|
|
function setLocationType() {
|
|
removeMarker()
|
|
if(map.getLayer('feature')) {
|
|
map.removeLayer('feature');
|
|
}
|
|
addLayers()
|
|
setValueChangeListeners()
|
|
}
|
|
|
|
function setPolygonType() {
|
|
if(map.getLayer('feature')) {
|
|
map.removeLayer('feature');
|
|
}
|
|
addLayers()
|
|
setValueChangeListeners()
|
|
}
|
|
|
|
function setPolygonTypeListener() {
|
|
if($('.acf-field[data-name="polygon_style"]').length) {
|
|
$(document).on('change', '.acf-field[data-name="polygon_style"] :input', function() {
|
|
setPolygonType()
|
|
setPaintAndLayoutProperties()
|
|
})
|
|
}
|
|
}
|
|
|
|
function setLocationTypeListener() {
|
|
if($('.acf-field[data-name="location_style"]').length) {
|
|
$(document).on('change', '.acf-field[data-name="location_style"] :input', function() {
|
|
setLocationType()
|
|
setPaintAndLayoutProperties()
|
|
})
|
|
}
|
|
}
|
|
|
|
function setManualEntryListener() {
|
|
$(document).on('click', '#set-manual-point', function() {
|
|
let longitude = $('#mapster-map-point-longitude').val();
|
|
let latitude = $('#mapster-map-point-latitude').val();
|
|
var newGeoJSON = { type : "FeatureCollection", features : [{
|
|
type : "Feature",
|
|
properties : {},
|
|
geometry : {
|
|
type : "Point",
|
|
coordinates : [ parseFloat(longitude), parseFloat(latitude) ]
|
|
}
|
|
}]}
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
}
|
|
|
|
function setPaintAndLayoutProperties() {
|
|
var values = getACFValues()
|
|
if(getPostType() === 'location' && getLocationType() === 'marker') {
|
|
manageMarker();
|
|
} else if((getPostType() === 'location' && getLocationType() !== 'marker' && getLocationType() !== '3d-model') || getPostType() === 'line' || getPostType() === 'polygon') {
|
|
for(var field in values.paint) {
|
|
map.setPaintProperty('feature', `${getLayerType()}${field}`, values.paint[field]);
|
|
}
|
|
for(var field in values.layout) {
|
|
map.setLayoutProperty('feature', `${getLayerType()}${field}`, values.layout[field]);
|
|
}
|
|
} else if(getPostType() === 'location' && getLocationType() === '3d-model') {
|
|
load3DModel();
|
|
}
|
|
}
|
|
|
|
function setValueChangeListeners() {
|
|
var values = getACFValues()
|
|
for(var type in values) {
|
|
for(var field in values[type]) {
|
|
$(document).on('change', `.acf-field[data-name="${field}"] :input`, function() {
|
|
setPaintAndLayoutProperties()
|
|
})
|
|
}
|
|
}
|
|
if(getPostType() === 'line') {
|
|
var specialEvents = ['dashed_line', 'dash_length', 'gap_length'];
|
|
specialEvents.forEach(thisName => {
|
|
$(document).on('change', `.acf-field[data-name="${thisName}"] :input`, function() {
|
|
setPaintAndLayoutProperties()
|
|
});
|
|
});
|
|
}
|
|
if(getPostType() === 'location' && getLocationType() === 'label') {
|
|
var specialEvents = ['label_on', 'icon_on', 'icon-image', 'icon-translate-x', 'icon-translate-y', 'text-translate-x', 'text-translate-y'];
|
|
specialEvents.forEach(thisName => {
|
|
$(document).on('change', `.acf-field[data-name="${thisName}"] :input`, function() {
|
|
setPaintAndLayoutProperties()
|
|
});
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
// Drawing
|
|
function initializeMultiDraw(multiMap) {
|
|
|
|
}
|
|
|
|
function initializeDraw() {
|
|
var fieldOptions = getFieldOptions();
|
|
var Draw = new MapboxDraw({
|
|
displayControlsDefault : false,
|
|
controls : {
|
|
point : fieldOptions.pointAllowed,
|
|
line_string : fieldOptions.lineStringAllowed,
|
|
polygon : fieldOptions.polygonAllowed,
|
|
trash : true
|
|
}
|
|
});
|
|
map.addControl(Draw, 'top-left');
|
|
|
|
map.on('draw.create', (e) => {
|
|
var newGeoJSON = getGeoJSON();
|
|
if(getFieldOptions().multipleAllowed) {
|
|
newGeoJSON.features.push(e.features[0])
|
|
} else {
|
|
newGeoJSON.features = [e.features[0]]
|
|
}
|
|
map.setLayoutProperty('feature', 'visibility', 'visible');
|
|
$('#finish-drawing div').fadeOut();
|
|
Draw.deleteAll();
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
|
|
map.on('draw.delete', (e) => {
|
|
var newGeoJSON = getGeoJSON();
|
|
newGeoJSON.features = [];
|
|
map.setLayoutProperty('feature', 'visibility', 'visible');
|
|
setGeoJSON(newGeoJSON)
|
|
});
|
|
|
|
map.on('draw.update', (e) => {
|
|
var newGeoJSON = getGeoJSON();
|
|
newGeoJSON.features = [e.features[0]]
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
|
|
map.on('load', () => {
|
|
$(document).on('click', '#draw-point', () => {
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
$('#finish-drawing div').fadeIn();
|
|
Draw.changeMode('draw_point');
|
|
})
|
|
$(document).on('click', '#draw-linestring', () => {
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
$('#finish-drawing div').fadeIn();
|
|
Draw.changeMode('draw_line_string');
|
|
})
|
|
$(document).on('click', '#edit-linestring', () => {
|
|
if(getGeoJSON().features[0]) {
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
$('#finish-drawing div').fadeIn();
|
|
var ids = Draw.add(getGeoJSON())
|
|
Draw.changeMode('direct_select', { featureId : ids[0] });
|
|
}
|
|
})
|
|
$(document).on('click', '#draw-polygon', () => {
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
Draw.changeMode('draw_polygon');
|
|
})
|
|
$(document).on('click', '#edit-polygon', () => {
|
|
if(getGeoJSON().features[0]) {
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
$('#finish-drawing div').fadeIn();
|
|
var ids = Draw.add(getGeoJSON())
|
|
Draw.changeMode('direct_select', { featureId : ids[0] });
|
|
}
|
|
})
|
|
$(document).on('click', '#finish-drawing div', () => {
|
|
var newGeoJSON = getGeoJSON();
|
|
var allDrawFeatures = Draw.getAll();
|
|
var thisIndex = newGeoJSON.features.findIndex(feature => feature.id === allDrawFeatures.features[0].id);
|
|
if(thisIndex > -1) {
|
|
newGeoJSON.features[thisIndex] = allDrawFeatures.features[0]
|
|
}
|
|
map.setLayoutProperty('feature', 'visibility', 'visible');
|
|
$('#finish-drawing div').fadeOut();
|
|
Draw.deleteAll();
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
$(document).on('click', '#draw-delete', () => {
|
|
Draw.deleteAll();
|
|
map.setLayoutProperty('feature', 'visibility', 'none');
|
|
var newGeoJSON = { type : "FeatureCollection", features : []}
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
})
|
|
}
|
|
|
|
function setMultiGeometryListener() {
|
|
let multiMapInitialized = false;
|
|
$(document).on('click', '.open-multigeom', function() {
|
|
$('.open-multigeom-a').trigger('click');
|
|
if(!multiMapInitialized) {
|
|
if(getPostType() === 'line') {
|
|
$('#draw-single-line').show();
|
|
} else if (getPostType() === 'polygon') {
|
|
$('#draw-single-polygon').show();
|
|
}
|
|
let multiMap = initializeMap(getFieldElement().attr('id')+'-multi');
|
|
initializeMultiDraw(multiMap);
|
|
multiMapInitialized = true;
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function initialize_field( $field ) {
|
|
|
|
// UI modifications
|
|
fieldSelector = $field;
|
|
|
|
map = initializeMap(getFieldElement().attr('id'));
|
|
miniButtonFunctions();
|
|
initializeDraw();
|
|
initializeGeoJSON();
|
|
setValueChangeListeners();
|
|
setGeocoder();
|
|
setMultiGeometryListener();
|
|
|
|
if(getPostType() === 'line' || getPostType() === 'polygon') {
|
|
setUploader();
|
|
}
|
|
|
|
if(getPostType() === 'location') {
|
|
setLocationTypeListener();
|
|
setManualEntryListener();
|
|
}
|
|
|
|
if(getPostType() === 'polygon') {
|
|
setPolygonTypeListener();
|
|
}
|
|
|
|
}
|
|
|
|
// Saving
|
|
function setGeoJSON(geoJSON) {
|
|
simplifyCoordinates(geoJSON);
|
|
saveField(geoJSON);
|
|
map.getSource('feature').setData(geoJSON);
|
|
manageMarker()
|
|
if(getPostType() === 'location') {
|
|
showCurrentCoordinates()
|
|
if(getLocationType() === '3d-model') {
|
|
load3DModel();
|
|
}
|
|
}
|
|
}
|
|
|
|
function simplifyCoordinates(geoJSON) {
|
|
geoJSON.features.forEach(feature => {
|
|
feature.geometry.coordinates = feature.geometry.coordinates.map(checkIfNumberAndRound)
|
|
})
|
|
}
|
|
|
|
function checkIfNumberAndRound(input) {
|
|
if(isNaN(input)) {
|
|
return input.map(checkIfNumberAndRound)
|
|
} else {
|
|
return Math.round(input * 100000000) / 100000000
|
|
}
|
|
}
|
|
|
|
function saveField(geoJSON) {
|
|
$(`#mapster-map-geojson-${getFieldID()}`).attr('value', JSON.stringify(geoJSON));
|
|
}
|
|
|
|
// Helpers
|
|
function getLocationType() {
|
|
if($('.mapster-map-submission-frontend').length) {
|
|
return 'marker'
|
|
} else {
|
|
return $('.acf-field[data-name="location_style"]').find('select').val()
|
|
}
|
|
}
|
|
|
|
function getPolygonType() {
|
|
return $('.acf-field[data-name="polygon_style"]').find('select').val()
|
|
}
|
|
|
|
function getACFValues() {
|
|
|
|
if(getPostType() === 'location' && getLocationType() === 'circle') {
|
|
var colorVal = $('.acf-field[data-name="circle"] .acf-field[data-name="color"]').find(':input').val()
|
|
var opacityVal = $('.acf-field[data-name="circle"] .acf-field[data-name="opacity"]').find(':input').val()
|
|
var radiusVal = $('.acf-field[data-name="circle"] .acf-field[data-name="radius"]').find(':input').val()
|
|
var strokeWidthVal = $('.acf-field[data-name="circle"] .acf-field[data-name="stroke-width"]').find(':input').val()
|
|
var strokeColorVal = $('.acf-field[data-name="circle"] .acf-field[data-name="stroke-color"]').find(':input').val()
|
|
var strokeOpacityVal = $('.acf-field[data-name="circle"] .acf-field[data-name="stroke-opacity"]').find(':input').val()
|
|
const circleValues = {
|
|
paint : {
|
|
color : colorVal !== '' ? colorVal : '#000',
|
|
opacity : opacityVal !== '' ? parseFloat(opacityVal)/100 : 1,
|
|
radius : radiusVal !== '' ? parseFloat(radiusVal) : 5,
|
|
'stroke-width' : strokeWidthVal !== '' ? parseFloat(strokeWidthVal) : 0,
|
|
'stroke-color' : strokeColorVal !== '' ? strokeColorVal : '#FFF',
|
|
'stroke-opacity' : strokeOpacityVal !== '' ? parseFloat(strokeOpacityVal)/100 : 1
|
|
}
|
|
}
|
|
return circleValues;
|
|
}
|
|
|
|
if(getPostType() === 'location' && getLocationType() === 'marker') {
|
|
var colorVal = $('.acf-field[data-name="marker"] .acf-field[data-name="color"]').find(':input').val()
|
|
var scaleVal = $('.acf-field[data-name="marker"] .acf-field[data-name="scale"]').find(':input').val()
|
|
var rotationVal = $('.acf-field[data-name="marker"] .acf-field[data-name="rotation"]').find(':input').val()
|
|
var anchorVal = $('.acf-field[data-name="marker"] .acf-field[data-name="anchor"]').find(':input').val()
|
|
const markerValues = {
|
|
marker : {
|
|
color : colorVal !== '' ? colorVal : '#000',
|
|
scale : scaleVal !== '' ? parseFloat(scaleVal)/100 : 1,
|
|
rotation : rotationVal !== '' ? parseFloat(rotationVal) : 0,
|
|
anchor : anchorVal !== '' ? anchorVal : 'center'
|
|
}
|
|
}
|
|
return markerValues;
|
|
}
|
|
|
|
if(getPostType() === 'location' && getLocationType() === 'label') {
|
|
var textOn = $('.acf-field[data-name="label"] .acf-field[data-name="label_on"]').find(':input').is(':checked')
|
|
var textFieldVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-field"]').find(':input').val()
|
|
var textFontVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-font"]').find(':input').val()
|
|
var textSizeVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-size"]').find(':input').val()
|
|
var textColorVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-color"]').find(':input').val()
|
|
var textOpacityVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-opacity"]').find(':input').val()
|
|
var textRotationVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-rotate"]').find(':input').val()
|
|
var textTranslateXVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-translate-x"]').find(':input').val()
|
|
var textTranslateYVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-translate-y"]').find(':input').val()
|
|
var textHaloWidthVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-halo-width"]').find(':input').val()
|
|
var textHaloColorVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-halo-color"]').find(':input').val()
|
|
var textHaloBlurVal = $('.acf-field[data-name="label"] .acf-field[data-name="text-halo-blur"]').find(':input').val()
|
|
|
|
var iconOn = $('.acf-field[data-name="icon"] .acf-field[data-name="icon_on"]').find(':input').is(':checked')
|
|
var iconImageVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-image"] img').attr('src');
|
|
var iconSizeVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-size"]').find(':input').val()
|
|
var iconOpacityVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-opacity"]').find(':input').val()
|
|
var iconRotationVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-rotate"]').find(':input').val()
|
|
var iconTranslateXVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-translate-x"]').find(':input').val()
|
|
var iconTranslateYVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-translate-y"]').find(':input').val()
|
|
var iconAnchorVal = $('.acf-field[data-name="icon"] .acf-field[data-name="icon-anchor"]').find(':input').val()
|
|
if(iconImageVal !== '') {
|
|
addNewIcon(iconImageVal, () => {
|
|
map.setLayoutProperty('feature', 'icon-image', 'icon-image-location')
|
|
})
|
|
}
|
|
const labelValues = {
|
|
layout : {
|
|
'text-field' : textFieldVal !== '' ? textFieldVal : "",
|
|
'text-font' : [ textFontVal ],
|
|
'text-rotate' : textRotationVal !== '' ? parseFloat(textRotationVal) : 0,
|
|
'text-size' : textSizeVal !== '' ? parseFloat(textSizeVal) : 16,
|
|
'icon-size' : iconSizeVal !== '' ? parseFloat(iconSizeVal)/100 : 1,
|
|
'icon-rotate' : iconRotationVal !== '' ? parseFloat(iconRotationVal) : 0,
|
|
'icon-anchor' : iconAnchorVal !== '' ? iconAnchorVal : 'center',
|
|
'icon-offset' : iconTranslateXVal !== '' && iconTranslateYVal !== '' ? [parseFloat(iconTranslateXVal), parseFloat(iconTranslateYVal)] : [0, 0],
|
|
'text-offset' : textTranslateXVal !== '' && textTranslateYVal !== '' ? [parseFloat(textTranslateXVal), parseFloat(textTranslateYVal)] : [0, 0]
|
|
},
|
|
paint : {
|
|
'text-color' : textColorVal !== '' ? textColorVal : '#000000',
|
|
'text-halo-width' : textHaloWidthVal !== '' ? parseFloat(textHaloWidthVal) : 1,
|
|
'text-halo-color' : textHaloColorVal !== '' ? textHaloColorVal : '#FFFFFF',
|
|
'text-halo-blur' : textHaloBlurVal !== '' ? parseFloat(textHaloBlurVal)/100 : 0.5,
|
|
'text-opacity' : textOpacityVal !== '' ? parseFloat(textOpacityVal)/100 : 1,
|
|
'icon-opacity' : iconOpacityVal !== '' ? parseFloat(iconOpacityVal)/100 : 1
|
|
}
|
|
}
|
|
if(!textOn) {
|
|
labelValues.layout['text-size'] = 0;
|
|
}
|
|
if(!iconOn) {
|
|
labelValues.layout['icon-size'] = 0;
|
|
}
|
|
return labelValues;
|
|
}
|
|
|
|
if(getPostType() === 'line') {
|
|
var colorVal = $('.acf-field[data-name="color"]').find(':input').val()
|
|
var opacityVal = $('.acf-field[data-name="opacity"]').find(':input').val()
|
|
var widthVal = $('.acf-field[data-name="width"]').find(':input').val()
|
|
var hasDash = $('.acf-field[data-name="dashed_line"]').find(':input').is(':checked')
|
|
var dashLength = $('.acf-field[data-name="dash_length"]').find(':input').val()
|
|
var gapLength = $('.acf-field[data-name="gap_length"]').find(':input').val()
|
|
const lineValues = {
|
|
paint : {
|
|
color : colorVal !== '' ? colorVal : '#000',
|
|
opacity : opacityVal !== '' ? parseFloat(opacityVal)/100 : 1,
|
|
width : widthVal !== '' ? parseFloat(widthVal) : 5
|
|
}
|
|
}
|
|
if(hasDash) {
|
|
lineValues.paint['dasharray'] = dashLength!=='' && gapLength!== '' ? [parseFloat(dashLength), parseFloat(gapLength)] : [1, 1];
|
|
} else {
|
|
lineValues.paint['dasharray'] = [1, 0]
|
|
}
|
|
return lineValues;
|
|
}
|
|
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill') {
|
|
var colorVal = $('.acf-field[data-name="color"]').find('input').val()
|
|
var opacityVal = $('.acf-field[data-name="opacity"]').find('input').val()
|
|
var outlineColorVal = $('.acf-field[data-name="outline-color"]').find('input').val()
|
|
const polygonValues = {
|
|
paint : {
|
|
color : colorVal !== '' ? colorVal : '#000',
|
|
opacity : opacityVal !== '' ? parseFloat(opacityVal)/100 : 1,
|
|
'outline-color' : outlineColorVal !== '' ? outlineColorVal : 'rgba(0, 0, 0, 0)'
|
|
}
|
|
}
|
|
return polygonValues;
|
|
}
|
|
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill-extrusion') {
|
|
var colorVal = $('.acf-field[data-name="color"]').find('input').val()
|
|
var opacityVal = $('.acf-field[data-name="opacity"]').find('input').val()
|
|
var extrusionBaseVal = $('.acf-field[data-name="base"]').find('input').val()
|
|
var extrusionHeightVal = $('.acf-field[data-name="height"]').find('input').val()
|
|
const polygonValues = {
|
|
paint : {
|
|
'color' : colorVal !== '' ? colorVal : '#000',
|
|
'opacity' : opacityVal !== '' ? parseFloat(opacityVal)/100 : 1,
|
|
'base' : extrusionBaseVal !== '' ? parseFloat(extrusionBaseVal) : 0,
|
|
'height' : extrusionHeightVal !== '' ? parseFloat(extrusionHeightVal) : 0,
|
|
}
|
|
}
|
|
return polygonValues;
|
|
}
|
|
}
|
|
|
|
function getLayerType() {
|
|
if(getPostType() === 'location' && getLocationType() === 'circle') {
|
|
return 'circle-';
|
|
}
|
|
if(getPostType() === 'location' && getLocationType() === 'label') {
|
|
return '';
|
|
}
|
|
if(getPostType() === 'line') {
|
|
return 'line-';
|
|
}
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill') {
|
|
return 'fill-';
|
|
}
|
|
if(getPostType() === 'polygon' && getPolygonType() === 'fill-extrusion') {
|
|
return 'fill-extrusion-';
|
|
}
|
|
}
|
|
|
|
function addNewIcon(iconSrc, callback) {
|
|
if(!iconSrc) {
|
|
callback()
|
|
}
|
|
if(window.location.protocol === 'https:' && iconSrc.indexOf('http://') > -1) {
|
|
iconSrc = iconSrc.replace('http', 'https');
|
|
}
|
|
map.loadImage(iconSrc, (err, img) => {
|
|
if(!map.loaded()) {
|
|
map.once('idle', () => {
|
|
if(map.hasImage('icon-image-location')) {
|
|
map.updateImage('icon-image-location', img);
|
|
} else {
|
|
map.addImage('icon-image-location', img)
|
|
}
|
|
callback()
|
|
})
|
|
} else {
|
|
if(map.hasImage('icon-image-location')) {
|
|
map.updateImage('icon-image-location', img);
|
|
} else {
|
|
map.addImage('icon-image-location', img)
|
|
}
|
|
callback()
|
|
}
|
|
})
|
|
}
|
|
|
|
function load3DModel() {
|
|
|
|
|
|
}
|
|
|
|
function getFieldElement() {
|
|
return $(fieldSelector).find('.mapster-map')
|
|
}
|
|
|
|
function getFieldID() {
|
|
return getFieldElement().attr('id').replace('mapster-map-', '');
|
|
}
|
|
|
|
function getPostType() {
|
|
if($('.mapster-map-submission-frontend').length) {
|
|
let toReturn = $(".mapster-submission-map").data('linestring') === 1 ? 'line' : '';
|
|
toReturn = $(".mapster-submission-map").data('point') === 1 ? 'location' : toReturn;
|
|
toReturn = $(".mapster-submission-map").data('polygon') === 1 ? 'polygon' : toReturn;
|
|
return toReturn;
|
|
} else {
|
|
var classList = $('body').attr("class").split(/\s+/);
|
|
var mapsterClass = classList.find(thisClass => thisClass.indexOf('post-type-mapster-wp-') > -1);
|
|
var postTypeToReturn = mapsterClass.replace('post-type-mapster-wp-', '');
|
|
postTypeToReturn = postTypeToReturn === 'user-sub' ? 'location' : postTypeToReturn;
|
|
return postTypeToReturn;
|
|
}
|
|
}
|
|
|
|
function getGeoJSON() {
|
|
var existingValue = $(`#mapster-map-geojson-${getFieldID()}`).val();
|
|
if(existingValue && existingValue !== '') {
|
|
var currentGeoJSON = JSON.parse(existingValue);
|
|
return currentGeoJSON;
|
|
}
|
|
return { type : "FeatureCollection", features : [] };
|
|
}
|
|
|
|
function getFieldOptions() {
|
|
var pointAllowed = getFieldElement().data('point') === 1 ? true : false;
|
|
var lineStringAllowed = getFieldElement().data('linestring') === 1 ? true : false;
|
|
var polygonAllowed = getFieldElement().data('polygon') === 1 ? true : false;
|
|
var multipleAllowed = getFieldElement().data('multiple') === 1 ? true : false;
|
|
return {
|
|
pointAllowed, lineStringAllowed, polygonAllowed, multipleAllowed
|
|
}
|
|
}
|
|
|
|
function showCurrentCoordinates() {
|
|
if(getGeoJSON().features[0]) {
|
|
var coordinates = getGeoJSON().features[0].geometry.coordinates;
|
|
$('#mapster-map-point-longitude').val(coordinates[0]);
|
|
$('#mapster-map-point-latitude').val(coordinates[1]);
|
|
} else {
|
|
$('#mapster-map-point-longitude').val('');
|
|
$('#mapster-map-point-latitude').val('');
|
|
}
|
|
}
|
|
|
|
// Special functions
|
|
function setUploader() {
|
|
$('#mapster-map-upload').change(function(e) {
|
|
geoJSONUploaded(e);
|
|
})
|
|
const geoJSONUploaded = async (e) => {
|
|
const fileContents = await new Response(e.target.files[0]).json()
|
|
importGeoJSON(fileContents)
|
|
}
|
|
const importGeoJSON = (file) => {
|
|
if(!file) {
|
|
window.alert("Please upload a file.");
|
|
} else {
|
|
const errors = geojsonhint.hint(file)
|
|
if(errors.length === 0) {
|
|
var feature = file.features.find(feature => $('#mapster-map-upload').data('type').indexOf(feature.geometry.type) > -1);
|
|
if(feature) {
|
|
if(window.confirm("Are you sure you want to upload this geoJSON? It will overwrite all existing features.")) {
|
|
if(!feature.id) {
|
|
feature.id = parseInt(Math.random() * Math.random() * 10000000);
|
|
}
|
|
var newGeoJSON = { type : "FeatureCollection", features : [feature]}
|
|
setGeoJSON(newGeoJSON)
|
|
}
|
|
} else {
|
|
window.alert("Please double-check that your geoJSON has the right geometry type for this post.")
|
|
}
|
|
} else {
|
|
var feature = file.features.find(feature => $('#mapster-map-upload').data('type').indexOf(feature.geometry.type) > -1);
|
|
if(feature) {
|
|
if(window.confirm("There was an error with your upload: " + JSON.stringify(errors) + ". Are you sure you want to upload this geoJSON? It will overwrite all existing features.")) {
|
|
if(!feature.id) {
|
|
feature.id = parseInt(Math.random() * Math.random() * 10000000);
|
|
}
|
|
var newGeoJSON = { type : "FeatureCollection", features : [feature]}
|
|
setGeoJSON(newGeoJSON)
|
|
}
|
|
} else {
|
|
window.alert('GeoJSON error: ' + JSON.stringify(errors));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function miniButtonFunctions() {
|
|
jQuery(document).on('click', '.mapster-edit-full-width', () => {
|
|
if(jQuery('.mapster-map-container').css('display') === 'flex') {
|
|
jQuery('.mapster-map-container').css('display', 'block');
|
|
jQuery('.mapster-map-container > div').css('width', '100%')
|
|
jQuery('.mapster-map-container > div').css('marginBottom', '15px');
|
|
jQuery('.mapster-edit-full-width').text('Collapse Map');
|
|
map.resize();
|
|
} else {
|
|
jQuery('.mapster-map-container').css('display', 'flex');
|
|
jQuery('.mapster-map-container > div').css('width', '50%')
|
|
jQuery('.mapster-map-container > div').css('marginBottom', '0px');
|
|
jQuery('.mapster-edit-full-width').text('Expand Map');
|
|
map.resize();
|
|
}
|
|
});
|
|
|
|
let savedGeoJSON = false;
|
|
jQuery(document).on('click', '.mapster-simplify-shape', () => {
|
|
if(!jQuery('.mapster-simplify-shape-slider').length) {
|
|
jQuery('.mapster-simplify-shape').html('Cancel Simplify Shape');
|
|
jQuery('.mapster-map-container > div:first-child').append(`
|
|
<div class="mapster-simplify-container" style="margin-top: 30px; text-align: right;">
|
|
<input class="mapster-simplify-shape-slider" type="range" min="1" max="100" value="1" />
|
|
</div>
|
|
`)
|
|
savedGeoJSON = getGeoJSON();
|
|
} else {
|
|
jQuery('.mapster-simplify-shape').html('Simplify Shape');
|
|
jQuery('.mapster-simplify-container').remove();
|
|
setGeoJSON(savedGeoJSON)
|
|
}
|
|
});
|
|
jQuery(document).on('input', '.mapster-simplify-shape-slider', function() {
|
|
let rangeVal = jQuery(this).val();
|
|
let simplifiedGeoJSON = turf.simplify(savedGeoJSON, { tolerance : parseInt(rangeVal) / 100 });
|
|
setGeoJSON(simplifiedGeoJSON);
|
|
})
|
|
|
|
jQuery(document).on('click', '.mapster-download-geojson', () => {
|
|
var downloadLink = document.createElement("a");
|
|
var blob = new Blob(["\ufeff", JSON.stringify(getGeoJSON())]);
|
|
var url = URL.createObjectURL(blob);
|
|
downloadLink.href = url;
|
|
downloadLink.download = "geojson-download.json"; //Name the file here
|
|
document.getElementById('acf-form-data').appendChild(downloadLink);
|
|
downloadLink.click();
|
|
document.getElementById('acf-form-data').removeChild(downloadLink);
|
|
});
|
|
|
|
jQuery(document).on('click', '.mapster-image-base', () => {
|
|
|
|
});
|
|
}
|
|
|
|
function generateStyle() {
|
|
|
|
}
|
|
|
|
function setGeocoder() {
|
|
if($('#mapster-map-geosearch').length) {
|
|
const provider = new GeoSearch.OpenStreetMapProvider();
|
|
$(document).on('click', `#mapster-get-results`, async function() {
|
|
var searchValue = $('#mapster-map-geosearch').val();
|
|
if(searchValue.length > 2) {
|
|
const results = await provider.search({ query: searchValue });
|
|
var htmlToAppend = createStoreGeneratorGeocoderResultsHTML(results)
|
|
$(`#mapster-geocoder-results`).empty().append(htmlToAppend)
|
|
} else {
|
|
$(`#mapster-geocoder-results`).empty();
|
|
}
|
|
})
|
|
$(document).on('keyup', `#mapster-map-geosearch`, function() {
|
|
var searchValue = $('#mapster-map-geosearch').val();
|
|
if(searchValue.length <= 2) {
|
|
$(`#mapster-geocoder-results`).empty();
|
|
}
|
|
});
|
|
|
|
// Selecting geocoder results
|
|
$(document).on('click', `#mapster-geocoder-results li`, function() {
|
|
var theseBounds = $(this).data('bounds');
|
|
var thisCenter = $(this).data('center');
|
|
var newGeoJSON = { type : "FeatureCollection", features : [{
|
|
type : "Feature",
|
|
properties : {},
|
|
geometry : {
|
|
type : "Point",
|
|
coordinates : thisCenter
|
|
}
|
|
}]}
|
|
setGeoJSON(newGeoJSON)
|
|
map.fitBounds(theseBounds.map(bound => bound.slice().reverse()), { padding: 20 });
|
|
$(`#mapster-geocoder-results`).empty();
|
|
});
|
|
|
|
const createStoreGeneratorGeocoderResultsHTML = (geocoderResults) => {
|
|
var html = '';
|
|
geocoderResults.slice(0, 5).forEach(result => {
|
|
html += `<li data-center="${JSON.stringify([result.x, result.y])}" data-bounds="${JSON.stringify(result.bounds)}">${result.label}</li>`
|
|
})
|
|
return html;
|
|
}
|
|
}
|
|
if($('#mapster-geocoder-mapbox').length) {
|
|
const access_token = $('#mapster-geocoder-mapbox').data("access_token");
|
|
const geocoder = new MapboxGeocoder({
|
|
accessToken: access_token,
|
|
mapboxgl: maplibregl,
|
|
marker : false
|
|
});
|
|
|
|
geocoder.on('result', (e) => {
|
|
var newGeoJSON = { type : "FeatureCollection", features : [{
|
|
type : "Feature",
|
|
properties : {},
|
|
geometry : {
|
|
type : "Point",
|
|
coordinates : e.result.center
|
|
}
|
|
}]}
|
|
setGeoJSON(newGeoJSON)
|
|
})
|
|
|
|
document.getElementById('mapster-geocoder-mapbox').appendChild(geocoder.onAdd(map));
|
|
}
|
|
}
|
|
|
|
|
|
if( typeof acf.add_action !== 'undefined' ) {
|
|
|
|
acf.add_action('ready_field/type=mapster-map', initialize_field);
|
|
acf.add_action('append_field/type=mapster-map', initialize_field);
|
|
acf.add_action('show_field/type=mapster-map', initialize_field);
|
|
|
|
} else {
|
|
|
|
$(document).on('acf/setup_fields', function(e, postbox){
|
|
|
|
// find all relevant fields
|
|
$(postbox).find('.field[data-field_type="mapster-map"]').each(function(){
|
|
// initialize
|
|
initialize_field( $(this) );
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
})(jQuery);
|