it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed #206

Muhammad-saafan · 2019-01-14T21:34:47Z

layers: [
new TileLayerOptions(
urlTemplate:
// "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
// subdomains: ['a', 'b', 'c']),
"https://api.mapbox.com/styles/v1/muhammad94/cjqwfwdpr1o452sqzoy3b74ua.html?fresh=true&title=true&access_token=pk.eyJ1IjoibXVoYW1tYWQ5NCIsImEiOiJjanF3N3o2ZzUwb2R1NDJudzJnY3VkMXcxIn0.jo3ONUsCTUYRv7YAZrehlQ#9.0/37.780000/-122.424100/0",
additionalOptions: {
'accessToken':
'<pk.eyJ1IjoibXVoYW1tYWQ5NCIsImEiOiJjanF3N3o2ZzUwb2R1NDJudzJnY3VkMXcxIn0.jo3ONUsCTUYRv7YAZrehlQ>',
'id': 'mapbox.mapbox-streets-v8',
},
this is my code when using leaflet it works and when using mapbox it give me blank page

Muhammad-saafan · 2019-01-14T21:44:01Z

this is the console
Launching lib\main.dart on SM N910C in debug mode...

ibrierley · 2019-01-14T21:58:29Z

Bit confused, haven't you just commented out the URL for the tiles & subdomain and included an interactive webpage that wouldn't work (I can't tell properly from where I am), but you would need to include a tile serving URL ?
What happens if you use the original URL and subdomain ?

cetorres · 2019-01-16T17:19:37Z

@Muhammad-saafan you have to use the correct URL on the urlTemplate like this:

layers: [
new TileLayerOptions(
urlTemplate: "https://api.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
    'accessToken': '<your-key>',
    'id': 'mapbox.streets'
})]

stafyniaksacha · 2019-01-18T11:46:32Z

layers: [
  new TileLayerOptions(
    urlTemplate: "https://api.mapbox.com/styles/v1/{id}/tiles/512/{z}/{x}/{y}@2x?access_token={accessToken}",
    additionalOptions: {
      'accessToken': 'pk.eyJ1IjoibXVoYW1tYWQ5NCIsImEiOiJjanF3N3o2ZzUwb2R1NDJudzJnY3VkMXcxIn0.jo3ONUsCTUYRv7YAZrehlQ',
      'id': 'mapbox.mapbox-streets-v8',
    },
  ),

this will work well, i took time to find good uri which work with leaflet too
notice that i removed < & > from your token, it will work now

johnpryan · 2019-02-03T01:19:52Z

@stafyniaksacha thanks for helping out. @Muhammad-saafan did this fix your issue? It sounds like we need to add a better explanation for additionalOptions?

thanooshan · 2019-03-12T01:15:55Z

Same issue, any solutions?

johnpryan · 2019-03-12T19:51:13Z

@thanooshan is your url template correct?

thanooshan · 2019-03-15T04:57:57Z

layers: [ new TileLayerOptions( urlTemplate: "https://api.mapbox.com/styles/v1/thanooshan/{somekey}/wmts?access_token="{accessToken}", additionalOptions: { 'accessToken': '{accessToken}', 'id': 'mapbox.mapbox-streets-v8', }, ) ]

@johnpryan This is my layers code. Am I missing something?

thanooshan · 2019-03-24T04:53:31Z

@johnpryan @stafyniaksacha Map is working.

We have to use CARTO url. Previously I used WMTS url.

ollyde · 2019-05-05T15:02:45Z

For anyone else stuck I found a url that works

Here an example:

Replace my username acidhue and the key after it with your own.

https://api.mapbox.com/styles/v1/acidhue/cjvb13pgd12t01flpd97ub8dx/tiles/256/{z}/{x}/{y}@2x?access_token=$mapboxKey

johnpryan · 2019-05-17T19:02:31Z

thanks @OllyDixon!

cosmotek · 2019-09-30T02:00:26Z

Fixed by getting a url from Mapbox studio > Share button > Third party tab > CARTO option in dropdown with the following code:

          Container(
            width: 500,
            height: 500,
            child: FlutterMap(
              options: MapOptions(
                center: LatLng(51.5, -0.09),
                zoom: 13.0,
              ),
              layers: [
                TileLayerOptions(
                  urlTemplate: "https://api.mapbox.com/styles/v1/<username>/ck15ozlow33tj1cph5cpt2y79/tiles/256/{z}/{x}/{y}@2x?access_token=<token>",
                ),
                MarkerLayerOptions(
                  markers: [
                    Marker(
                      width: 80.0,
                      height: 80.0,
                      point: LatLng(51.5, -0.09),
                      builder: (ctx) =>
                      Container(
                        child: FlutterLogo(),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

There are a few parts here that I would really love to see reflected in the docs for this plugin. First off, I had to figure out to use a container to size things, secondly, the URL and how to get it...

Mehrbod2002 · 2020-08-09T01:44:51Z

hello i have same issue and try lot with codes which users here recommended . also with Mapbox studio i use this code but still receive null gray page

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text('Leaflet Maps')),
        body: new FlutterMap(
            options: new MapOptions(
                center: new LatLng(35.22, -101.83), minZoom: 5.0),
            layers: [
              new TileLayerOptions(
                  urlTemplate:
                      "https://api.mapbox.com/styles/v1/rajayogan/cjl1bndoi2na42sp2pfh2483p/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA",
                  additionalOptions: {
                    'accessToken':
                        'pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA',
                    'id': 'mapbox.mapbox-streets-v7'
                  }),
              new MarkerLayerOptions(markers: [
                new Marker(
                    width: 45.0,
                    height: 45.0,
                    point: new LatLng(35.215, -101.825),
                    builder: (context) => new Container(
                          child: IconButton(
                            icon: Icon(Icons.location_on),
                            color: Colors.blue,
                            iconSize: 45.0,
                            onPressed: () {
                              print('Marker tapped');
                            },
                          ),
                        ))
              ])
            ]));
  }
}```

ibrierley · 2020-08-09T06:35:02Z

Not sure if that's the correct token, but it says invalid token...

Muhammad-saafan changed the title ~~it gives me blank... no map is showing i tried a lot of tutorials so tired and depressed~~ it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed Jan 14, 2019

johnpryan closed this as completed May 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed #206

it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed #206

Muhammad-saafan commented Jan 14, 2019 •

edited

Loading

Muhammad-saafan commented Jan 14, 2019

ibrierley commented Jan 14, 2019 •

edited

Loading

cetorres commented Jan 16, 2019 •

edited

Loading

stafyniaksacha commented Jan 18, 2019

johnpryan commented Feb 3, 2019

thanooshan commented Mar 12, 2019

johnpryan commented Mar 12, 2019

thanooshan commented Mar 15, 2019 •

edited

Loading

thanooshan commented Mar 24, 2019

ollyde commented May 5, 2019 •

edited

Loading

johnpryan commented May 17, 2019

cosmotek commented Sep 30, 2019

Mehrbod2002 commented Aug 9, 2020

ibrierley commented Aug 9, 2020

it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed #206

it gives me blank... no map is showing.... i tried a lot of tutorials ...so tired and depressed #206

Comments

Muhammad-saafan commented Jan 14, 2019 • edited Loading

Muhammad-saafan commented Jan 14, 2019

ibrierley commented Jan 14, 2019 • edited Loading

cetorres commented Jan 16, 2019 • edited Loading

stafyniaksacha commented Jan 18, 2019

johnpryan commented Feb 3, 2019

thanooshan commented Mar 12, 2019

johnpryan commented Mar 12, 2019

thanooshan commented Mar 15, 2019 • edited Loading

thanooshan commented Mar 24, 2019

ollyde commented May 5, 2019 • edited Loading

johnpryan commented May 17, 2019

cosmotek commented Sep 30, 2019

Mehrbod2002 commented Aug 9, 2020

ibrierley commented Aug 9, 2020

Muhammad-saafan commented Jan 14, 2019 •

edited

Loading

ibrierley commented Jan 14, 2019 •

edited

Loading

cetorres commented Jan 16, 2019 •

edited

Loading

thanooshan commented Mar 15, 2019 •

edited

Loading

ollyde commented May 5, 2019 •

edited

Loading