Skip to content

Instantly share code, notes, and snippets.

@rastandy

rastandy/solutions-json.php

Last active January 24, 2024 17:49
Show Gist options
  • Save rastandy/13c8e74d8d258be473a5f6eb7004967c to your computer and use it in GitHub Desktop.
Save rastandy/13c8e74d8d258be473a5f6eb7004967c to your computer and use it in GitHub Desktop.
Download ZIP
A Wordpress page template for obtaining a GeoJSON file from a list of posts with custom fields
Raw
solutions-json.php
<?php
/*
Template Name: Solutions JSON
*/
header( 'Content-Type: application/geo+json' . '; charset=' . get_option( 'blog_charset' ), true );
$more = 1;
echo '{"type": "FeatureCollection", "features": [';
/**
* Setup query to show the ‘solutions’ post type with all posts
*/
$args = array(
'post_type' => 'solution',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
);
$wp_query = new WP_Query( $args );
while ( $wp_query->have_posts() ) : $wp_query->the_post();
$post_id = get_the_ID();
$title = get_the_title($post_id);
$link = get_the_permalink($post_id);
$link = 'https://www.bestclimatesolutions.eu' . parse_url($link, PHP_URL_PATH);
$term = get_the_terms($post_id, 'solutions_categories')[0];
$category = $term->name;
$category_id = $term->slug;
$category_color = get_field('colorecategories', $term->taxonomy . '_' . $term->term_id);
$category_marker = get_field('markercategories', $term->taxonomy . '_' . $term->term_id);
$category_marker = 'https://www.bestclimatesolutions.eu' . parse_url($category_marker, PHP_URL_PATH);
$custom_fields = get_post_custom( $post_id);
$mappa = unserialize($custom_fields["pr_mappa"][0]);
$description = $custom_fields["pr_onesentence"][0];
echo '{"type": "Feature",';
echo '"properties": ';
echo '{';
echo '"title": "' . $title . '",';
echo '"url": "' . $link . '",';
echo '"description": "' . $description . '",';
echo '"category": "' . $category . '",';
echo '"category_id": "' . $category_id . '",';
echo '"category_color": "' . $category_color . '",';
echo '"category_marker": "' . $category_marker . '"';
echo '},';
echo '"geometry": {
"type": "Point", "coordinates": [';
echo $mappa["lng"] . ', ' . $mappa["lat"];
echo ']}';
echo '}';
if ($wp_query->current_post +1 != $wp_query->post_count) {
echo ', ';
}
endwhile;
wp_reset_postdata();
echo ']}';
?>
Raw
solutions-map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GeoJSON tutorial - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js'></script>
<script src="https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js"></script>
<script src="https://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 800px;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="categoriesPanel">
<span class="h1">CATEGORIES</span>
<ul class="categories list-unstyled hidden-xs">
<li>
<a onClick="onCategoryClick('all')" href="javascript:;" data-term-slug="all" data-term-id="" class="">
<span class="colorIcon" style="background:#cccccc;"></span>
<span class="text">All</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('adaptation-drr')" href="javascript:;" data-term-slug="adaptation-drr" data-term-id="20" class="">
<span class="colorIcon" style="background:#E57735;"></span>
<span class="text">Adaptation &amp; DRR</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('agriculture-and-land-use-management')" href="javascript:;" data-term-slug="agriculture-and-land-use-management" data-term-id="23">
<span class="colorIcon" style="background:#0E8691;"></span>
<span class="text">Agriculture and Land-use Management</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('biodiversity-ecosystem')" href="javascript:;" data-term-slug="biodiversity-ecosystem" data-term-id="15">
<span class="colorIcon" style="background:#469B7D;"></span>
<span class="text">Biodiversity &amp; Ecosystem</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('climate-finance')" href="javascript:;" data-term-slug="climate-finance" data-term-id="17">
<span class="colorIcon" style="background:#093248;"></span>
<span class="text">Climate Finance</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('education-media')" href="javascript:;" data-term-slug="education-media" data-term-id="16">
<span class="colorIcon" style="background:#215DA9;"></span>
<span class="text">Education &amp; Media</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('energy-and-renewable-sources')" href="javascript:;" data-term-slug="energy-and-renewable-sources" data-term-id="18">
<span class="colorIcon" style="background:#EFCA00;"></span>
<span class="text">Energy and Renewable Sources</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('mitigation-emissions-reduction')" href="javascript:;" data-term-slug="mitigation-emissions-reduction" data-term-id="19">
<span class="colorIcon" style="background:#78C7D2;"></span>
<span class="text">Mitigation &amp; Emissions reduction</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('new-technologies')" href="javascript:;" data-term-slug="new-technologies" data-term-id="21">
<span class="colorIcon" style="background:#D52416;"></span>
<span class="text">New Technologies</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('urban-development')" href="javascript:;" data-term-slug="urban-development" data-term-id="22" class="active">
<span class="colorIcon" style="background:#76160E;"></span>
<span class="text">Urban Development</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('waste')" href="javascript:;" data-term-slug="waste" data-term-id="24" class="">
<span class="colorIcon" style="background:#825B47;"></span>
<span class="text">Waste</span>
</a>
</li>
<!-- class="active" -->
<li><a onClick="onCategoryClick('water')" href="javascript:;" data-term-slug="water" data-term-id="25">
<span class="colorIcon" style="background:#6592C4;"></span>
<span class="text">Water</span>
</a>
</li>
</ul>
</div>
<div id='map'></div>
<script type='text/javascript' src='/wp-content/themes/illdy/js/solutions-map.js'></script>
</body>
</html>
Raw
solutions-map.js
var markerClusters = L.markerClusterGroup({
showCoverageOnHover: false,
});
var category_subgroups = new Array();
var control = L.control.layers(null, null, { collapsed: true });
var map = L.map('map').setView([30, -10], 2);
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
function onCategoryClick(category) {
for (c in category_subgroups) {
let layer = category_subgroups[c];
if(category === 'all') {
map.addLayer(layer);
} else if (category === c) {
map.addLayer(layer);
} else {
map.removeLayer(layer);
}
}
}
function onEachFeature(feature, layer) {
if (feature.properties) {
var str = "<h4 style='color: white; background-color: "+ feature.properties.category_color + ";"
+ "padding: 15px 15px 15px 15px;"
+ "'" + ">" + feature.properties.category+"</h4>";
str += "<h4><a href='" + feature.properties.url + "' target='blank'> "
+feature.properties.title+"</a></h4><hr>"
str += "<a style='text-decoration: none' href=' " + feature.properties.url+ "' target = 'blank'";
str += "<p>"+feature.properties.description+ "</p>";
layer.bindPopup(str);
}
}
var geojsonLayer = new L.GeoJSON.AJAX('/solutions-json/',
{pointToLayer:
function(feature, latlng) {
var geojsonMarkerOptions = {
radius: 8,
fillColor: feature.properties.category_color,
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var m = L.circleMarker(latlng, geojsonMarkerOptions);
let category = feature.properties.category_id;
let category_name = feature.properties.category;
if (!category_subgroups[category]) {
category_subgroups[category] = L.featureGroup.subGroup(markerClusters);
category_subgroups[category].addTo(map);
control.addOverlay(category_subgroups[category], category_name);
}
m.addTo(category_subgroups[category]);
// markerClusters.addLayer(m);
return m;
},
onEachFeature: onEachFeature});
map.addLayer(markerClusters);
control.addTo(map);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment