In this post, I will provide a simple request in plain English to four AI tools (namely: Gemini, ChatGPT, DeepSeek and Grok) to compare the results we get. The prompt provided is this sentence below;-
Generate html webmap with all the necessary cartographic elements
Note that the request statement isn't detailed, as no specific location and technical functionality were provided. This is delibrate to see how each AI tool thinker and solve the problem.
Gemini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Web Map Interface</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
#map { height: 100vh; width: 100vw; }
/* Map Legend Styling */
.legend {
padding: 10px;
background: white;
line-height: 1.5;
color: #333;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
/* Header Overlay */
.map-header {
position: absolute;
top: 10px;
left: 50px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
padding: 5px 15px;
border-radius: 4px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="map-header">
<h2>City Infrastructure Overview</h2>
</div>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// 1. Initialize the Map
const map = L.map('map').setView([45.523062, -122.676482], 13);
// 2. Base Layers (Cartography Element: Reference Frame)
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri'
});
// 3. Data Layers (Thematic Elements)
const parks = L.layerGroup();
L.marker([45.528, -122.662]).bindPopup("<b>Holladay Park</b><br>Public Green Space").addTo(parks);
L.marker([45.515, -122.684]).bindPopup("<b>Portland Art Museum</b><br>Cultural Center").addTo(parks);
// 4. Layer Control (Interactivity)
const baseMaps = {
"Street Map": osm,
"Satellite": satellite
};
const overlayMaps = {
"Points of Interest": parks
};
L.control.layers(baseMaps, overlayMaps, {collapsed: false}).addTo(map);
// 5. Scale Bar (Cartography Element: Measurement)
L.control.scale({ imperial: true, metric: true, position: 'bottomleft' }).addTo(map);
// 6. Custom Legend (Cartography Element: Symbology)
const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'legend');
div.innerHTML += '<h4>Map Legend</h4>';
div.innerHTML += '<i style="background: #2196F3"></i><span>Commercial</span><br>';
div.innerHTML += '<i style="background: #4CAF50"></i><span>Parks</span><br>';
div.innerHTML += '<i style="background: #F44336"></i><span>Critical Infrastructure</span><br>';
return div;
};
legend.addTo(map);
</script>
</body>
</html>ChatGPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smart Campus Web Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
html, body { margin: 0; padding: 0; height: 100%; font-family: Arial, sans-serif; }
#map { width: 100%; height: 100vh; }
.map-title {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background: white;
padding: 10px 18px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-weight: bold;
font-size: 18px;
}
.north-arrow {
position: absolute;
top: 70px;
right: 15px;
z-index: 1000;
background: white;
padding: 8px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
text-align: center;
font-weight: bold;
}
.legend {
position: absolute;
bottom: 30px;
right: 15px;
z-index: 1000;
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
line-height: 1.6;
font-size: 14px;
}
.legend i {
width: 14px;
height: 14px;
float: left;
margin-right: 8px;
opacity: 0.8;
}
.coords {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1000;
background: rgba(255,255,255,0.9);
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div class="map-title">Smart Campus Web Map</div>
<div class="north-arrow">N<br>⬆</div>
<div id="map"></div>
<div class="coords" id="coords">Lat: 0, Lng: 0</div>
<div class="legend">
<strong>Legend</strong><br>
<i style="background:#1f78b4"></i> Academic Buildings<br>
<i style="background:#33a02c"></i> Hostels<br>
<i style="background:#e31a1c"></i> Health Facilities<br>
<i style="background:#ff7f00"></i> Roads
</div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([9.0579, 7.4951], 16);
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const satellite = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
const academic = L.layerGroup([
L.marker([9.0585, 7.4955]).bindPopup('Faculty of Science'),
L.marker([9.0575, 7.4960]).bindPopup('Engineering Block')
]).addTo(map);
const hostels = L.layerGroup([
L.marker([9.0569, 7.4945]).bindPopup('Male Hostel'),
L.marker([9.0564, 7.4964]).bindPopup('Female Hostel')
]).addTo(map);
const health = L.layerGroup([
L.marker([9.0580, 7.4940]).bindPopup('Campus Clinic')
]).addTo(map);
const roads = L.polyline([
[9.0560, 7.4940],
[9.0588, 7.4965]
], {color: '#ff7f00'}).addTo(map);
const baseMaps = {
'OpenStreetMap': osm,
'Satellite': satellite
};
const overlayMaps = {
'Academic Buildings': academic,
'Hostels': hostels,
'Health Facilities': health,
'Roads': roads
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale().addTo(map);
map.on('mousemove', function(e) {
document.getElementById('coords').innerHTML =
`Lat: ${e.latlng.lat.toFixed(5)}, Lng: ${e.latlng.lng.toFixed(5)}`;
});
</script>
</body>
</html>
DeepSeek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Interactive Webmap - Complete Cartography Elements</title>
<!-- Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Leaflet Control Geocoder for search/locate -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<!-- Font Awesome for icons (optional but enhances UI) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #2c3e2f;
}
#map-container {
position: relative;
height: 100vh;
width: 100%;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#map {
height: 100%;
width: 100%;
background: #c8e0e0;
}
/* Custom Cartography Style Panel - Title, Scale, Legend */
.carto-panel {
position: absolute;
bottom: 20px;
left: 10px;
z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(4px);
padding: 8px 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-size: 14px;
font-weight: 500;
border-left: 5px solid #2c7a47;
pointer-events: none;
font-family: 'Segoe UI', sans-serif;
}
.carto-title {
font-size: 1.1rem;
font-weight: bold;
color: #1e3c2c;
}
.carto-sub {
font-size: 0.75rem;
color: #4a5b4c;
}
.scale-bar-container {
position: absolute;
bottom: 20px;
right: 10px;
z-index: 1000;
background: rgba(255,255,255,0.85);
padding: 6px 12px;
border-radius: 6px;
font-family: monospace;
font-weight: bold;
font-size: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
pointer-events: none;
backdrop-filter: blur(2px);
}
.legend-container {
position: absolute;
bottom: 80px;
left: 10px;
z-index: 1000;
background: rgba(255,255,255,0.92);
padding: 8px 12px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-size: 12px;
min-width: 140px;
backdrop-filter: blur(4px);
pointer-events: auto;
border: 1px solid #ddd;
}
.legend-container h4 {
margin: 0 0 6px 0;
font-size: 13px;
border-bottom: 1px solid #ccc;
display: inline-block;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend-color {
width: 20px;
height: 14px;
margin-right: 8px;
border-radius: 2px;
}
.legend-icon {
width: 20px;
text-align: center;
margin-right: 8px;
font-size: 12px;
}
.attribution-fancy {
position: absolute;
bottom: 8px;
left: 55px;
background: rgba(0,0,0,0.6);
color: white;
padding: 2px 8px;
border-radius: 20px;
font-size: 9px;
z-index: 1000;
pointer-events: none;
font-family: monospace;
}
/* custom marker cluster? not needed, but simple */
.custom-marker-label {
font-weight: bold;
}
@media (max-width: 600px) {
.legend-container { bottom: 70px; left: 5px; font-size: 10px; min-width: 120px; }
.carto-panel { font-size: 10px; bottom: 10px; left: 5px; }
.scale-bar-container { bottom: 10px; right: 5px; }
}
.leaflet-control-attribution {
font-size: 8px;
background: rgba(255,255,240,0.7);
}
</style>
</head>
<body>
<div id="map-container">
<div id="map"></div>
<!-- Title & Credits (Cartography element: Title) -->
<div class="carto-panel">
<div class="carto-title">🌍 World Exploration Map</div>
<div class="carto-sub">Topographic Basemap | Interactive Cartography</div>
</div>
<!-- Scale Bar will be dynamically injected via Leaflet control, but we add an extra numeric scale indicator -->
<div class="scale-bar-container" id="dynamic-scale">
Map Scale: 1 : <span id="scaleValue">--</span>
</div>
<!-- Legend (Cartography element: Legend) -->
<div class="legend-container" id="legend">
<h4><i class="fas fa-map-signs"></i> Map Legend</h4>
<div class="legend-item"><div class="legend-color" style="background: #4c9f70;"></div><span>Forested / Park Areas</span></div>
<div class="legend-item"><div class="legend-color" style="background: #e0cba0;"></div><span>Arid / Shrubland</span></div>
<div class="legend-item"><div class="legend-color" style="background: #6ba5c4;"></div><span>Water Bodies</span></div>
<div class="legend-item"><div class="legend-icon"><i class="fas fa-map-marker-alt" style="color:#d1342e;"></i></div><span>Major Cities (Capitals)</span></div>
<div class="legend-item"><div class="legend-icon"><i class="fas fa-mountain" style="color:#5d4a2e;"></i></div><span>Peaks / Landmarks</span></div>
<div class="legend-item"><div class="legend-color" style="background: #b5884d;"></div><span>Mountain Ranges</span></div>
</div>
<div class="attribution-fancy">
© OpenStreetMap contributors | Data: Natural Earth
</div>
</div>
<script>
// Initialize map with center at [20, 10] (Africa/Europe view) and zoom level 3
const map = L.map('map').setView([20, 10], 3);
// Base Tile Layer: CartoDB Voyager (clean, readable with subtle labels and hillshading)
// Adding necessary attribution as part of cartographic norms
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 18,
minZoom: 2,
className: 'map-tiles'
}).addTo(map);
// Optional: Add a simple topographic feel by adding an extra overlay? Not needed but clean.
// ======================
// CARTOGRAPHY ELEMENTS:
// 1. Scale Bar (dynamic using Leaflet control)
// 2. Compass Rose / North Arrow (custom control via leaflet)
// 3. Grid lines (Lat/Lon graticule)
// 4. Locate control / geocoder
// 5. Interactive markers with popups (Points of Interest)
// 6. Overview/minimap? (optional but advanced; kept minimal)
// ======================
// --- SCALE BAR (official leaflet control) ---
L.control.scale({ metric: true, imperial: true, position: 'bottomright' }).addTo(map);
// Also update numeric scale display in custom panel (dynamic)
function updateScaleDisplay() {
const zoom = map.getZoom();
// approximate scale denominator for Web Mercator at equator: resolution = 156543.03 * cos(latitude) / 2^zoom
// Simplified: at equator and zoom 0, scale approx 1: 591,657,528; for zoom level, 1: (591657528 / 2^zoom)
// better approximation using leaflet's getScale? Not builtin, but compute standard:
const scaleDenom = Math.round(591657528 / Math.pow(2, zoom));
document.getElementById('scaleValue').innerText = scaleDenom.toLocaleString();
}
map.on('zoomend', updateScaleDisplay);
map.on('load', updateScaleDisplay);
setTimeout(updateScaleDisplay, 100);
// --- NORTH ARROW (Compass Rose) using custom control ---
const NorthArrowControl = L.Control.extend({
options: { position: 'topright' },
onAdd: function(map) {
const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.width = '34px';
container.style.height = '34px';
container.style.borderRadius = '4px';
container.style.boxShadow = '0 1px 5px rgba(0,0,0,0.3)';
container.style.cursor = 'pointer';
container.style.textAlign = 'center';
container.style.lineHeight = '34px';
container.style.fontSize = '20px';
container.style.fontWeight = 'bold';
container.innerHTML = '⬆️';
container.title = 'North Indicator (Map aligned to North)';
// Optional: on click re-orient? Not needed, but info
container.onclick = function() {
map.setView(map.getCenter(), map.getZoom(), { animate: true });
};
return container;
}
});
map.addControl(new NorthArrowControl());
// --- GRATICULE (Lat/Lon Grid Lines) using leaflet-graticule? But we implement custom lightweight graticule
// Simple implementation: Add set of polylines for major lat/lon lines every 30 degrees? Creates nice cartographic effect.
function addGraticule() {
const latStep = 30;
const lonStep = 30;
const bounds = [[-90, -180], [90, 180]];
// horizontal lines (parallels)
for (let lat = -60; lat <= 60; lat += latStep) {
const points = [];
for (let lon = -180; lon <= 180; lon += 5) {
points.push([lat, lon]);
}
L.polyline(points, {
color: '#9babb0',
weight: 0.7,
opacity: 0.5,
interactive: false,
className: 'graticule-line'
}).addTo(map);
}
// vertical lines (meridians)
for (let lon = -180; lon <= 180; lon += lonStep) {
const points = [];
for (let lat = -90; lat <= 90; lat += 5) {
points.push([lat, lon]);
}
L.polyline(points, {
color: '#9babb0',
weight: 0.7,
opacity: 0.5,
interactive: false
}).addTo(map);
}
// Add subtle labels for key parallels/meridians? optional: add text markers but can clutter.
// Better: add degree labels at edges using DivIcon at map corners? complicated, but we add a few sample.
const equatorLabel = L.marker([0, 0], {
icon: L.divIcon({ className: 'graticule-label', html: 'Equator 0°', iconSize: [50, 20], popupAnchor: [0, -10] }),
interactive: false
});
equatorLabel.addTo(map);
const primeMeridianLabel = L.marker([10, 0], {
icon: L.divIcon({ className: 'graticule-label', html: 'Prime Meridian', iconSize: [70, 20] }),
interactive: false
});
primeMeridianLabel.addTo(map);
// style for labels
const style = document.createElement('style');
style.innerHTML = `.graticule-label { background: rgba(255,255,200,0.7); font-size: 9px; padding: 2px 4px; border-radius: 12px; border: 0.5px solid #aaa; white-space: nowrap; }`;
document.head.appendChild(style);
}
addGraticule();
// --- GEOCODER / SEARCH CONTROL (for location search) ---
const geocoder = L.Control.geocoder({
defaultMarkGeocode: true,
position: 'topleft',
placeholder: 'Search for place...',
errorMessage: 'Location not found',
showResultIcons: true
}).addTo(map);
// --- LOCATE CONTROL (User's current location) ---
L.control.locate({
position: 'topleft',
drawCircle: true,
follow: false,
setView: true,
keepCurrentZoomLevel: false,
showPopup: true,
strings: { title: "Show my location", popup: "You are within {distance} meters from this point" }
}).addTo(map);
// --- ADD POINTS OF INTEREST (Cities and Landmarks) with Popups & rich content---
const cities = [
{ name: "Paris, France", coords: [48.8566, 2.3522], type: "capital", desc: "Eiffel Tower, Louvre Museum" },
{ name: "Tokyo, Japan", coords: [35.6895, 139.6917], type: "capital", desc: "Shibuya, Tokyo Skytree" },
{ name: "New York, USA", coords: [40.7128, -74.0060], type: "city", desc: "Statue of Liberty, Times Square" },
{ name: "Cairo, Egypt", coords: [30.0444, 31.2357], type: "capital", desc: "Pyramids of Giza, Nile River" },
{ name: "Cape Town, South Africa", coords: [-33.9249, 18.4241], type: "city", desc: "Table Mountain" },
{ name: "Sydney, Australia", coords: [-33.8688, 151.2093], type: "city", desc: "Sydney Opera House" },
{ name: "Moscow, Russia", coords: [55.7558, 37.6173], type: "capital", desc: "Red Square, Kremlin" },
{ name: "Rio de Janeiro, Brazil", coords: [-22.9068, -43.1729], type: "city", desc: "Christ the Redeemer" },
{ name: "Delhi, India", coords: [28.6139, 77.2090], type: "capital", desc: "India Gate, Red Fort" },
{ name: "Istanbul, Turkey", coords: [41.0082, 28.9784], type: "city", desc: "Hagia Sophia" }
];
// Mountain peaks / Landmarks additional
const landmarks = [
{ name: "Mt. Everest", coords: [27.9881, 86.9250], type: "peak", desc: "Highest point on Earth 8848m" },
{ name: "Kilimanjaro", coords: [-3.0674, 37.3556], type: "peak", desc: "Highest mountain in Africa" },
{ name: "Denali", coords: [63.0690, -151.0070], type: "peak", desc: "Highest peak in North America" },
{ name: "Aconcagua", coords: [-32.6539, -70.0118], type: "peak", desc: "Highest in South America" }
];
// Custom Icons for different POIs
const cityIcon = L.divIcon({
html: '<i class="fas fa-city" style="color:#2c5e2e; font-size:16px; text-shadow: 0 0 2px white;"></i>',
iconSize: [20, 20], className: 'custom-div-icon'
});
const capitalIcon = L.divIcon({
html: '<i class="fas fa-landmark" style="color:#b33e2e; font-size:18px; text-shadow: 0 0 2px white;"></i>',
iconSize: [22, 22], className: 'custom-div-icon'
});
const peakIcon = L.divIcon({
html: '<i class="fas fa-mountain" style="color:#5e3a1c; font-size:16px;"></i>',
iconSize: [20, 20], className: 'custom-div-icon'
});
// Helper to add markers
cities.forEach(city => {
let iconChoice = city.type === 'capital' ? capitalIcon : cityIcon;
if (city.name.includes("New York")) iconChoice = cityIcon; // for variation
const marker = L.marker(city.coords, { icon: iconChoice, riseOnHover: true }).addTo(map);
marker.bindPopup(`
<b>🏙️ ${city.name}</b><br>
📍 ${city.desc}<br>
<i>Population Center</i><br>
<span style="font-size:11px;">Click for details</span>
`);
});
landmarks.forEach(peak => {
const marker = L.marker(peak.coords, { icon: peakIcon, riseOnHover: true }).addTo(map);
marker.bindPopup(`
<b>⛰️ ${peak.name}</b><br>
🧗 ${peak.desc}<br>
<span style="font-size:10px;">Notable Summit</span>
`);
});
// Add a thematic polygon layer: Example of "Forest/Woodland" regions (representative areas) for legend demonstration
// Not actual exact boundaries but illustrative cartographic elements (using GeoJSON-like features)
const forestAreas = [
{ name: "Amazon Rainforest", coords: [[-15, -70], [-10, -65], [-5, -70], [-8, -75], [-15, -70]] },
{ name: "Congo Basin", coords: [[-2, 15], [2, 20], [5, 18], [3, 12], [-2, 15]] },
{ name: "Siberian Taiga", coords: [[60, 85], [65, 95], [62, 105], [58, 95], [60, 85]] }
];
forestAreas.forEach(area => {
const polygonPoints = area.coords.map(coord => [coord[0], coord[1]]);
L.polygon(polygonPoints, {
color: "#2b7a3e",
weight: 1,
opacity: 0.7,
fillColor: "#4c9f70",
fillOpacity: 0.35,
interactive: true
}).bindPopup(`🌲 ${area.name} (Forested Region)`).addTo(map);
});
// Mountain ranges polylines: e.g., Himalayas, Andes, Rockies
const mountainRanges = [
{ name: "Himalayas", coords: [[28, 70], [29, 78], [30, 84], [29, 88], [27, 86], [28, 76]] },
{ name: "Andes", coords: [[-35, -70], [-20, -69], [-10, -76], [5, -72], [10, -70]] },
{ name: "Rocky Mountains", coords: [[40, -110], [45, -115], [50, -115], [55, -120], [60, -135]] }
];
mountainRanges.forEach(range => {
const linePoints = range.coords.map(coord => [coord[0], coord[1]]);
L.polyline(linePoints, {
color: "#b5884d",
weight: 3,
opacity: 0.8,
dashArray: "5, 5"
}).bindPopup(`🏔️ ${range.name} Mountain Range`).addTo(map);
});
// Additional water body representation: Add some major lakes (optional for legend)
const majorLakes = [
{ name: "Lake Superior", coords: [[47.5, -86.5], [48.2, -84.5], [47.0, -84.0], [46.5, -86.0]] },
{ name: "Lake Victoria", coords: [[-1, 32], [-2, 34], [-3, 33], [-1, 32]] }
];
majorLakes.forEach(lake => {
L.polygon(lake.coords, {
color: "#2f93c4",
weight: 1,
fillColor: "#6ba5c4",
fillOpacity: 0.6
}).bindPopup(`💧 ${lake.name}`).addTo(map);
});
// --- ADD FULLSCREEN CONTROL (for better UX) ---
// Use leaflet fullscreen? simple via custom? Add using external? but can implement via simple plugin or native.
// Use built-in leaflet fullscreen? We'll use a simple control to make map fullscreen via requestFullscreen API
const fullscreenControl = L.Control.extend({
options: { position: 'topright' },
onAdd: function(map) {
const btn = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
btn.innerHTML = '<i class="fas fa-expand"></i>';
btn.style.backgroundColor = 'white';
btn.style.width = '34px';
btn.style.height = '34px';
btn.style.lineHeight = '34px';
btn.style.textAlign = 'center';
btn.style.fontSize = '18px';
btn.style.cursor = 'pointer';
btn.style.borderRadius = '4px';
btn.style.boxShadow = '0 1px 5px rgba(0,0,0,0.3)';
btn.onclick = () => {
const elem = document.getElementById('map-container');
if (elem.requestFullscreen) elem.requestFullscreen();
else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
};
return btn;
}
});
map.addControl(new fullscreenControl());
// --- Optional: Print map button? Not necessary but adds cartographic export feature ---
const printControl = L.Control.extend({
options: { position: 'topright' },
onAdd: function(map) {
const btn = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
btn.innerHTML = '<i class="fas fa-print"></i>';
btn.style.backgroundColor = 'white';
btn.style.width = '34px';
btn.style.height = '34px';
btn.style.lineHeight = '34px';
btn.style.textAlign = 'center';
btn.style.fontSize = '18px';
btn.style.cursor = 'pointer';
btn.style.borderRadius = '4px';
btn.style.marginTop = '8px';
btn.style.boxShadow = '0 1px 5px rgba(0,0,0,0.3)';
btn.onclick = () => { window.print(); };
return btn;
}
});
map.addControl(new printControl());
// Add an inset / overview map? (Optional but advanced, not required but to boost cartography)
// we can add a small minimap but could overload, skipping but still robust.
// Add coordinates display on mouse move (Cartography element: coordinate readout)
const coordControl = L.Control.extend({
options: { position: 'bottomleft' },
onAdd: function(map) {
const div = L.DomUtil.create('div', 'info-coordinates');
div.style.backgroundColor = 'rgba(0,0,0,0.65)';
div.style.color = 'white';
div.style.padding = '4px 10px';
div.style.borderRadius = '20px';
div.style.fontSize = '11px';
div.style.fontFamily = 'monospace';
div.style.backdropFilter = 'blur(2px)';
div.style.pointerEvents = 'none';
div.innerHTML = 'Lat: --, Lon: --';
map.on('mousemove', function(e) {
div.innerHTML = `Lat: ${e.latlng.lat.toFixed(4)}, Lon: ${e.latlng.lng.toFixed(4)}`;
});
map.on('mouseout', function() {
div.innerHTML = 'Lat: --, Lon: --';
});
return div;
}
});
map.addControl(new coordControl());
// --- Add Simple Layer Control for toggling grids/extra? Not necessary but enhances functionality ---
const baseLayers = {
"Light Basemap": L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© OSM & CARTO'
})
};
const overlayLayers = {
"Graticule Grid": L.layerGroup().addTo(map), // we can control but existing graticule is added, we can toggle later.
"Points of Interest": L.layerGroup().addTo(map),
"Mountain Ranges & Forests": L.layerGroup().addTo(map)
};
// Actually the existing layers are on map, we can reorganize but for clarity, we just add control to show/hide existing layers? Instead we can group but not necessary for demo completeness.
// Since we already have cartographic completeness, adding layer control makes map more professional.
// But to avoid duplicates, we will add a dummy control group that simply notifies? Instead we'll let user toggle the grid layer via layer control.
// We create a group for graticule to be toggleable: initially all lines are added directly, we move them to a layer group.
// Because we already added graticule lines individually, we should instead add them to a group.
// Quick refactor: remove existing graticule lines? Not feasible after add. But for demo we can create a new toggle but fine.
// Let's just ensure that the map has layer control as a standard cartographic tool.
const layerControl = L.control.layers(baseLayers, null, { collapsed: false }).addTo(map);
// For clarity, we can add a note: graticule can be hidden via dev, but it's fine.
// finalize with a small welcome popup
map.on('load', function() {
setTimeout(() => {
L.popup()
.setLatLng([20, 10])
.setContent("🗺️ Complete Cartographic Webmap: Scale, North Arrow, Legend, Grid, Search, Locate, and Points of Interest.")
.openOn(map);
}, 800);
});
// additional cartographic enhancement: print media styles
const printStyle = document.createElement('style');
printStyle.innerHTML = `@media print { body { margin:0; } .leaflet-control-container, .carto-panel, .legend-container, .attribution-fancy, .scale-bar-container { print-color-adjust: exact; } }`;
document.head.appendChild(printStyle);
// ensure all interactive popups are friendly
console.log("Webmap with full cartography elements initialized");
</script>
</body>
</html>Grok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>World Cities Web Map - Complete Cartographic Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
#map { height: 100vh; width: 100%; }
.title {
position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
background: rgba(255,255,255,0.9); padding: 8px 16px; border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 1000; font-size: 1.4em; font-weight: bold;
text-align: center;
}
.credits {
position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,0.8);
padding: 5px 10px; border-radius: 4px; font-size: 0.8em; z-index: 1000;
}
.north-arrow {
position: absolute; bottom: 80px; right: 20px; z-index: 1000;
background: rgba(255,255,255,0.8); padding: 5px; border-radius: 4px;
font-size: 1.2em; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="map"></div>
<div class="title">World Major Cities Web Map<br><small>Interactive Example with Full Cartographic Elements</small></div>
<div class="north-arrow">↑<br><small>NORTH</small></div>
<div class="credits">
Data: Sample cities | Basemap: © OpenStreetMap contributors<br>
Created with Leaflet | Projection: Web Mercator (EPSG:3857)
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-scale@0.1.0/leaflet.control.scale.min.js"></script> <!-- Optional, but Leaflet has built-in now -->
<script>
// Initialize the map
var map = L.map('map', {
center: [20, 0], // Global view
zoom: 2,
zoomControl: true,
attributionControl: true
});
// Add OpenStreetMap basemap (standard tile layer)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Sample thematic data: Major cities with population-based sizing and categories
var cities = [
{name: "Tokyo", lat: 35.6762, lng: 139.6503, pop: 37400000, category: "Asia"},
{name: "Delhi", lat: 28.6139, lng: 77.2090, pop: 32000000, category: "Asia"},
{name: "Shanghai", lat: 31.2304, lng: 121.4737, pop: 29000000, category: "Asia"},
{name: "São Paulo", lat: -23.5505, lng: -46.6333, pop: 22000000, category: "Americas"},
{name: "Mexico City", lat: 19.4326, lng: -99.1332, pop: 22000000, category: "Americas"},
{name: "New York", lat: 40.7128, lng: -74.0060, pop: 20000000, category: "Americas"},
{name: "Cairo", lat: 30.0444, lng: 31.2357, pop: 21000000, category: "Africa"},
{name: "Mumbai", lat: 19.0760, lng: 72.8777, pop: 20000000, category: "Asia"}
];
// Color function by category
function getColor(category) {
return category === "Asia" ? "#e41a1c" :
category === "Americas" ? "#377eb8" : "#4daf4a";
}
// Add circle markers (thematic layer)
var cityLayer = L.layerGroup().addTo(map);
cities.forEach(function(city) {
var radius = Math.sqrt(city.pop) / 300; // Scaled by population
L.circleMarker([city.lat, city.lng], {
radius: radius,
fillColor: getColor(city.category),
color: "#fff",
weight: 2,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`
<b>${city.name}</b><br>
Population: ~${city.pop.toLocaleString()}<br>
Category: ${city.category}<br>
Coordinates: ${city.lat.toFixed(2)}°N, ${city.lng.toFixed(2)}°E
`).addTo(cityLayer);
});
// Add scale bar (built-in Leaflet control)
L.control.scale({
position: 'bottomleft',
maxWidth: 200,
metric: true,
imperial: true
}).addTo(map);
// Custom Legend control
var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend');
div.style.background = 'rgba(255,255,255,0.9)';
div.style.padding = '10px';
div.style.borderRadius = '4px';
div.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
div.innerHTML = `
<b>City Categories</b><br>
<i style="background:#e41a1c; width:12px; height:12px; display:inline-block;"></i> Asia<br>
<i style="background:#377eb8; width:12px; height:12px; display:inline-block;"></i> Americas<br>
<i style="background:#4daf4a; width:12px; height:12px; display:inline-block;"></i> Africa<br>
<small>Circle size ≈ population</small>
`;
return div;
};
legend.addTo(map);
// Layer control (for toggling basemap or overlays if extended)
L.control.layers(null, {
"Major Cities": cityLayer
}, {position: 'topright'}).addTo(map);
</script>
</body>
</html>From the results, we can see that each AI tool has a unique solution. Since no specific location was requested, Grok and DeepSeek made use of the world map for their generated webmap while Gemini and ChatGPT localized their maps to some specific locations. Gemini map defaulted to "Portland City in Oregon, US" and ChatGPT defaulted to "Abuja city in Nigeria" probably from my internet IP address.
All the four AI tools added the essential cartographic elements including Title, North Arrow (Orientation), Scale, Legend, Layer Control, Data Source/Author, Date, and Locator Map (Inset). Although no one included the 'Locator Map (Inset)'.
ChatGPT added a 'mousemove' function that others didn't add, also DeepSeek addded a map 'Grid (Graticule)' that wasn't added by other AI tools.
In conclusion, all the four AI platforms created a fully functional web map ready for customization.
Happy web mapping!
No comments:
Post a Comment