Is it possible add open weather map layers to leaflet using flutter.

[JaffaKetchup]

If you're looking at https://openweathermap.org/api/weather-map-2, then yes, it appears it should be possible. You'll need an API key, but they provide some free requests.

[Gaushikmr]

Could you please help me out to do that one exaple would be very helpful.

On Sun, Aug 29, 2021, 12:28 AM Luka S @.***> wrote:

If you're looking at https://openweathermap.org/api/weather-map-2, then yes, it appears it should be possible. You'll need an API key, but they provide some free requests.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-907673483, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4CEZLXYXEWP5QEG633T7EWU5ANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Gaushikmr]

Anyways to get in touch with you. Can i get your mail id if possible.

[JaffaKetchup]

I can't give you an example because I just can't right now, but using this URL:

http://maps.openweathermap.org/maps/2.0/weather/{op}/{z}/{x}/{y}?appid={api-key}

as urlTemplate and the additionalOptions parameter for the API key, you should be all set.

If you need further help, just copy/paste the example on the README with the API keys, and just change what's necessary.

[JaffaKetchup]

Anyways to get in touch with you. Can i get your mail id if possible.

Sorry, but I'd prefer to stay in this issue instead of in email.

[Gaushikmr]

Is it possible to use weather maps 1.0?

[JaffaKetchup]

If it follows a similar format URL, then probably.

[Gaushikmr]

Yea i tried using the url f9r weather maps 1.0 but i am facing an exception issue.

On Sun, Aug 29, 2021, 1:12 PM Luka S @.***> wrote:

If it follows a similar format URL, then probably.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-907745948, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4BU65QEKKDHCK2J3JLT7HQFNANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[JaffaKetchup]

Yes you are doing it wrong. The API key is invalid and that's probably what's causing the exception. But you've also hard-coded tile numbers into the URL template, so every tile will be the same. You need to add {x}, {y} & {z} somewhere in the URL.

It should look like this:

https://maps.openweathermap.org/maps/2.0/weather/clouds_new/{z}/{x}/{y}?appid=

[Swepilot]

Keep the {x} {y} {z} in the urlTemplate. This will be replaced by the correct tiles to load. You should not put coordinates here.

[Gaushikmr]

Yes you are doing it wrong. The API key is invalid and that's probably what's causing the exception. But you've also hard-coded tile numbers into the URL template, so every tile will be the same. You need to add {x}, {y} & {z} somewhere in the URL.

It should look like this:

https://maps.openweathermap.org/maps/2.0/weather/clouds_new/{z}/{x}/{y}?appid=

{"message":"{z} should be an integer"}

[JaffaKetchup]

Can I see the URL you used? Because I'm just following what the website says.

[JaffaKetchup]

Well unfortunately I'm not sure then. I can manually replace the placeholders and I get a valid tile, so I think something's wrong with your configuration.

Please set your zoom (initial) in your map options to a whole number, like 13 instead of 13.0. Using a decimal does cause an error for me, even if the number is still integer.

[JaffaKetchup]

Yes, x and y should be integers. Coordinates are not the same as tile numbers. Unfortunately I have no idea how to help anymore, sorry.

[Swepilot]

@Swepilot Do you have any idea? Could you help me if possible.

Yes use this: https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={API key}

The only part you should change is the {layer} and {API key}, don't touch the zxy

[Swepilot]

Keep the curly braces around zxy,but not for layer and API Key

[Swepilot]

@Swepilot Do you have any idea? Could you help me if possible.

Yes use this: https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={API key} The only part you should change is the {layer} and {API key}, don't touch the zxy "https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=810cfa267d0ebfe3d033a3f89ebae88a", Like this ryt

** It shows {"message":"{z} should be an integer"}****

Can you show your whole tileLayerOptions section?

[ibrierley]

I note you aren't giving any MapOptions now, do you still get the same error if you leave existing tile layer code, but give Maptions a valid center and zoom ?

