Skip to content

Instantly share code, notes, and snippets.

@Luckyfella73
Created March 28, 2023 14:47
Show Gist options
  • Save Luckyfella73/40dc572fb366c847521e9349dbd5f87a to your computer and use it in GitHub Desktop.
Save Luckyfella73/40dc572fb366c847521e9349dbd5f87a to your computer and use it in GitHub Desktop.
Leaflet map - removed leaflet link
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
const baseUrl = window.location.origin;
const accessToken =
'<-- insert access token here -->';
const selectorMap = '.c-map';
const initMap = () => {
console.log('map');
const mapElement = document.querySelector(selectorMap);
const mapItem = mapElement;
const { mapId } = mapItem.dataset;
const { lat } = mapItem.dataset;
const { lng } = mapItem.dataset;
const map = L.map(mapId, { zoomControl: false }).setView([lat, lng], 15);
L.tileLayer(
`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${accessToken}`,
{
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
tileSize: 512,
zoomOffset: -1,
id: 'mapbox/streets-v11',
accessToken,
},
).addTo(map);
// this removes the link to leaflet
map.attributionControl.setPrefix('');
const customMarker = L.icon({
iconUrl: `${baseUrl}/assets/images-static/marker.svg`,
shadowUrl: `${baseUrl}/assets/images-static/marker-shadow.png`,
iconSize: [100, 100], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [50, 50], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
});
L.marker([lat, lng], { icon: customMarker }).addTo(map);
};
function init() {
if (document.querySelector(selectorMap) !== null) {
initMap();
}
}
export default {
init,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment