Last active
October 6, 2024 14:39
-
-
Save elisavetTriant/fdb4cf93a7689660489c1cade5b5a2ed to your computer and use it in GitHub Desktop.
Custom Leaflet Map with WordPress and the ACF Plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .acf-map { | |
| width: 100%; | |
| height: 400px; | |
| border: #ccc solid 1px; | |
| margin: 20px 0; | |
| } | |
| /* fixes potential theme css conflict */ | |
| .acf-map img { | |
| max-width: inherit !important; | |
| } | |
| .acf-map .invisible { | |
| display: none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container container--narrow page-section"> | |
| <?php $points = array(); ?> | |
| <?php | |
| //Let's say we are outputting campuses of our custom univeristy site | |
| while (have_posts()) { | |
| the_post(); | |
| $points[] = [ | |
| 'title' => get_the_title(), | |
| 'permalink' => get_the_permalink(), | |
| 'location' => array( | |
| 'address' => get_field('location_address'), | |
| 'latitude' => get_field('location_latitude'), | |
| 'longitude' => get_field('location_longitude') | |
| ) | |
| ]; | |
| }; | |
| ?> | |
| <ul class="link-list min-list"> | |
| <?php | |
| foreach ($points as $campus) { ?> | |
| <li> | |
| <a href="<?php echo $campus['permalink']; ?>"> | |
| <?php echo $campus['title']; ?> | |
| </a> | |
| </li> | |
| <?php } ?> | |
| </ul> | |
| <hr class="section-break"> | |
| <h2 class="headline headline--small">Find Campus Sites On The Map</h2> | |
| <div class="acf-map leaflet-map"> | |
| <?php | |
| foreach ($points as $campus) { ?> | |
| <div class="marker-container invisible" data-lat="<?php echo $campus['location']['latitude']; ?>" data-lng="<?php echo $campus['location']['longitude']; ?>"> | |
| <h3> | |
| <a href="<?php echo $campus['permalink']; ?>"> <?php echo $campus['title']; ?></a> | |
| </h3> | |
| <p><?php echo $campus['location']['address']; ?></p> | |
| </div> | |
| <?php } ?> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function custom_files() | |
| { | |
| wp_enqueue_script('main-files-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true); | |
| //use wp_localize_script if you need custom pins from your theme's images folder | |
| wp_localize_script( 'main-files-js', 'php_to_js', [ | |
| 'data' => array( | |
| 'theme_uri' => get_theme_file_uri() | |
| ) | |
| ]); | |
| }; | |
| add_action('wp_enqueue_scripts', 'custom_files'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "../css/style.scss" | |
| // Our modules / classes | |
| import LeafletMap from "./modules/LeafletMap" | |
| // Instantiate a new object using our modules/classes | |
| var leafletMap = new LeafletMap() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import L from "leaflet"; //don't forget to install Leaflet with npm install leaflet | |
| class LeafletMap { | |
| constructor() { | |
| document.querySelectorAll(".leaflet-map").forEach(el => { | |
| this.new_map(el); | |
| }) | |
| } | |
| new_map($el) { | |
| var $markers = $el.querySelectorAll(".marker-container") | |
| var arrayOfLatLngs = [] | |
| var args = { | |
| zoom: 14, | |
| centerLat: 39.630527, | |
| centerLng: 22.958648, | |
| } | |
| var map = L.map($el).setView([args.centerLng, args.centerLng], args.zoom); | |
| L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 19, | |
| attribution: '© OpenStreetMap' | |
| }).addTo(map); | |
| map.markers = [] | |
| var that = this | |
| // add markers | |
| $markers.forEach(function (x) { | |
| arrayOfLatLngs.push([x.getAttribute("data-lat"), x.getAttribute("data-lng")]) | |
| that.add_marker(x, map) | |
| }) | |
| // center map | |
| this.center_map(map, arrayOfLatLngs) | |
| } // end new_map | |
| add_marker($marker, map) { | |
| var templateUrl = php_to_js.data.theme_uri | |
| var myIcon = L.icon({ | |
| iconUrl: templateUrl+"/images/maps/icons8-place-marker-24.png", | |
| iconRetinaUrl: templateUrl+'/images/maps/icons8-place-marker-96.png', | |
| }); | |
| var marker = L.marker([$marker.getAttribute("data-lat"), $marker.getAttribute("data-lng")], {icon: myIcon}).addTo(map); | |
| map.markers.push(marker) | |
| // if marker contains HTML, add it to an infoWindow | |
| if ($marker.innerHTML) { | |
| // create info window | |
| marker.bindPopup($marker.innerHTML); | |
| } | |
| } // end add_marker | |
| center_map(map, arrayOfLatLngs) { | |
| var bounds = new L.LatLngBounds(arrayOfLatLngs); | |
| // only 1 marker? | |
| if (map.markers.length == 1) { | |
| // set center of map | |
| map.setView(arrayOfLatLngs[0], 14, { animation: true }); | |
| } else { | |
| // fit to bounds | |
| map.fitBounds(bounds); | |
| } | |
| } // end center_map | |
| } | |
| export default LeafletMap |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Example usage on pages --> | |
| <?php if (get_field('location_latitude') && get_field('location_longitude')) : ?> | |
| <!-- example usage on page or custom post-type / single point of interest marker --> | |
| <hr class="section-break"> | |
| <h2 class="headline headline--small">Location of <?php the_title(); ?></h2> | |
| <div class="acf-map leaflet-map" data-id=<?php the_ID(); ?> data-template=<?php echo get_post_type() ?>></div> | |
| <?php endif; ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment