How to enqueue javascript so it displays within a page template;

content-location.php

<?php
/**
 * Template part for displaying page content in page.php
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->
	<div class="entry-content">
	<div id="mapid"></div>
		<?php
			the_content();

			wp_link_pages(
				array(
					'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
					'after'  => '</div>',
				)
			);
			?>
	</div><!-- .entry-content -->
</article><!-- #post-## -->

functions.php

function enqueue_scripts() {

/** 
you can remove the if statement if you want the script to load on all pages; 
locations is the page's slug
*/ 
	if (is_page( 'locations' )) {
		wp_register_style('mapbox_css', 'https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css');

		wp_register_script('mapbox_js', 'https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js', '', '', true); 

		wp_register_script('mapbox_custom', get_stylesheet_directory_uri().'/js/my-mapbox-code.js', [ 'mapbox_js' ], '', true); 

		wp_enqueue_style('mapbox_css');
		wp_enqueue_script('mapbox_js');
		wp_enqueue_script('mapbox_custom');
	}
}

add_action('wp_enqueue_scripts', 'enqueue_scripts', 4);

my-mapbox-code.js

// this will be deactivated in a couple weeks anyways. 
L.mapbox.accessToken = 'pk.eyJ1Ijoic2tvcmFzYXVydXMiLCJhIjoiY2pzNjZleGM0MDl6bDQzbWx3bW9kMzVrNSJ9.HWcJ1KptAncGPZvZW9Z6Sg';

// mapid is the element name that is used to insert the map into 
var myMap = L.mapbox.map('mapid', 'skorasaurus.0d3d48ab').setView([41.51783221717116, -81.68334960937501], 11);

// your server must have CORS enabled!
// var featLayer = L.mapbox.featureLayer().loadURL('MYGEOJSONURL').addTo(myMap); 

// featLayer.on('ready', function() {
//     featLayer.eachLayer(function(tehLayer) {
//     	 popupContent = '<a href="'+tehLayer.feature.properties.shortlink+'">'+tehLayer.feature.properties.name +'</a><br>' + tehLayer.feature.properties.housenumber + ' ' + tehLayer.feature.properties.street+ '<br>' + 
// 	    '<a href="https://www.google.com/maps/search/'+tehLayer.feature.properties.housenumber + ' ' + tehLayer.feature.properties.street+ " Cleveland" + ' ' + tehLayer.feature.properties.postcode + '">'+' Get directions </a>'; 
		 
// 		tehLayer.bindPopup(popupContent);
//     });
// }).addTo(myMap);

style.css

#mapid {
    width: 80%; 
    height: 320px; 
    position: relative;
    margin-bottom: 3em; 
}

template-location.php

<?php
/**
 * Template Name: Locations
 *
 *
 */

get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) :
				the_post();

				get_template_part( 'template-parts/page/content', 'location' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php
get_footer();