Jump to content

Mapbox and Squarespace: How to Embed Javascript for Interactive Maps

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://forthegood.org/mapbox-test

Hello:

We are a nonprofit organization that has recently begun learning Mapbox in order to create a clickable map that shows the locations of our programs and new schools in rural Kenya. We have  created a basic map and successfully embedded it into a Code block in Squarespace with iFrames using the code Mapbox provided- you can view that page here.

We now hope to add interactivity to the map so that when you click on the location of a school, you see a pop up that shares the name of the school and a description and link to another extended page of information. Mapbox provides an excellent tutorial on this: https://docs.mapbox.com/help/tutorials/add-points-pt-3/. 

We are now working to understand how to

1: Place our own Kenyan Schools Map Style into the code to replace the Chicago map example &

2: Embed this code into the map page on our Squarespace site. The process we used for our original map without Pop-ups - i.e.-embedding via the iFrames- will not support the Javascript, so it is necessary to embed the complete code. When we insert the code provided by Mapbox's "Chicago Parks" example into a Code block on our test page, we don't see anything. We are able to successfully embed it into the Page Header Code Injection under the "Settings" > "Advanced" > "Page Header Code Injection", but then we see it in the Header and Footer section (see attached screenshot) instead of in a Code block in the body section where we want it.
The code that we used, provided by Mapbox for this example, is below my signature.

We'd be so grateful to anyone who has experience with successfully embedding an interactive map from Mapbox into a specific page on their Squarespace site and would be willing to share the exact steps here. We are photojournalists and designers, well familiar with Squarespace but only slightly familiar with HTML and Javascript- though always eager to learn.


Thanks so very much!

Kind regards
Kate

 

MAPBOX CODE- CHICAGO MAPS POP UP POINTS EXAMPLE:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Demo: Add points to a web map</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>

<link

href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"

rel="stylesheet"

/>

<style>

body {

margin: 0;

padding: 0;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

</style>

</head>

<body>

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

<script>

mapboxgl.accessToken = 'pk.eyJ1Ijoia2F0ZWJsYWNrIiwiYSI6ImNrcjVyenZwazFiY3kyd3BkM2IxdmlubzYifQ.ocj6I03cHMQdA_rLB9GRqw';

const map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/examples/cjgiiz9ck002j2ss5zur1vjji',

center: [-87.661557, 41.893748],

zoom: 10.7

});

map.on('click', (event) => {

const features = map.queryRenderedFeatures(event.point, {

layers: ['chicago-parks']

});

if (!features.length) {

return;

}

const feature = features[0];

const popup = new mapboxgl.Popup({ offset: [0, -15] })

.setLngLat(feature.geometry.coordinates)

.setHTML(

`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>`

)

.addTo(map);

});

</script>

</body>

</html>

 
   

 

 

Screen Shot 2022-04-04 at 2.56.14 PM.png

Screen Shot 2022-04-04 at 3.40.36 PM.png

Link to comment
  • Solution

Hi Kate

This is quite involved. Personally, I'd recommend the (paid) Advanced Map Block which is an alternative to the Mapbox service but is Squarespace-specific and much easier to implement. You can add blog posts for each location and then they'll automatically appear on the map and link back to the details.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
14 minutes ago, Kate_Black-2021 said:

Thanks, Paul. 

You’re very welcome. Let me know if you need any help. Michael who wrote the Advanced Map Block lives in Ukraine 🇺🇦 so may not be able to provide his normally excellent level of support at the moment. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi Kate,

Also facing an issue with Mapbox's interactive map and Squarespace. The code block seems to have worked, but the content box on the Squarespace page isn't expanding to accommodate the full map: https://www.shacksonracks.com/test

The go-to response to Mapbox-related questions seems to always be to use the Advanced Map Tool instead. This is frustrating and unhelpful after having put so much time into something that can work... just seems to be a choice by Squarespace to not make the compatibility easy.

Good luck; I'll update you here if I find anything that works.

Ryan

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.