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/[email protected]/dist/leaflet.css">
  <script src="https://unpkg.com/[email protected]/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.

tmcw · Accepted Answer · 2016-11-04 19:58:03Z

2

<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/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Check the order of your includes: your map instantiation code relies on Leaflet, but is included after Leaflet.

answered Nov 4, 2016 at 19:58

tmcw

12k3 gold badges38 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pol_guy Over a year ago

I appreciate that. However, nothing is working. I've tested to see if the source to the javascript file is working in addition to the css connection and everything is fine. I'll have to keep experimenting.

Robin Mackenzie · Accepted Answer · 2016-11-05 08:13:50Z

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/[email protected]/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/[email protected]/dist/leaflet.js"></script>

</body>

Collectives™ on Stack Overflow

Leaflet Map Not Rendering - Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related