Populate Javascript code with value from Wordpress Custom Field?

Question

I have a large amount of city pages on my blog where I need to put city-specific maps with additional control to build a route, on each city page.

This is the layout I'm looking to create:

I am using Mapbox GL JS library for the map. The JS files and styles for the map and directions control are hosted on Mapbox CDN:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' />        
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

To put the map on the page, the following code is used:

<div id='map'></div>

<script>
mapboxgl.accessToken = 'YourAccessToken';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-71.4512, 43.6568],
    zoom: 13
});

map.addControl(new MapboxDirections({
    accessToken: mapboxgl.accessToken
}), 'top-left');
</script>

Since I need to cover many cities, I have created a new template exactly for city pages. So I'm simply adding the code mentioned above right between header and page content / sidebar (please see the layout mockup).

The problem is that I don't know how to pass latitude / longitude values for each specific city/map to this portion of the code in Mapbox script:

    center: [-71.4512, 43.6568]

Ideally if I can input them in Edit Page through custom fields:

and these two values will be somehow populated in the script. Maybe it's possible to add some kind of placeholders for these two parameters in page template:

center: [%latitude%, %longitude%]

so that they will be populated from corresponding fields, and specific city map is loaded. Would appreciate if someone can point me in the right direction on how to do it.

Thank you!

What do you mean by "City page template"? Is it a custom post type? Are you using a custom template file for it (say, city-single.php) ? — Eduardo Escobar
– Eduardo Escobar, Commented Feb 3, 2018 at 20:21
Where is this javascript code? Keep in mind that this isn't an ACF forum and ACF specific questions are not in scope here — Tom J Nowell
– Tom J Nowell ♦, Commented Feb 3, 2018 at 20:34
@EduardoEscobar, yes, I'm using a template for all city pages. New York and Chicago will use same city-single.php template. — vvy
– vvy, Commented Feb 4, 2018 at 19:37
@Tom J Nowell, yes, I understand it's not ACF forum, that was just an example. If same task can be accomplished with Wordpress built-in functionality - even better. As for the JS code, it's located here: link — vvy
– vvy, Commented Feb 4, 2018 at 19:40
@vvy that's just a link to the mapbox library, it tells me nothing about where that code is located or how it's called. It could be embedded in a shortcode, placed inside post content, loaded from an external javascript library, in an ACF field, part of a page template, etc, etc, all of which would require very, very different answers. Please edit your question to clarify how the JS is loaded, and where it's loaded — Tom J Nowell
– Tom J Nowell ♦, Commented Feb 4, 2018 at 22:19

Tom J Nowell · Accepted Answer · 2018-02-05 14:15:11Z

4

If I were you, I'd store the GPS coordinates in the post meta. Maybe display a meta box on the edit pages, if you want to change it. Otherwise, add the post meta once and forget about it.

Then you can use the wp_footer hook to print the javascript with the post meta value as the coordinate.

namespace StackExchange\WordPress;

add_action( 'wp_footer', __NAMESPACE__ . '\wp_footer' );
function wp_footer() {
    echo '<script>var map = new mapboxgl.Map('.
    wp_json_encode( [ 'container' => 'map', 'center' => \get_post_meta( \get_the_ID() 'gpsCoordinates', true ) ])
        .');</script>';
}

If there's already a named script enqueued that contains the code for mapboxgl, then you can just add an inline script.

namespace StackExchange\WordPress;

add_action( 'wp_enqueue_scripts', __NAMESPACE__ . 'wp_enqueue_scripts' );
function wp_enqueue_scripts() {
    wp_add_inline_script( 'mapbox', 
        'var map = new mapboxgl.Map('.
            wp_json_encode( [ 'container' => 'map', 'center' => \get_post_meta( \get_the_ID() 'gpsCoordinates', true ) ])
        .');'
    );
}

Have a look at the documentation for how to add meta boxes, if you don't know already.

edited Feb 5, 2018 at 14:15

Tom J Nowell♦

61.6k7 gold badges81 silver badges150 bronze badges

answered Feb 3, 2018 at 20:05

Nathan Johnson

6,5486 gold badges32 silver badges50 bronze badges

Note: I highly recommend using esc_js() here or ideally wp_localize_script().

swissspidy
– swissspidy

2018-02-04 11:39:05 +00:00
Commented Feb 4, 2018 at 11:39
esc_js() sure. That wasn't what the question was about so I didn't include that, but added just in case. But why wp_localize_script()?

Nathan Johnson
– Nathan Johnson

2018-02-04 18:33:48 +00:00
Commented Feb 4, 2018 at 18:33
@NathanJohnson, thank you for your help! I'm complete beginner in JS, but I'm going through the basics now and hopefully, will try to implement your solution in couple of days. Here's a link to Mapbox map that I need to populate with coordinates: link

vvy
– vvy

2018-02-04 19:44:23 +00:00
Commented Feb 4, 2018 at 19:44
@NathanJohnson, I have updated the original post with more details, could you please let me know if your suggested solution will work in this case? Thank you!

vvy
– vvy

2018-02-05 06:05:43 +00:00
Commented Feb 5, 2018 at 6:05
@swissspidy wp_json_encode would be more appropriate, specifically around get_post_meta, wrapping the entire code in esc_js will only mangle it

Tom J Nowell
– Tom J Nowell ♦

2018-02-05 13:52:03 +00:00
Commented Feb 5, 2018 at 13:52

| Show 2 more comments

Stack Exchange Network

Populate Javascript code with value from Wordpress Custom Field?

1 Answer 1

Your Answer

Hot Network Questions

Populate Javascript code with value from Wordpress Custom Field?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions