first commit

wp-content/plugins/mapster-wp-maps/includes/acf-mapster-map/assets/README.md

@@ -0,0 +1,5 @@
+# assets directory
+
+Use this directory to store asset files such as CSS, JS and images.
+
+This directory can be removed if not used.

wp-content/plugins/mapster-wp-maps/includes/acf-mapster-map/assets/css/input.css

@@ -0,0 +1,68 @@
+.mapster-map-container {
+  display: flex;
+}
+.mapster-map-container > div {
+  width: 50%;
+}
+.mapster-map-container .mapster-map-input-container {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.mapster-map-container .mapster-map-input-container .button-container {
+  text-align: right;
+  margin-top: 10px;
+}
+.mapster-map-container .mapster-map-input-container .point-inputs {
+  display: flex;
+  margin-bottom: 5px;
+}
+.mapster-map-container #finish-drawing div {
+  margin-top: 10px;
+  display: none;
+}
+.mapster-map-container .mapster-map-line {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  font-weight: bold;
+}
+.mapster-map-container hr {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 90%;
+}
+.mapster-map-container .mapster-mini-buttons {
+  float: right;
+  font-size: 10px;
+  margin-left: 5px;
+  border: thin solid #ccc;
+  padding: 2px 3px;
+  cursor: pointer;
+}
+
+#draw-single-polygon, #draw-single-line {
+  display : none;
+}
+
+#mapster-geocoder-results {
+  position: absolute;
+  background: white;
+  margin-top: 0px;
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border: thin solid #eee;
+  z-index: 1000;
+}
+#mapster-geocoder-results li {
+  border-bottom: thin solid #ccc;
+  padding: 5px;
+  margin: 0;
+  cursor: pointer;
+}
+#mapster-geocoder-results li:hover {
+  background: #eee;
+}

wp-content/plugins/mapster-wp-maps/includes/acf-mapster-map/assets/images/README.md

@@ -0,0 +1,5 @@
+# Images directory
+
+Use this directory to store images.
+
+This directory can be removed if not used.

wp-content/plugins/mapster-wp-maps/includes/acf-mapster-map/assets/js/input.js

@@ -0,0 +1,881 @@
+(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': '&copy; <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);