Hard to figure if there's something else going on or not with lots of changing around.

[Swepilot]

I put your code in a sample project and I'm getting tiles. Can't say what's going wrong for you unfortunately...

[Swepilot]

Second last... If you can see the API response you should be able to see that URL flutter_map is requesting in debug console. That could help to pin point the issue

[Gaushikmr]

Second last... If you can see the API response you should be able to see that URL flutter_map is requesting in debug console. That could help to pin point the issue

I didnt get you sorry

[Gaushikmr]

Second last... If you can see the API response you should be able to see that URL flutter_map is requesting in debug console. That could help to pin point the issue

I didn't get you sorry. Is it possible to connect with you.

[Swepilot]

Second last... If you can see the API response you should be able to see that URL flutter_map is requesting in debug console. That could help to pin point the issue

I didnt get you sorry

Yeah threads got out of sequence. I was referring to your question about which code. For some reason the zxy doesn't get replaced properly. Step through the code in debug and you should be a blento find where it goes wrong.

[Gaushikmr]

Any other possibilities @Swepilot @ibrierley .Could you help me to solve the issue.

[ibrierley]

Only thing I can suggest is to provide a minimal example on github that can be easily tested by others to debug.

On Tue, Aug 31, 2021 at 6:30 AM Gaushik @.***> wrote:

Any other possibilities @Swepilot https://github.com/Swepilot @ibrierley.COuld you help me to solve the issue.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-908912057, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5YN5P2YG4B6HNYYAYVONLT7RSHLANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Gaushikmr]

I have shared an example above.

On Tue, Aug 31, 2021, 12:05 PM Ian @.***> wrote:

Only thing I can suggest is to provide a minimal example on github that can be easily tested by others to debug.

On Tue, Aug 31, 2021 at 6:30 AM Gaushik @.***> wrote:

Any other possibilities @Swepilot https://github.com/Swepilot @ibrierley.COuld you help me to solve the issue.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub < https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-908912057 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AA5YN5P2YG4B6HNYYAYVONLT7RSHLANCNFSM5C7LXUCA

. Triage notifications on the go with GitHub Mobile for iOS < https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675

or Android < https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-908941979, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4AMXL7EGTGKGOBR5RLT7RZ2VANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[ibrierley]

Why have you fixed the zoom to 10 in the url, and not provided a zoom to flutter_map ?

[Gaushikmr]

Why have you fixed the zoom to 10 in the url, and not provided a zoom to flutter_map ?

If i DIDNT GIVE A ZOOM IT SHOWS z SHOULD BE AN INTEGER.

[neimproove]

If i DIDNT GIVE A ZOOM IT SHOWS z SHOULD BE AN INTEGER.

That's not how it should be done and will never work properly. There must be something else wrong. As @ibrierley said, I think we need your example in GitHub to be able to help you more. I have already run the code example you provided here and that runs fine for me.

[Gaushikmr]

How can i do that. But whilw i tried it shows me only the plaib grey tiles.

On Tue, Aug 31, 2021, 3:09 PM neimproove @.***> wrote:

If i DIDNT GIVE A ZOOM IT SHOWS z SHOULD BE AN INTEGER.

That's not how it should be done and will never work properly. There must be something else wrong. As @ibrierley https://github.com/ibrierley said, I think we need your example in GitHub to be able to help you more. I have already run the code example you provided here and that runs fine for me.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-909072212, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4G2L2ZXTSPIURSYZPDT7SPMZANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[JaffaKetchup]

In your map options, specify the zoom as an integer and see if that works? The zoom can hold a double, but just pass an integer. I have no idea if it'll work, but it's worth a try.

[Gaushikmr]

Yeah i tried using an integer value it works. But its shows only the plain grey colour. I have attached an image above

On Tue, Aug 31, 2021, 3:11 PM Luka S @.***> wrote:

