I’m working on my first mapping app. The map on my app is fuzzy compared to the sample online. It’s painful to look at because the text isn’t sharp. How do I get the sharpness of the online sample?
Code is at end.
HTML
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static 'map.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/leaflet/dist/leaflet.css"
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet/dist/leaflet.js"
crossorigin=""
></script>
</head>
<body>
<div id="map"></div>
<script
src="{% static 'map.js' %}"
defer
></script>
</body>
</html>
JS
const url = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}' "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const layer = L.tileLayer(url, {
attribution: copy,
});
const map = L.map("map", {
layers: [layer],
});
map.fitWorld();