Created
February 28, 2014 17:55
-
-
Save jscarto/9276103 to your computer and use it in GitHub Desktop.
Example HTML for Simple Leaflet Map (including JQuery)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>My First Leaflet Map</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> | |
<![endif]--> | |
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
</head> | |
<body> | |
<!-- define a the area the map will go into. Feel free to change the size as needed --> | |
<div id="map" style="width:800px; height: 500px;"></div> | |
<script> | |
var coords = [37.69, -59.23]; // the geographic center of our map | |
var zoomLevel = 3; // the map scale. See: http://wiki.openstreetmap.org/wiki/Zoom_levels | |
var map = L.map('map').setView(coords, zoomLevel); | |
// we need to provide the map with some base map tiles. There are few free options. | |
// we'll use Stamen Acetate, a muted base map good for overlaying data. | |
var tiles = 'http://acetate.geoiq.com/tiles/acetate-hillshading/'; | |
// if you'd like to explore other base maps, see: http://developer.mapquest.com/web/products/open/map | |
// if you use different tiles, be sure to update the attribution :) | |
L.tileLayer(tiles+'{z}/{x}/{y}.png', { | |
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://FortiusOne.com">FortiusOne</a> and <a href="http://stamen.com">Stamen</a>', | |
maxZoom: 18 | |
}).addTo(map); | |
</script> | |
</body> | |
</html> |
not working map is blank
you both are missing something or may be any syntax error in the code due to which it is not working
The html file itself might outdated, it shows blank.
I followed Leaflet and now it works:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<style>
#map {
height: 180px;
}
</style>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"
></script>
</head>
<body>
<!-- define a the area the map will go into. Feel free to change the size as needed -->
<div id="map" style="width: 800px; height: 500px"></div>
<script>
var map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
</script>
</body>
</html>
![map](https://private-user-images.githubusercontent.com/1904812/326931198-a7253d32-120d-47fb-87af-d536a2a8e876.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE5MjQ3NDAsIm5iZiI6MTcyMTkyNDQ0MCwicGF0aCI6Ii8xOTA0ODEyLzMyNjkzMTE5OC1hNzI1M2QzMi0xMjBkLTQ3ZmItODdhZi1kNTM2YTJhOGU4NzYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjVUMTYyMDQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MzgzZWQ3YTM3OGJlNWJiMmRmMzczYjU5MGQ3ZjljZjRjMzQ1OTIzZmZiOTEzNjU4ZDRkM2U3ZmNkMDQzN2I2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.RoATk1NysqManjz1pITb53JrFSgk8vAK23jBbFe3hls)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I try your exemple, but the map is in blank