In your map options, specify the zoom as an integer and see if that works? The zoom can hold a double, but just pass an integer. I have no idea if it'll work, but it's worth a try.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-909073436, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4AASWR47G3FLUXIBA3T7SPTFANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[JaffaKetchup]

Ok, didn't realise you already tried.

[Gaushikmr]

Ok, didn't realise you already tried.

think we need your example in GitHub to be able to help you more. How Would I do this ?? I have already shared my code above

[ibrierley]

For what it's worth, the example works for me (testing with a default mapoptions zoom of 9.0, it shows graded orange tiles. I don't get any errors at all.

[Gaushikmr]

But it should be displayed in maps now it shows only the layer right like the above image which I have attached.BBut it should be displayed on top of maps. Openstrret map. I am geeting the tiles not facing any issues in the tiles part.

On Tue, Aug 31, 2021, 3:28 PM Ian @.***> wrote:

For what it's worth, the example works for me (testing with a default mapoptions zoom of 9.0, it shows graded orange tiles. I don't get any errors at all.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fleaflet/flutter_map/issues/1001#issuecomment-909085733, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOHJZ4AE2V4RTLNOD2CHAITT7SRUBANCNFSM5C7LXUCA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Swepilot]

Try setting the weather maps layer background to transparent.

backgroundColor: Colors.transparent

[ibrierley]

I think I understand what your problem actually is...you want 2 layers, I'm wondering if the weathermaps tiles aren't transparent

[ibrierley]

ah good call

[Gaushikmr]

@ibrierley @Swepilot WIll try the above method and let you know. You caould see that I have commented a portion of code thats the open street maps code. I am using it as a base layer

[ibrierley]

Yes, it works ok for me with Swepilots transparent parameter included and as long as the streetmaps appear before the weather tiles.

[ibrierley]

This is mine that has no errors, and works with changing zooms etc...

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(51.5, -0.09),
        zoom: 9.0,
      ),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']
        ),
        new TileLayerOptions(
            backgroundColor: Colors.transparent,
            urlTemplate:
                "https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=810cfa267d0ebfe3d033a3f89ebae88a"
        ),
        new MarkerLayerOptions(
          markers: [
            new Marker(
              width: 80.0,
              height: 80.0,
              point: new LatLng(51.5, -0.09),
              builder: (ctx) => new Container(
                child: Icon(
                  Icons.location_city_sharp,
                  size: 60,
                  color: Colors.purple,
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

[Gaushikmr]

@ibrierley @Swepilot @JaffaKetchup @neimproove Does anyone suggest any idea on How could I add multiple layers and group them into one.

[JaffaKetchup]

Not sure what you mean, but if you mean combining two styles into one, you'll need to use something like Mapbox I think.

[Gaushikmr]

Not sure what you mean, but if you mean combining two styles into one, you'll need to use something like Mapbox I think.

@JaffaKetchup @ibrierley I mean like leaflet layer controls in maps. https://leafletjs.com/examples/layers-control/

[Gaushikmr]

https://leafletjs.com/examples/layers-control/ @ibrierley @Swepilot @JaffaKetchup @neimproove Could anyone help me add layer controls to the maps.

[JaffaKetchup]

It's easy enough, just create a UI which changes a variable to the desired templateURL, then just use that variable as the templateURL.

For the UI, I'd recommend a bottom sheet library like this one, you can get some really cool looking designs out of it.

[Gaushikmr]

@JaffaKetchup Actually I am a beginner. If you dont mind Could you teach me how to do that It would be very helpful.

[JaffaKetchup]

I can't really teach you, I'm not a good teacher and I've got other things to get done.

I've given a link to a good library, you should be able to setup your own stateful widget. StackOverflow and Google are your friends if you need them.

I'd say it's less complicated than setting up flutter_map, so you should be able to do this no problem.

[Gaushikmr]

@JaffaKetchup Ok I will try to do.Thanks