Geographic Information Systems Asked on June 21, 2021
I have a Mapbox map , and at the moment my marker comes up on map load. But what I’m trying to do is to only display the marker when the user clicks the check box inside the table. I have tried several methods but has not worked out.
HTML TABLE
<tbody class="data">
<tr > <td class="check"> <input type="checkbox" class="remember"></td> </tr>
</tbody>
Javascript for Mapbox
mapboxgl.accessToken = 'pk.eyJ1IjoiZXNxdWlsYXgiLCJhIjoiY2tqd2ZyMXJsMGVqeDJ4cW8xcnRja2tqdiJ9.7z7Eyrj3iexJ9uDVYIT0yw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/joel001/ckokqqll178jp17n7ju7plcmy',
center: [115.83333, -32.01667],
zoom: 11
});
map.on('load', function () {
map.loadImage(
'https://img.icons8.com/nolan/64/map-pin.png',
function (error, image) {
if (error) throw error;
// Add the image to the map style.
map.addImage('myimage', image);
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
{
'type': 'Feature',
'properties': {
'title': 'My Marker'
},
'geometry': {
'type': 'Point',
'coordinates': [long, lat]
}
}
]
}
});
// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': 'myimage',
'text-field': ['get', 'title'],
'text-offset': [0, 1.55],
'text-anchor': 'top'
}
});
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'places', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function () {
map.getCanvas().style.cursor = '';
});
}
);
});
A working solution by adding an EventListener on your checkbox and then play on mapbox source data by reassigning GeoJSON content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 400px;}
</style>
</head>
<body>
<table>
<tbody class="data">
<tr>
<td class="check"> <input id="mycheckbox" type="checkbox" class="remember"></td>
</tr>
</tbody>
</table>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXNxdWlsYXgiLCJhIjoiY2tqd2ZyMXJsMGVqeDJ4cW8xcnRja2tqdiJ9.7z7Eyrj3iexJ9uDVYIT0yw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/joel001/ckokqqll178jp17n7ju7plcmy',
center: [115.83333, -32.01667],
zoom: 2
});
var long = 115.83333;
var lat = -32.01667;
map.on('load', function() {
map.loadImage(
'https://img.icons8.com/nolan/64/map-pin.png',
function(error, image) {
if (error) throw error;
// Add the image to the map style.
map.addImage('myimage', image);
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': []
}
});
// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': 'myimage',
'text-field': ['get', 'title'],
'text-offset': [0, 1.55],
'text-anchor': 'top'
}
});
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'places', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function() {
map.getCanvas().style.cursor = '';
});
var checkbox = document.getElementById('mycheckbox');
checkbox.addEventListener('change', function() {
if (this.checked) {
map.getSource('places').setData({
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': { 'title': 'My Marker' },
'geometry': { 'type': 'Point', 'coordinates': [long, lat] }
}]
});
} else {
map.getSource('places').setData({
'type': 'FeatureCollection',
'features': []
});
}
});
}
);
});
</script>
</body>
</html>
Correct answer by ThomasG77 on June 21, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP