-
Posts
-
Hi,
I would like to customize the contact page using an alternative map from map box, so as not to deal with google API keys and customize the style of the map.
I add this HTML code. but it seems not working. (the map coordinates are the default, not related to my location)
Any suggestions?. Please advise.
Thank you in advance
Regards<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′ />
<title>Display a map with a custom style</title>
<meta name=’viewport’ content=’initial-scale=1,maximum-scale=1,user-scalable=no’ />
<script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js’></script>
<link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.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.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g’;
var map = new mapboxgl.Map({
container: ‘map’, // container id
style: ‘mapbox://styles/mapbox/dark-v10’, //hosted style id
center: [-77.38, 39], // starting position
zoom: 3 // starting zoom
});
</script></body>
</html>Hey danilogdl,
Try to put this inside a Codeblock:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/dark-v10', //hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); </script>Best regards,
NikkoHi Nikko,
Thank you for your reply.
The map comes out a bit squashed, visible only on the preview, but not on the website when uploading the entire page.
Please advise
thank you
Regards
DaniloHi Danilo,
The map just needs to have a height set in css.
I have tested that code on my local server and it seems to be working fine, though it took several seconds to load.Best regards,
NikkoHi Nikko,
Thank you for your help, I now step by step start to appreciate Enfold beautiful theme!
I hope the future updates will include the code to insert other types of maps (not only the omnipresent Google)
I have a few other questions
1) How to stop a video to loop all the time?
2) In the portfolio page ( see enfold photography portfolio) how to add a short sentence on the side of the word All (center page upper part)
Again,
Thanks for your help
DaniloHi Danilo,
We apologize for the delayed response.
If another alternative gets popular, I think it will surely be considered to be added in Enfold. :)1. There’s no such feature at the moment in Video element, but in the next release of Enfold it will be added. For now you can follow the solution on this thread: https://kriesi.at/support/topic/stop-mp4-from-looping/#post-1022661
2. Try to use this filter: avf_masonry_sort_first_label
Best regards,
NikkoHi Nikko,
I am faced with the same issue (inserting mapbox into a code box) and was wondering what was the CSS code to determine the height of the box.
Thanks for your help.
Regards,
EmileHi Nikko and Emile,
Miki, another WordPress Enfold moderater, suggested the following code, which works quite well. The only issue is I cannot find the way to add an icon on the map indicating the contact location of the website I am designing. Could anyone help? – at the bottom I ‘ve copied the code recommended by Mapbox.
Please note I am in NO relationship with mapbox and this is not advertising – I quite like mapbox because you can customize maps according to your website color palette ( + a lot of other functions).
Thank you
Regards
DaniloBELOW IS THE CODE TO EMBEDD MAPBOX MAP (LATITUDE AND LONGITUDE TO BE CUSTOMIZED)
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> <style> #map { position:absolute; top:0; bottom:0; width:100%; height: 100vh;} .avia_codeblock_section {height: 100vh;} </style> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/dark-v10', //hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); </script>BELOW THE html CODE SUGGESTED BY MAPBOX TO AD AN ICON (according to mapbox support this part of the code, should be added below the previous code )… I got a bit lost in the process…
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′ />
<title>Add an animated icon to the map</title>
<meta name=’viewport’ content=’initial-scale=1,maximum-scale=1,user-scalable=no’ />
<script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js’></script>
<link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/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.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g’;var map = new mapboxgl.Map({
container: ‘map’,
style: ‘mapbox://styles/mapbox/streets-v9’
});var size = 200;
var pulsingDot = {
width: size,
height: size,
data: new Uint8Array(size * size * 4),onAdd: function() {
var canvas = document.createElement(‘canvas’);
canvas.width = this.width;
canvas.height = this.height;
this.context = canvas.getContext(‘2d’);
},render: function() {
var duration = 1000;
var t = (performance.now() % duration) / duration;var radius = size / 2 * 0.3;
var outerRadius = size / 2 * 0.7 * t + radius;
var context = this.context;// draw outer circle
context.clearRect(0, 0, this.width, this.height);
context.beginPath();
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2);
context.fillStyle = ‘rgba(255, 200, 200,’ + (1 – t) + ‘)’;
context.fill();// draw inner circle
context.beginPath();
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
context.fillStyle = ‘rgba(255, 100, 100, 1)’;
context.strokeStyle = ‘white’;
context.lineWidth = 2 + 4 * (1 – t);
context.fill();
context.stroke();// update this image’s data with data from the canvas
this.data = context.getImageData(0, 0, this.width, this.height).data;// keep the map repainting
map.triggerRepaint();// return
trueto let the map know that the image was updated
return true;
}
};map.on(‘load’, function () {
map.addImage(‘pulsing-dot’, pulsingDot, { pixelRatio: 2 });
map.addLayer({
“id”: “points”,
“type”: “symbol”,
“source”: {
“type”: “geojson”,
“data”: {
“type”: “FeatureCollection”,
“features”: [{
“type”: “Feature”,
“geometry”: {
“type”: “Point”,
“coordinates”: [0, 0]
}
}]
}
},
“layout”: {
“icon-image”: “pulsing-dot”
}
});
});</script>
</body>
</html>Hi,
I took a look at your mapbox code, but unfortunately, there were too many errors in the javascript, and after trying to repair them the pulsing didn’t work. The first mapbox code works correctly in a code block element so if you get the correct code from mapbox
and replace everything aftermapboxgl.accessTokenit should work, if not perhaps mapbox can assist with debugging their code.Best regards,
MikeHi Mike,
Thank you for your suggestions, I have already replaced the correct token, zoom longitude, and latitude to suit my location and it works properly.
Also, I have already contacted mapbox support team to add the icon and waiting for their suggestions.
Once I will get a suitable answer that works, I will be very happy to share the code in this forum.
Thanks for your time and your help.
Best regards
DaniloHi,
Sharing the code would be very nice to help others test a working example and compare broken code with.
We will leave this open until we hear back from you.Best regards,
MikeHi Mike,
Finally, I got around the code for Mapbox, including the dot…..
Dots color, position, map style and so on can be customized (which is the best part)
the general code for this map in HTML is the following… I changed a few bits, and it seems to work properly.
Of course, you need to register to Mapbox and get a token.
As mentioned before, below is the code to share… the map below focus on Washington DC…<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′ />
<title>Add a dot to the map</title>
<meta name=’viewport’ content=’initial-scale=1,maximum-scale=1,user-scalable=no’ />
<script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js’></script>
<link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css’ rel=’stylesheet’ />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height: 100vh;}
.avia_codeblock_section {height: 100vh;}
</style>
</head>
<body><div id=’map’></div>
<script>
mapboxgl.accessToken = ‘pk.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g’;
var map = new mapboxgl.Map({
container: ‘map’, // container id
style: ‘mapbox://styles/mapbox/dark-v10’, //hosted style id
center: [-77.38, 39], // starting position
zoom: 3 // starting zoom
});map.on(‘load’, function() {
// Add a single point to the map
map.addSource(‘point’, {
“type”: “geojson”,
“data”: {
“type”: “FeatureCollection”,
“features”: [{
“type”: “Feature”,
“geometry”: {
“type”: “Point”,
“coordinates”: [-77.38, 39]
}
}]
}
});map.addLayer({
“id”: “point”,
“type”: “circle”,
“source”: “point”,
“paint”: {
“circle-radius”: 10,
“circle-color”: “#ffa500”
}
});
});</script>
</body>
</html>Hi,
Thank you, I’m sure this will help out many people, I can confirm that this works.
Here is what I added to a code block element:<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> <style> #map { position:absolute; top:0; bottom:0; width:100%; height: 100vh;} .avia_codeblock_section {height: 100vh;} </style> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZ2RsbndzIiwiYSI6ImNrMW11Ym9jMjAzMjQzZ25xam1oMmhwcnoifQ.JSIPcNr0kAA5KYkzqoZW_g'; var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/dark-v10', //hosted style id center: [-77.38, 39], // starting position zoom: 3 // starting zoom }); map.on('load', function() { // Add a single point to the map map.addSource('point', { "type": "geojson", "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-77.38, 39] } }] } }); map.addLayer({ "id": "point", "type": "circle", "source": "point", "paint": { "circle-radius": 10, "circle-color": "#ffa500" } }); }); </script>and the result:
Shall we close this then?Best regards,
MikeHi Mike,
I believe so…
Thanks to you, Victoria and Nikko for your help
Have a nice day.
Regards
DaniloHi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike
- The topic ‘ADD MAPBOX INSTEAD OF GOOGLE MAP – MUCH NICER STYLE’ is closed to new replies.