Hi, i’m trying to add a mapbox , but no matter what i do, i get only a black box
I followed the instructions from the site, and added, to my static head.html:
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
And then, the code to the page i want:
<div id='map' style='width: 400px; height: 300px;'></div><script>mapboxgl.accessToken = 'pk.eyJ1IjoiaHJxbW9udGVpcm8iLCJhIjoiY2tjNWo4amQwMDNhdjJ3bjBmdjgwbnRrYyJ9.a_7fXLx-EHrFpMTxtNZTrA';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11'});</script>
But it simply gives me this black box. Any help?
maiki
July 3, 2020, 4:58am
2
Please follow the guidelines for posting to #support and share your project code.
Hello, what do you mean? What didn’t i followed?
And i posted the code…
maiki
July 3, 2020, 6:43pm
4
We don’t know how you are using the code snippets you shared. You show your entire project and then folks can assist.
As it is no one can reproduce your issue.
ju52
July 3, 2020, 7:52pm
5
I’ve got a theme that displays maps using mapbox, leaflet, and google maps.
You might get some ideas looking at this code:
{{ with .Site.Params.Map }}
<div id="map" class="box"></div>
{{ if eq .service "osm" }}
{{ $js := $.Site.Data.libs.js }}
{{ $css := $.Site.Data.libs.css }}
{{ "<!-- OpenStreetMap -->" | safeHTML }}
{{ printf "<link rel=\"stylesheet\" href=\"//unpkg.com/leaflet@%s/dist/leaflet.css\" integrity=\"%s\" crossorigin=\"anonymous\"/>" $css.leaflet.version $css.leaflet.integrity | safeHTML }}
{{ printf "<script src=\"//unpkg.com/leaflet@%s/dist/leaflet.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.leaflet.version $js.leaflet.integrity | safeHTML }}
<script>
var loc = [{{- float .latitude -}}, {{- float .longitude -}}];
var mymap = L.map("map").setView(loc, {{- int .zoom -}});
L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: {{- int .zoom -}}
}
).addTo(mymap);
var marker = L.marker(loc).addTo(mymap);
show original
1 Like
Yep !umap an OSD service. Simple and powerfull.
EDIT : This is what I use (you can remove the lazyload part if you do not use a lazyload tool for performance).
Just create a map on umap, and use this name with mapName = "my_map_name_on_umap".
you manage all layers and marker and all on the umap side.
[params.global.map]
enable = true
full = true
[params.global.map.osm]
## pour Open Street Map
map = true
title = "Open Street Map"
# fabrication de l'url
mapName = "my_map_name_on_umap"
scaleControl = "true"
miniMap = "false"
scrollWheelZoom = "true"
zoomControl = "true"
allowEdit = "false"
moreControl = "true"
searchControl = "true"
tilelayersControl = "null"
embedControl = "false"
datalayersControl = "null"
onLoadPanel = "none"
captionBar = "false"
fullscreenControl = "null"
scale = "13"
coordX = "46.0410"
coordY = "7.4938"
{{ with site.Params.global.map }}
<!-- Usage de Open Street Map -->
{{ with .osm }}
{{ if .map }}
{{ with .title }}<h4>{{ . }}</h4>{{ end }}
<div class="map-responsive{{ if site.Params.global.map.full }}-full{{ end }}">
{{ $url := partial "osm_conf.html" . }}
<iframe
{{ if site.Params.global.lazyload.enable }}
data-src="{{ $url }}"
{{ else }}
src="{{ $url }}"
{{ end }}
width="600" height="450"
frameborder="0" style="border:0"
aria-hidden="false" tabindex="0"
{{ if site.Params.global.lazyload.enable }}class="{{ site.Params.global.lazyload.label }}"{{ end }}
webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
{{ end}}
{{ end }}
{{ end }}
partial osm_conf.html :
{{ $osm_url := "" }}
{{ $url := printf "https://umap.openstreetmap.fr/fr/map/%s?scaleControl=%s&miniMap=%s&scrollWheelZoom=%s&zoomControl=%s&allowEdit=%s&moreControl=%s&searchControl=%s&tilelayersControl=%s&embedControl=%s&datalayersControl=%s&onLoadPanel=%s&captionBar=%s&fullscreenControl=%s#%s/%s/%s" .mapName .scaleControl .miniMap .scrollWheelZoom .zoomControl .allowEdit .moreControl .searchControl .tilelayersControl .embedControl .datalayersControl .onLoadPanel .captionBar .fullscreenControl .scale .coordX .coordY }}
{{ $osm_url = $url | safeURL }}
{{ return $osm_url }}
/* iframe des maps */
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.map-responsive-full{
overflow:hidden;
padding-bottom:50%;
position:relative;
height:0;
}
.map-responsive-full iframe{
left:0;
top:0;
height:65%;
width:100%;
position:absolute;
}
1 Like
I’m using Navigator Theme and it comes with a Google maps that don’t work without an API. The script is located in /static/js, and the map on the contact partial.
I just removed it, and i was trying to replace it with the mapbox instructions , i literally just added the js and the css to my head.html (as i was told to do so)
So, the head.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
{{ with .Site.Params.author }} <meta name="author" content="{{ . }}">{{ end }}
{{ hugo.Generator }}
<title>{{ .Title }}</title>
{{ "<!-- Mobile Specific Meta -->" | safeHTML }}
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ "<!-- Favicon -->" | safeHTML }}
<link rel="shortcut icon" type="image/x-icon" href="{{ `images/favicon.ico` | absURL }}" />
{{"<!-- Stylesheets -->" | safeHTML}}
{{ "<!-- Themefisher Icon font -->" | safeHTML }}
<link rel="stylesheet" href="{{ `plugins/themefisher-font/style.css` | absURL }}">
{{ "<!-- bootstrap.min css -->" | safeHTML}}
<link rel="stylesheet" href="{{ `plugins/bootstrap/dist/css/bootstrap.min.css` | absURL }}">
{{ "<!-- Lightbox.min css -->" | safeHTML }}
<link rel="stylesheet" href="{{ `plugins/lightbox2/dist/css/lightbox.min.css` | absURL }}">
{{ "<!-- Slick Carousel -->" | safeHTML }}
<link rel="stylesheet" href="{{ `plugins/slick-carousel/slick/slick.css` | absURL }}">
<link rel="stylesheet" href="{{ `plugins/slick-carousel/slick/slick-theme.css` | absURL }}">
{{ "<!-- Main Stylesheet -->" | safeHTML }}
{{ $styles := resources.Get "css/style.css" | minify}}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
</head>
And then, tried to add the map to my contact.html partial:
{{ if .Site.Params.contact.enable }}
{{ "<!-- Start Contact Us -->" | safeHTML }}
<section class="contact-us section bg-gray" id="contato">
<div class="container">
<div class="row">
<div class="col">
<div class="title text-center">
{{ with .Site.Params.contact.topTitle }}<h4>{{.}}</h4>{{ end }}
{{ with .Site.Params.contact.title }}
<h2>{{.}}</h2>
<span class="border"></span>
{{ end }}
{{ with .Site.Params.contact.subtitle }}<p>{{.}}</p>{{ end }}
</div>
</div>
</div>
<div class="row">
{{ "<!-- Contact Details -->" | safeHTML }}
{{ "" | safeHTML }}
<div class="form-group">
<input type="email" placeholder="Seu e-mail" class="form-control" name="email" id="email">
</div>
<div class="form-group">
<input type="text" placeholder="Assunto" class="form-control" name="subject" id="subject">
</div>
<div class="form-group">
<textarea rows="6" placeholder="Digite aqui sua mensagem..." class="form-control" name="message" id="message"></textarea>
</div>
<div id="mail-success" class="success">
Obrigado. Sua mensagem foi enviada. Retornaremos o mais breve possível :)
</div>
<div id="mail-fail" class="error">
Desculpe, ocorreu um erro, tente novamente por favor :(
</div>
<div id="cf-submit">
<input type="submit" id="contact-submit" class="btn btn-transparent" value="Enviar">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4">
<div class="address-block contact-meta-block">
<i class="tf-ion-android-pin"></i>
<h4>Our Location</h4>
{{ with .Site.Params.contact.address }}<p>{{ . | safeHTML }}</p>{{ end }}
</div>
</div>
<div class="col-12 col-md-4">
<div class="phone-block contact-meta-block">
<i class="tf-ion-ios-telephone"></i>
<h4>Call Us</h4>
<p>
{{ with .Site.Params.contact.phone }}Office: {{.}} {{ end }}
<br> {{ with .Site.Params.contact.fax }} Fax: {{ . }} {{ end }}
</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="social-icons-block contact-meta-block">
<i class="tf-ion-ios-contact"></i>
<h4>We are social</h4>
<ul class="list-inline social-icon">
{{ with .Site.Params.contact.facebook }}
<li class="list-inline-item">
<a href="{{.}}">
<i class="tf-ion-social-facebook"></i>
</a>
</li>
{{ end }}
{{ with .Site.Params.contact.twitter }}
<li class="list-inline-item">
<a href="{{.}}">
<i class="tf-ion-social-twitter"></i>
</a>
</li>
{{ end }}
{{ with .Site.Params.contact.linkedin }}
<li class="list-inline-item">
<a href="{{.}}">
<i class="tf-ion-social-linkedin"></i>
</a>
</li>
{{ end }}
{{ with .Site.Params.contact.dribbble }}
<li class="list-inline-item">
<a href="{{.}}">
<i class="tf-ion-social-dribbble"></i>
</a>
</li>
{{ end }}
{{ with .Site.Params.contact.instagram }}
<li class="list-inline-item">
<a href="{{.}}">
<i class="tf-ion-social-instagram"></i>
</a>
</li>
{{ end }}
</ul>
</div>
</div>
</div>
</div>
{{ end }}
That was pretty much it. Then the result is just the black box i showed in the first image
Sorry i don’t have the project uploaded to a proper website yet, or the files on github and stuff like that, so i can provide like this for a while, if someone could help me pointing where am i doing wrong, i would really appreciate
The code you post makes no sense because I do not see any call to the map.
EDIT : it was your formating code. I can see the call.
And we already gave you 2 solutions.
I literally just followed the instructions of mapbox itself, on their website, in the link i posted.
And the two solutions are not with mapbox, so… maybe i’ll try to figure it out calling the map in other way.
Me too with your exact code! You have an other problem.
maiki
July 6, 2020, 2:55am
17
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
