Skip to content

Instantly share code, notes, and snippets.

@rastandy

rastandy/solutions-json.php

Last active October 1, 2024 13:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rastandy/13c8e74d8d258be473a5f6eb7004967c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rastandy/13c8e74d8d258be473a5f6eb7004967c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rastandy revised this gist Jul 20, 2022. 2 changed files with 179 additions and 0 deletions.
    115 changes: 115 additions & 0 deletions solutions-map.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    <!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/[email protected]/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
    <script type='text/javascript' src='https://unpkg.com/[email protected]/dist/leaflet.markercluster.js'></script>
    <script src="https://unpkg.com/[email protected]/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>
    64 changes: 64 additions & 0 deletions solutions-map.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    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);
  2. rastandy revised this gist Jul 19, 2022. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions solutions-json.php
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,12 @@
    $title = get_the_title($post_id);
    $link = get_the_permalink($post_id);
    $link = 'https://www.bestclimatesolutions.eu' . parse_url($link, PHP_URL_PATH);
    $category = get_the_terms($post_id, 'solutions_categories')[0]->name;
    $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];
    @@ -37,7 +42,10 @@
    echo '"title": "' . $title . '",';
    echo '"url": "' . $link . '",';
    echo '"description": "' . $description . '",';
    echo '"category": "' . $category . '"';
    echo '"category": "' . $category . '",';
    echo '"category_id": "' . $category_id . '",';
    echo '"category_color": "' . $category_color . '",';
    echo '"category_marker": "' . $category_marker . '"';
    echo '},';

    echo '"geometry": {
  3. rastandy revised this gist Jul 19, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion solutions-json.php
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@
    echo '"title": "' . $title . '",';
    echo '"url": "' . $link . '",';
    echo '"description": "' . $description . '",';
    echo '"category": "' . $category . '",';
    echo '"category": "' . $category . '"';
    echo '},';

    echo '"geometry": {
  4. rastandy created this gist Jul 19, 2022.
    57 changes: 57 additions & 0 deletions solutions-json.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <?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);
    $category = get_the_terms($post_id, 'solutions_categories')[0]->name;
    $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 '},';

    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 ']}';

    ?>