Title: Feed Leaflet Map with WP_Query() and wp_json_encode()
Last modified: August 22, 2016

---

# Feed Leaflet Map with WP_Query() and wp_json_encode()

 *  Resolved [annabinna](https://wordpress.org/support/users/annabinna/)
 * (@annabinna)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/feed-leaflet-map-with-wp_query-and-wp_json_encode/)
 * Hello everyone!
 * I’m working in a wordpress project with two custom post type (documentaries and
   scenes) and a custom taxonomy (production). Each documentary has many scenes,
   and I’d like to display a map with all theses scenes in the scene view. So I 
   create two custom fields for scene’s post type: longitude and latitude.
 * I choose to use Leaflet.js directly, without any plugin. So I enqueued all css
   and js libraries to my theme, and wrote the following code in a template part,
   [following these instructions from Andy](http://asmaloney.com/2014/01/code/creating-an-interactive-map-with-leaflet-and-openstreetmap/).
   But this lines brakes my page.
 * **The main idea is to create a new WP_Query() selecting only the scenes which
   shares the custom taxonomy, iterate throught the results and add an array with
   desired data (name, url, lng and lat) to a previously defined array called ‘geodata’.**
 * Can some of you review what is wrong please?
 *     ```
       <?php
       /**
        * @package Illes de futur
        */
       ?>
   
       <section id="scene-map">
   
       	<div id="map" style="heigth: 440px; border: 1px solid #aaa;"></div>
   
       	<?php
   
       	  	$terms = get_the_term_list( $post->ID, 'production' );
       	  	$id = get_the_ID();
   
       	  	$args = array(
       	  		'post_type' => 'scene',
       	  		'tax_query' => array(
       	  			'taxonomy' => 'production',
       	  			'field' => 'slug',
       	  			'terms' => $terms,
       	  			),
       	  		'exclude' => $id
       	  		);
   
       		$geodata = array();
   
       		$geolocated_scenes = new WP_Query($args);
   
       		if( $geolocated_scenes->have_posts() ) :
   
       			while( $geolocated_scenes->have_posts() ) : $geolocated_scenes->the_post();
   
       				$geodata[] = [
       					'name' => get_the_title(),
       					'url' => get_post_permalink(),
       					'lat' => get_post_meta( the_ID(), 'latitude', true ),
       					'lng' => get_post_meta( the_ID(), 'longitude', true ),
       				];
   
       			endwhile;
   
       			wp_reset_postdata();
   
       		else : ?>
   
       			<p><?php __('This scene has not geolocation data', 'illles_de_futur'); ?></p>
   
       		<? endif;
   
       		echo wp_json_encode( $geodata );
   
       	?>
   
       	<script type="text/javascript">
   
       		var map = L.map( 'map', {
       			center: [20.0, 5.0],
       			minZoom: 2,
       			zoom: 2
       		});
   
       		L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
       			attribution:'&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a><img src="http://developer.mapquest.com/osm/mq_logo.png" width="16" height="16" />',
       			subdomains: ['otile1' , 'otile2' , 'otile3' , 'otile4']
       		}).addTo( map );
   
       		for ( var i=0; i < geodata.length; ++i )
       		{
       			L.geodata( [geodata[i].lat, geodata[i].lng] )
       				.bindPopup( '<a href="' + geodata[i].url + '">' geodata[i].name + '</a>' )
       				.addTo( map );
       		}
   
       	</script>
   
       </section>
       ```
   
 * Thanks in advance!!!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [annabinna](https://wordpress.org/support/users/annabinna/)
 * (@annabinna)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/feed-leaflet-map-with-wp_query-and-wp_json_encode/#post-5652227)
 * I’ve done some changes in the way we feed the geodata array and move the `echo
   wp_json_encode( $geodata );` inside the script tag, as a javascript variable.
 * Now, the page is ok but still not displaying the map…
 *     ```
       <?php
       /**
        * @package Illes de futur
        */
       ?>
   
       <!-- http://asmaloney.com/2014/01/code/creating-an-interactive-map-with-leaflet-and-openstreetmap/ -->
   
       <section id="scene-map">
   
       	<div id="map" style="heigth: 440px; border: 1px solid #aaa;"></div>
   
       	<?php
   
       	  	$terms = get_the_term_list( $post->ID, 'production' );
       	  	$id = get_the_ID();
   
       	  	$args = array(
       	  		'post_type' => 'scene',
       	  		'tax_query' => array(
       	  			'taxonomy' => 'production',
       	  			'field' => 'slug',
       	  			'terms' => $terms,
       	  			),
       	  		'exclude' => $id
       	  		);
   
       		$geodata = array();
   
       		$geolocated_scenes = new WP_Query($args);
   
       		if( $geolocated_scenes->have_posts() ) :
   
       			while( $geolocated_scenes->have_posts() ) : $geolocated_scenes->the_post();
   
       				$geodata[] = array(
       					'name' => get_the_title(),
       					'url' => get_post_permalink(),
       					'lat' => get_post_meta( $post->ID, 'latitude', true ),
       					'lng' => get_post_meta( $post->ID, 'longitude', true ),
       				);
   
       			endwhile;
   
       			wp_reset_postdata();
   
       		else : ?>
   
       			<p><?php __('This scene has not geolocation data', 'illles_de_futur'); ?></p>
   
       		<? endif;
   
       	?>
   
       	<script type="text/javascript">
   
       		var geodata = <?php echo wp_json_encode( $geodata ); ?>;
   
       		var map = L.map( 'map', {
       			center: [20.0, 5.0],
       			minZoom: 2,
       			zoom: 2
       		});
   
       		L.tileLayer( 'http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
       			attribution:'&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a><img src="http://developer.mapquest.com/osm/mq_logo.png" width="16" height="16" />',
       			subdomains: ['otile1' , 'otile2' , 'otile3' , 'otile4']
       		}).addTo( map );
   
       		for ( var i=0; i < geodata.length; ++i )
       		{
       			L.geodata( [geodata[i].lat, geodata[i].lng] )
       				.bindPopup( '<a href="' + geodata[i].url + '">' geodata[i].name + '</a>' )
       				.addTo( map );
       		}
   
       	</script>
   
       </section>
       ```
   
 *  Thread Starter [annabinna](https://wordpress.org/support/users/annabinna/)
 * (@annabinna)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/feed-leaflet-map-with-wp_query-and-wp_json_encode/#post-5652580)
 * Hey! I’ve forgoten to close this thread!
 * Finally I’ve found the problem an the solution at once. The problem was in the
   javascript function. I’ve only had to move the js code to a separated file and
   to enqueue it in _functions.php_ after the main leaflet js file. It was all!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Feed Leaflet Map with WP_Query() and wp_json_encode()’ is closed to new
replies.

## Tags

 * [custom post type](https://wordpress.org/support/topic-tag/custom-post-type/)
 * [wp_json_encode](https://wordpress.org/support/topic-tag/wp_json_encode/)
 * [wp_query](https://wordpress.org/support/topic-tag/wp_query/)

 * 2 replies
 * 1 participant
 * Last reply from: [annabinna](https://wordpress.org/support/users/annabinna/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/feed-leaflet-map-with-wp_query-and-wp_json_encode/#post-5652580)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics