Forum Replies Created
-
Posts
-
Hi Mike,
I believe so…
Thanks to you, Victoria and Nikko for your help
Have a nice day.
Regards
DaniloHi 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 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 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 Mike,
Thank you for your useful information. Now the map is visible at the right size and my custom style
:-)
I still have a question pending… how to add a short text line on the right side of ALL in the portfolio page (top left side at the right of the logo)In the forum someone might have already asked this question in the past, I cannot see it.
Please let me know
Thank you
Regards
DaniloHi 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 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 Richard, hi Victoria, thanks for your help.
I have a few other questions below (for the second one I have also created a different topic
#1148241 so everybody can immediately see it on the title in case of interest).
Thank you in advance for your help again.
Regards
Danilo1) how to add a short text line on the right side of ALL in the portfolio page (top left side at the right of the logo)
2) would like to customize the contact page using an alternative map from mapbox, so 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.<!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>Hi Victoria,
Done!
Thank you a lot from your prompt answer, now everything works well
Thanks again
Regards
DaniloHi, again
it is a beautiful Theme indeed!…. but I have few questions.
I still haven’t got a reply from the moderator, please advise on the previous issue below
1) I like the photo in black and white to turn in color when mouse is over… I already tried the Quick Css instructions from previous forum post, but it doesn’t work.
Also,
2) I am working on the demo ENFOLD PHOTOGRAPHY PORTFOLIO. The main menu has a double line text ( i.e. HOME, where the heart is) . How to change the text in the second line? I cannot find the way. ( I need to translate the website in few languages). Do I need to add few lines in Css as suggested in a previous post on the forum
3) At the moment the site is on localhost. how to update the google map according to the address indicated in the contact form?
4) How to find a nice Chinese font to upload on the theme?
Please advise
Thank you
Regards
Ps at the moment the website is on localhost
