Created
September 12, 2022 20:40
-
-
Save elisavetTriant/fdb4cf93a7689660489c1cade5b5a2ed to your computer and use it in GitHub Desktop.
Custom Leaflet Map with WordPress ACF Fields
This file contains 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 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 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 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 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment