Getting leaflet to run on squarespace?

Janusz wieczorek

unread,

Mar 24, 2017, 10:36:23 AM3/24/17

to Leaflet

Anyone try using leaflet to create maps on the square space platform? Just basic code does not seem to populate any sort of map. Wondering if I am doing something wrong or if its a result of something they got going on. Seems to be nothing on the interwebs about this yet.

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map{ width: 900px; height: 500px; }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // 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);

  </script>
</body>
</html>

gis....@gmail.com

unread,

Mar 27, 2017, 10:40:49 AM3/27/17

to Leaflet

Where are you injecting your code. I have had some issues with squarespace not loading the custom header, so leaflet js isnt loading. It seems to work ok after I removed it and added it again, but sometimes if I navigate away from the page then use the back arrow, leaflet does not get loaded. But yes, if you go to https://www.lancastermontessori.org/ the map at the bottom is a leaflet map.

Good luck

Janusz wieczorek

unread,

Apr 27, 2017, 12:40:11 PM4/27/17

to Leaflet

Sorry for the late reply, but do you think you could show me the text/screenshot of your header injection code and the code block for the leaflet map. I hope its not too much trouble, but I am about to give up on this and I dont know what else to do.

gis....@gmail.com

unread,

Apr 28, 2017, 9:54:30 AM4/28/17

to Leaflet

Let me know if you figured this out.

Message has been deleted

Janusz wieczorek

unread,

Apr 28, 2017, 10:06:40 AM4/28/17

to leafl...@googlegroups.com

Nah, I still haven't gotten it to show a basic map.

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/0UUbJTy5L8E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Janusz wieczorek

unread,

Apr 28, 2017, 10:32:13 AM4/28/17

to leafl...@googlegroups.com

Nah, I still haven't gotten it to show a map.

On Apr 28, 2017 8:54 AM, <gis....@gmail.com> wrote:

--

b...@foundryspatial.com

unread,

Apr 29, 2017, 1:40:24 AM4/29/17

to Leaflet

Stumbled across this thread today trying to do the same think. Got it to work by injecting the following in page header:

<link rel="stylesheet" href="https://unpkg.com/lea...@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/lea...@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

and then putting the following in a code block in the page:

<div id="mapid" style="width: 100%; height: 400px;"></div>
<script>

	var mymap = L.map('mapid').setView([55.060, 0.692], 5);

	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <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://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

</script>

the above is the code from the leaflet startup guide (minus the popups, etc) from http://leafletjs.com/examples/quick-start/example.html

To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.

Harley Schinagl

unread,

Dec 19, 2017, 6:14:32 PM12/19/17

to Leaflet

I have code I created using QGIS's web map plugin. When I put it in a code block, nothing works. Do I need to put something into the page header too? If so, how do I customise your code below for my map?

Message has been deleted

b...@foundryspatial.com

unread,

Dec 20, 2017, 6:12:04 AM12/20/17

to Leaflet

You'd need to host all the js files somewhere and then inject the links in your page header like I did above. And then past your actual map code into the main block. You might find it easier to start with a simple example to integrate a map into squarespace, and also get your qgis output running somewhere else (even on localhost) until you are a bit more familiar with how it works.

Reply all

Reply to author

Forward