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>
