-
Posts
-
Hi,
I created a map using Mapbox Studio and would like to add it to my website. I tried to add the code to a text block but it didn’t work. Could you please explain how I can do it?
Many thanks,
CatherineHey CatherineCBrand,
First of all, what is Mapbox Studio? I’m guessing a plugin? Send us an admin login in private and we’ll have a look at it.
Regards,
RikardHi Rikard,
Thanks for your reply ! Sorry, my first message wasn’t detailed enough.
I’m using Mapbox.js, a JavaScript API for rendering maps and creating custom interactions (https://www.mapbox.com/help/extending-interactivity/). I have an html page which I try to add to a WordPress text block (below). I used wp_enqueue_script() to enqueue mapbox.js and mapbox.css. This works. I then added what’s in the body in a text block. The map appears in the page if the text block stands on its own but doesn’t seem to follow the layout flow. If I place the text block in a 1/1 advanced layout element, it doesn’t appear anymore.
Many thanks for your help,
Catherine<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src=’https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js’></script>
<link href=’https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.css’ rel=’stylesheet’ />
</head>
<body>
<div id=’map-one’ class=’map’> </div>
<script type=”text/javascript”>
L.mapbox.accessToken = ‘pk.eyJ1IjoiY2JyYW5kIiwiYSI6Ii14TXVVeU0ifQ.hXwnuoQWcIf51UtYI3gDiw’;var map = L.mapbox.map(‘map-one’, ‘cbrand.15206d8d’, {
scrollWheelZoom: false
}).setView([46.2333,6.1333], 11);var myLayer = L.mapbox.featureLayer().addTo(map);
var geojson = [
{
“type”: “Feature”,
“geometry”: {
“type”: “Point”,
“coordinates”: [6.4776350,46.3735650]
},
“properties”: {
“title”: “Thonon”,
“icon”: {
“iconUrl”: “http: (Email address hidden if logged out) “,
“iconSize”: [36, 36], // size of the icon
“iconAnchor”: [18, 18], // point of the icon which will correspond to marker’s location
“shadowSize”: [100, 100],
“popupAnchor”: [0, -25], // point from which the popup should open relative to the iconAnchor
“className”: “dot”
}
}
}
];myLayer.on(‘layeradd’, function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});myLayer.setGeoJSON(geojson);
</script>
</body>
</html>Hi Rikard,
In addition to my former message, I noticed that when I use the Advance Layout Builder 1/1 element, [ and ] symbols are replaced by [ and ]
Cheers,
CatherineHi @CatherineCBrand,
It would be great if you could share your solution here on the forum to help others out.
Best regards,
Rikard
- You must be logged in to reply to this topic.