Geojson Lines on MapsPro Module/Widget using JrMedia

[Josh Journey]

The following post enables you to upload .geojson files to a listings media and automatically display all of them inside a listing's MapsPro module/widget. Add the following to filter_functions.php

Alejandro wrote most of the following code and gave me great pointers/code blocks to make it work for listing media. I simply wrote a loop, a few conditions, object buffer, and minor formatting to make it work for uploaded media. Be sure your Media Settings > Attachments > Allowed File Extensions allow: json, geojson so that file.geojson can upload.

 

/* Add geojson support to module/widget */

/* Ref: https://gist.github.com/jreviews/4f85f94606f7dc41c15c1318cb586e92 */

function add_geojson_layer_to_map_module($output, $params)
{
	$asset_manager = S2Object::make('asset_manager');
	
	// Add the current listing jrMedia paths to an array
	$request = new FWD\Illuminate\Http\Request($params['params']);
	
	if ($request->option != 'com_content' || $request->view != 'article' || ! $request->id) {
		return $output;
	}

	$attachments = JReviews\App\Models\Media::query()
			->attachment()
			->published()
			->where('listing_id', $request->id)
			->get();

	$urls = $attachments->pluck('original')->toArray();
    
    ob_start();
    foreach ($urls as $map_source) {
      if ( str_ends_with($map_source, '.geojson') ) {
          $geojson_file_source = ltrim($map_source, '/');
          echo "{ filename: '$geojson_file_source' }, ";
      }
    }
    $geojson_file = ob_get_contents();
    ob_end_clean();
    
    // load the page script

	$script = "
	<script>
	const jrGeojsonStyles1 = function(feature) {
		switch (feature.properties.type) {
			case 'Type 1': return {
				stroke: true,
				weight: 0.5,
				color: '#ff0000',
				fillColor: '#ff0000',
				fillOpacity: 0.3
			};
			case 'Type 2': return {
				stroke: true,
				weight: 1,
				color: '#09b838',
				fillColor: '#09b838',
				fillOpacity: 0.3
			};
			default: return {
				stroke: true,
				weight: 1,
				color: '#fcba03',
				fillColor: '#fcba03',
				fillOpacity: 0.3
			}
		}    	
	}
	const jrGeojsonStyles2 = function(feature) {
		return {
			color: '#ff7800',
			weight: 5,
			opacity: 0.65
		};
	}
	const layers = [
		$geojson_file

	];
    document.addEventListener('jr-map-initialized', function(event) {
    	console.log('Geojson Filter: map initialized');
    	layers.map(layer => jreviews.addGeoJSONLayer(event.target, layer))
    });
	jreviews.addGeoJSONLayer = function(target, layer) {	
		async function loadGeojson() {
			const response = await fetch('/'+layer.filename);
			const data = await response.json();
			return data;
		}    
		loadGeojson().then( (geojson) => {
			console.log('GeoJSON layer '+layer.filename+' was loaded');
			let map = jQuery(target).data('map');
			const options = {};
			if ( layer.stylesFn ) {
				options.style = layer.stylesFn;
			}
			L.geoJSON(geojson, options).addTo(map);
		});   
	};	
	</script>
	";

	return $output.$script;
}
 
Clickfwd\Hook\Filter::add('after_filter_output_module_maps_index', 'add_geojson_layer_to_map_module', 10);

Enjoy! 😊

[Alejandro]

This section is only visible with a valid subscription. If you have a valid subscription, please login.