0

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:

City Page Layout

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:

Edit City Page - 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 Feb 3 '18 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 Feb 3 '18 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 Feb 4 '18 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 Feb 4 '18 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 Feb 4 '18 at 22:19
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.

  • Note: I highly recommend using esc_js() here or ideally wp_localize_script(). – swissspidy Feb 4 '18 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 Feb 4 '18 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 Feb 4 '18 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 Feb 5 '18 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 Feb 5 '18 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.