Here are some styles:
- colors
- fonts
- settings
{ | |
"fontFace": [ | |
{ | |
"fontFamily": "Bitter", | |
"fontStyle": "normal", | |
"fontWeight": "400 700", | |
"src": [ | |
"file:./assets/fonts/Bitter/Bitter-VariableFont_wght.woff2" | |
] | |
}, |
<!-- wp:image {"align":"center","id":968,"sizeSlug":"full","linkDestination":"none"} --> | |
<figure class="wp-block-image aligncenter size-full"><img src="https://thoth.dk/wp-content/uploads/2023/03/image-4.png" alt="" class="wp-image-968"/><figcaption class="wp-element-caption">Orange Amps Unlimited</figcaption></figure> | |
<!-- /wp:image --> | |
<!-- wp:heading --> | |
<h2>Orange Amps Unlimited</h2> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph --> | |
<p>From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments </p> |
<!-- wp:image {"align":"center","id":968,"sizeSlug":"full","linkDestination":"none"} --> | |
<figure class="wp-block-image aligncenter size-full"><img src="https://thoth.dk/wp-content/uploads/2023/03/image-4.png" alt="" class="wp-image-968"/><figcaption class="wp-element-caption">Orange Amps Unlimited</figcaption></figure> | |
<!-- /wp:image --> | |
<!-- wp:heading --> | |
<h2>Orange Amps Unlimited</h2> | |
<!-- /wp:heading --> | |
<!-- wp:paragraph --> | |
<p>From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments From New Orleans playing woodoo rock on old style instruments </p> |
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} --> | |
<div class="wp-block-group"><!-- wp:html --> | |
<figure class="rellax" data-rellax-speed="7" class="wp-block-image size-full is-resized"><img src="https://thoth.dk/wp-content/uploads/2023/01/astronaut-wp.jpeg" alt="" class="wp-image-7" width="192" height="192"/></figure> | |
<!-- /wp:html --> | |
<!-- wp:html --> | |
<figure class="rellax wp-block-image size-full is-resized" data-rellax-speed="3"> <img src="https://thoth.dk/wp-content/uploads/2023/02/superwoman-coder.jpeg" alt="" class="wp-image-628" width="256" height="256"></figure> | |
<!-- /wp:html --></div> | |
<!-- /wp:group --> |
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet"> | |
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script> | |
<div> | |
<style> | |
#map { height: 500px; width: 100%; } | |
#marker { | |
background-image: url('https://thoth.dk/wp-content/uploads/2023/01/astronaut-wp-1-150x150.jpeg'); | |
background-size: cover; | |
width: 50px; | |
height: 50px; |
{ | |
"version": 2, | |
"customTemplates": [ | |
{ | |
"name": "blank", | |
"title": "Blank", | |
"postTypes": [ | |
"page", | |
"post" | |
] |
console.log("hej fra vikinger.js") | |
const token = "pk.eyJ1IjoiYXNhdGhvb3IiLCJhIjoiY2oyd3hlbzU3MDA5NzJxbm9iMjczanJndCJ9.HahDB7Z1rrD5THIYQh6t4g" | |
const mapStyle = "mapbox://styles/asathoor/cl0utivlp00jl14qi4gto0iyl" | |
const vikinger = "js/vikinger.geojson" | |
// Concerning the Map | |
mapboxgl.accessToken = token | |
const map = new mapboxgl.Map({ | |
container: 'map', // container ID |
// begynt fetch() her | |
fetch("DIN-GEOJSON-FIL-HER.JS").then( | |
response => { | |
return response.json(); // get JSON data$ | |
}).then(data => { | |
console.log(data); | |
// tjek objektet i browserens udviklingsværktøj | |
The sample in this codepen hides the obvious. If you want to use it, a variable in the function must be silenced, or rather commented out:
// var target = document.querySelector(".last");
If the line remains, the function will allways have .last as it's target ... (sic).
After this small revision you can use the function, like this: