Tips & Tricks

Zoom to a specific marker by button

It's possible to pan an zoom to a specific maker if the user clicks a button on your website. To do this it is necessary to read a bit website source code.

First, you need the JavaScript variable names of the map and your markers. You get them if you take a look to the source code of your Joomla site. You'll find a JavaScript below your map in the HTML. The variables are defined there.

Example:

<script type="text/javascript">
    var map87 = new L.Map('map87', {worldCopyJump: true});
    map87.attributionControl.setPrefix('');
    
    var baselayer87 = new L.TileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Kartendaten © <a href=http://www.openstreetmap.org target=_blank>OpenStreetMap</a> (<a href=http://www.openstreetmap.org/copyright target=_blank>ODbL</a>)'});
    
    var koord87 = new L.LatLng(-33.8735, 151.2114);
    map87.attributionControl.addAttribution('Grafik von OSM.org (CC BY-SA)');
    
    var marker87 = new L.Marker(koord87);
    map87.addLayer(marker87);
    
    // additional Pins
    var mpK87_onlypin = new L.LatLng(49.593735,18.012013);
    var mpM87_onlypin = new L.Marker(mpK87_onlypin);
    map87.addLayer(mpM87_onlypin);
    
    // set map view
    map87.setView(koord87, 12).addLayer(baselayer87);
    marker87.bindPopup('<p>Hallo Welt</p>');
</script>

If you want to zoom to the default marker, you need in this example map87 and marker87. For the the additional marker "onlypin", you need map87 and mpM87_onlypin.

You will notice the magic number "87" in this code. You will have another number like me, because that is the module ID. It will set by creating the module. This ID is important to separate multiple maps on one site.

Now you have to switch to your article and create something like this in your text:

<span onclick="map87.setView(marker87.getLatLng(), 17);">Sydney</span>

Replace map87 and marker87 by your variable names. Here the zoom level is set to 17. To get closer, choose a larger zoom level. Allowed Levels are 1-20.

That's all. Click to "Sydney" and you will fly over the map to your marker.

❗ Snare

Joomla's TinyMCE editor strips down the HTML-code and removes the span-Element. So the click action has gone. The only way to avoid this, is to deactivate the editor in joomla's user settings. After writing saving the code, the editor can be used again. But on every use on an article with this code, it will removed.

If someone has a better solution, please tell me.