English version was created automatically using Drupal module auto_node_translate and free DeepL translator.

How do I display my own waypoints and markers on a tourist map from Seznam?

zveřejněno 2020-05-23

When we need to view some map data, we have a few options: Google, Seznam, Bing, OpenStreet maps ... Each has its pros and cons. In my project I used List maps, and their custom tags and cards.

For the project of displaying geological locations on the map (see. The first part of "How to get data from any web page using PHP Simple HTML DOM Parser") I chose maps from Seznam for two reasons:

The Czech Republic has the best tourism data
They need to promote alternatives against Google's monopoly

I had the data prepared in a JSON file, now all that was left was to display them.

Here's what the result looks like:

https://www.geologie-astronomie.cz/Geologicke-lokality/Karlovarsko-a-za…

Preparation

Repeating the initial situation: there are specific locations for each location according to the given coordinates. We want to display these, and when you click on their marker, we want to display basic information (name, image and link for detail page). The markers have two different colours: the locations belonging to the given location are red, the others are grey. In this way, the visitor can easily see all the places of the selected location, but also the closest ones from the surrounding ones.

All this information is already prepared in a JSON file.

The specific page with the map is inserted using <iframe>, where it can be called with the parameter of the location, e.g. ...cards.php?id=Karlovarsko-a-zapadni-Cechy.

Our biggest friend for map creation will be the Map API List documentation https://api.mapy.cz/ and the Maps API Developer section https://napoveda.seznam.cz/forum/sections/18. We will handle everything using JavaScript.

Calling a clean map

It's very simple, a few lines of code, see. API User Guide https://api.mapy.cz/view?page=instruction

<!doctype html>
<html>
<head>
   <script src="https://api.mapy.cz/loader.js"></script>
  <script>Loader.load()</script>
</head>
<body>
  <div id="map" style="width:600px; height:400px;"<</div>
   <script type="text/javascript">
    <var stred = smap.Coords.fromWGS84(14.41, 50.08);
    var map = new SMap(JAK.gel("map"), center, 10);
    map.addDefaultLayer(SMap.DEF_BASE).enable();
     map.addDefaultControls();
   </script>
</body>
</html>

Basics of working with List Map API

I based my example above and drew from the documentation.

How to have different tags for different points

In the URL of the page, I was checking if the id parameter matches any of the defined locations. If the id matched the corresponding location value of the point in the JSON record, then that point would have a red marker, otherwise the default would be grey.

It is defined as the options.url value for the SMap.Marker

https://api.mapy.cz/doc/SMap.Marker.html#SMap.Marker

{string} options.url optional, default:
default Either a DOM element or an image URL

How to auto-zoom so that the map contains all points of a given location

I used to store all coordinates in an array. Using SMap.computeCenterZoom, it automatically calculates the necessary zoom and center.

https://api.mapy.cz/doc/SMap.html#computeCenterZoo

{array} computeCenterZoom(arr, usePadding)
Calculates center and zoom for a point set

How to display information (card, business card) after clicking on a map marker?

There is a class called Business Card - SMap.card https://api.mapy.cz/doc/SMap.Card.html. The fact that it can contain HTML code, we have almost unlimited possibilities what to display here.

Displaying geological places on the map

Based on the above, I used the pre-made JSON as a data source file, which I reloaded via file_get_contents() and saved this transform as a JavaScript source. The resulting file is here for download, so you can explore the whole thing.

download sample

By default

The task at hand, to display maps of geological locations and sites, has been accomplished. Since the necessary data could not be obtained in some machine input, I had to get it myself first. To do this, I used the PHP library simplehtmldom = PHP Simple HTML DOM Parser. I then displayed this information using the List Map API, which looks easy once I found the right procedure.