To show some geolocations from all over the world on a dynamic map, I used the OpenLayers library which is quite impressive in its speed and ease of use.
OpenLayers can use maptiles from many different sources. You can even create your own tiles and serve them yourself. I undertook this mapcreating- and serving-endeavor in a different project that needed a map of just a small part of the world. More on that in a later post.
But creating tiles showing the entire world on a decent zoomlevel and serving them, requires too much processing and storage power for just a small regular application like this. Therefore, in this project i used the tiles of Open Street Map.
I wanted to show the travel-destinations of a group of people and enable the user to select these destinations one by one and have an animation to give a geographic impression of them. In the right hand column you can start this ‘application’ to give you a better idea of its workings. For a full screen version you can visit https://travels.hollands-spoor.com. I replaced the personal information in the original application with the place of birth of some famous writers from all over the world.
In the bottom of the screen I made a little, toolbarlike row of buttons. To make it swipe-able, I used the Swiper.js slider software. I have been using it for a few years now and once in a while I re-examine it’s alternatives but I think it is still a good choice: https://swiperjs.com/.
Because it was used in a WordPress website, i wrapped the map with these dependencies in a Gutenberg-block. I did not add any settings for the blockeditor yet, someone who can think of a future use can add them, or hire me to do so.
The data and assets for this application are provided by WordPress posts. For my use, it just gets them by a simple query on regular posts. I pass the arguments for this query through a filter so you can adjust them to get custom post types or introduce some taxonomy like category to select these posts.
The website I build this for already used Advanced Custom Posts so I just added some fields for the text in the popups, for Lattitude and Longitude and for an optional marker. In my Github I have an ACF-export for these fields, but it won’t be much work to get them from somewhere else.
Leave a Reply