Leaflet Map Not Rendering - Javascript
Question
I am attempting to learn Leaflet in Javascript (I traditionally use R). My goal is to create a simple map that I can experiment with. However, I can't get a map to render. My code is below:
// initialize the map var map = L.map('map').setView([42.35, -71.08], 13); // load a tile layer L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', maxZoom: 17, minZoom: 9 }).addTo(map);
html { height: 100%; } body { margin: 0; height: 100%; } #map { height: 600px; width: 800px; display: block; margin: auto; position: relative; top: 50%; transform: translateY(-50%); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="javascript/index.js" type="text/javascript"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"> <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <meta charset="utf-8"> <title>Hello...</title> </head> <body> <div id="map"></div> </body>
I am apple to get it to run in Stack's editor but not when I create traditional files.
Any help would be appreciated.
2 answers
solution1
2 2016-11-04 19:58:03
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="javascript/index.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
Check the order of your includes: your map instantiation code relies on Leaflet, but is included after Leaflet.
solution2
1 2016-11-05 08:13:50
This snippet works for me - but I had to disable Privacy Badger because it was blocking unpkg.com .
I also removed the <link> and <script> items referring to non-HTTP served resources.
The actual Javascript is the same as in your question.
HTH
// initialize the map var map = L.map('map').setView([42.35, -71.08], 13); // load a tile layer L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', maxZoom: 17, minZoom: 9 }).addTo(map);
html { height: 100%; } body { margin: 0; height: 100%; } #map { height: 600px; width: 800px; display: block; margin: auto; position: relative; top: 50%; transform: translateY(-50%); }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css"> <meta charset="utf-8"> <title>Hello...</title> </head> <body> <div id="map"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.