CODEWITHSUNDEEP
javascriptleaflet
pol_guy
pol_guy

Reputation: 477

Leaflet Map Not Rendering - Javascript

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.

Upvotes: 0

Views: 2207

Answers (2)

Robin Mackenzie
Robin Mackenzie

Reputation: 19319

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>

Upvotes: 1

tmcw
tmcw

Reputation: 11882

<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.

Upvotes: 2

Related Questions