Jump to content

Mapbox and Squarespace: How to Embed Javascript for Interactive Maps

By Kate_Black-2021, in Customize with code

Go to solution Solved by paul2009,

Recommended Posts

Kate_Black-2021 Level 4

Kate_Black-2021

Posted
Posted

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
  • Replies 6
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

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

Kate_Black-2021
Kate_Black-2021

Thanks, Paul.  We suspected we might be in over our heads and very much appreciate this insight and your directness. You were also incredibly helpful with another query I posted last year; saving

paul2009
paul2009

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.

Posted Images

  • Solution
paul2009 Level 18

paul2009

Posted
  • Solution
Posted

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
paul2009 Level 18

paul2009

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
shacksonracks22 Level 1

shacksonracks22

Posted
Posted

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
  • 9 months later...
LindaDarco Level 1

LindaDarco

Posted
Posted

Hello-- I spent a beautiful afternoon making a great map in Mapbox. And then I found this chain. Ha! I still like my map box map a lot more than the only semi-customizable one in Advanced Map Block. I did get Mapbox to work on my Squarespace site.

But I'm trying both. I know the Advanced Map Block option should be easier for others to edit here. 

Upon setting up Advanced Map Block, I'm finding that only one blog post location is pulling into the map. The posts have accurate locations. I'm not getting any warnings. I've cleared caches and tried different browsers. I can still only see the first blog post as a location. Does any one have a fix? I feel like I'm just missing a setting or something. 

Thank you.

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources