Difference between revisions of "Markers"
From Dragon Eye Atlas
(6 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
.mapboxgl-popup-content { | .mapboxgl-popup-content { | ||
background: rgba(255,255,255,0.8); | background: rgba(255,255,255,0.8); | ||
} | } | ||
.mapboxgl-popup-close-button { | .mapboxgl-popup-close-button { | ||
Line 15: | Line 16: | ||
.mapboxgl-popup-content h4 { | .mapboxgl-popup-content h4 { | ||
margin-top: 0; | 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 33: | 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('<h4>'+feature.properties.type+'</h4><a href="https://notveryprofessional.com/dragoneye/atlas/'+feature.properties.name+'">'+feature.properties.name+'</a>') | .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