Difference between revisions of "Markers"
From Dragon Eye Atlas
| (17 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
== Enable Clickable Markers == | == Enable Clickable Markers == | ||
=== Parameters === | === Parameters === | ||
* layer - which layer to activate markers for | * layer - which layer to activate markers for. That layer must have "name" and "type" properties | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<style> | <style> | ||
.mapboxgl-popup-content { | |||
background: rgba(255,255,255,0.8); | |||
} | |||
.mapboxgl-popup-close-button { | |||
color: black; | |||
} | |||
.mapboxgl-popup-content h4 { | |||
margin-top: 0; | |||
} | |||
.mapboxgl-popup-content a { | |||
font-size: 115%; | |||
} | |||
</style> | </style> | ||
<script> | <script> | ||
map.on("load", function() { | map.on("load", function() { | ||
map.setLayoutProperty('<!--{$layer|escape:'html'|default:'POIs'}-->', 'visibility', 'visible'); | |||
map.on('click', function(e) { | map.on('click', function(e) { | ||
var features = map.queryRenderedFeatures(e.point, { | var features = map.queryRenderedFeatures(e.point, { | ||
layers: ['<!--{$layer|escape:'html'|default:'POIs'}-->'] | layers: ['<!--{$layer|escape:'html'|default:'POIs'}-->'] | ||
| Line 26: | Line 38: | ||
var popup = new mapboxgl.Popup({ offset: [0, -15] }) | var popup = new mapboxgl.Popup({ offset: [0, -15] }) | ||
.setLngLat(feature.geometry.coordinates) | .setLngLat(feature.geometry.coordinates) | ||
.setHTML('< | .setHTML('<h4>'+feature.properties.type+'</h4><br /><a href="https://notveryprofessional.com/dragoneye/atlas/'+feature.properties.name+'">'+feature.properties.name+'</a>') | ||
.addTo(map); | .addTo(map); | ||
}); | }); | ||
Latest revision as of 10:51, 6 October 2019
Enable Clickable Markers
Parameters
- layer - which layer to activate markers for. That layer must have "name" and "type" properties