longdo_maps_api3_flutter 1.7.0 copy "longdo_maps_api3_flutter: ^1.7.0" to clipboard
longdo_maps_api3_flutter: ^1.7.0 copied to clipboard

Flutter plugin for integrating Longdo Maps in iOS and Android applications.

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';

import 'package:longdo_maps_api3_flutter/longdo_maps_api3_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final map = GlobalKey<LongdoMapState>();
  final GlobalKey<ScaffoldMessengerState> messenger =
      GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    Object? marker;

    return MaterialApp(
      scaffoldMessengerKey: messenger,
      home: Scaffold(
          body: Column(
        children: [
          Expanded(
            flex: 2,
            child: LongdoMapWidget(
              apiKey: "",
              bundleId: "",
              key: map,
              eventName: [
                JavascriptChannel(
                  name: "ready",
                  onMessageReceived: (message) {
                    var marker = map.currentState?.LongdoObject(
                      "Marker",
                      id: "basic",
                      args: [
                        {
                          "lon": 100.56,
                          "lat": 13.74,
                        },
                      ],
                    );
                    map.currentState?.call("Overlays.add", args: [marker!]);
                  },
                ),
              ],
              options: {
                // "ui": Longdo.LongdoStatic(
                //   "UiComponent",
                //   "None",
                // )
              },
            ),
          ),
          Expanded(
              child: Padding(
            padding: EdgeInsets.all(8.0),
            child: ListView(
              children: [
                Text(
                  "Layer",
                  style: Theme.of(context).textTheme.headline6,
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        var layer = map.currentState?.LongdoObject(
                          "Layer",
                          args: [
                            "roadnet2:Road_FGDS",
                            {
                              "type": map.currentState?.LongdoStatic(
                                "LayerType",
                                "WMS",
                              ),
                              "url":
                                  'https://apix.longdo.com/vector/test-tile.php',
                              "zoomRange": {
                                "min": 1,
                                "max": 9,
                              },
                              "refresh": 180,
                              "opacity": 0.5,
                              "weight": 10,
                              "bound": {
                                "minLon": 100,
                                "minLat": 10,
                                "maxLon": 105,
                                "maxLat": 20
                              }
                            }
                          ],
                        );
                        if (layer != null) {
                          map.currentState?.call("Layers.add", args: [layer]);
                        }
                      },
                      child: Text("WMS"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var layer = map.currentState?.LongdoObject(
                          "Layer",
                          args: [
                            "roadnet2:Road_FGDS@EPSG:900913@png",
                            {
                              "type": map.currentState?.LongdoStatic(
                                "LayerType",
                                "TMS",
                              ),
                              "url":
                                  "https://apix.longdo.com/vector/test-tile.php?tms=",
                              "zoomOffset": 0,
                            }
                          ],
                        );
                        if (layer != null) {
                          map.currentState?.call("Layers.add", args: [layer]);
                        }
                      },
                      child: Text("TMS"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var layer = map.currentState?.LongdoObject(
                          "Layer",
                          args: [
                            "roadnet2:Road_FGDS",
                            {
                              "type": map.currentState?.LongdoStatic(
                                "LayerType",
                                "WMTS",
                              ),
                              "url":
                                  "https://apix.longdo.com/vector/test-tile.php",
                              "srs": "EPSG:900913",
                              "tileMatrix": "(z) => 'EPSG:900913:' + z",
                            }
                          ],
                        );
                        if (layer != null) {
                          map.currentState?.call("Layers.add", args: [layer]);
                        }
                      },
                      child: Text("WMTS"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var layer = map.currentState?.LongdoObject(
                          "Layer",
                          args: [
                            "bluemarble_terrain",
                            {
                              "type": map.currentState?.LongdoStatic(
                                "LayerType",
                                "WMTS_REST",
                              ),
                              "url": "https://ms.longdo.com/mapproxy/wmts",
                              "srs": "GLOBAL_WEBMERCATOR",
                            }
                          ],
                        );
                        if (layer != null) {
                          map.currentState?.call("Layers.add", args: [layer]);
                        }
                      },
                      child: Text("WMTS REST"),
                    ),
                  ],
                ),
                Text(
                  "Marker",
                  style: Theme.of(context).textTheme.headline6,
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        marker ??= map.currentState?.LongdoObject(
                          "Marker",
                          id: "basic",
                          args: [
                            {
                              "lon": 100.56,
                              "lat": 13.74,
                            }
                          ],
                        );
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [marker!]);
                        }
                      },
                      child: Text("Add"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.remove", args: [marker!]);
                        }
                      },
                      child: Text("Remove"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        map.currentState?.call("Overlays.clear");
                      },
                      child: Text("Clear"),
                    ),
                  ],
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        var marker = map.currentState?.LongdoObject(
                          "Marker",
                          args: [
                            {
                              "lon": 101.2,
                              "lat": 12.8,
                            },
                            {
                              "title": "Marker",
                              "detail": "Drag me",
                              "visibleRange": {
                                "min": 7,
                                "max": 9,
                              },
                              "draggable": true
                            }
                          ],
                        );
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [marker]);
                        }
                      },
                      child: Text("Option 1"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var marker = map.currentState?.LongdoObject(
                          "Marker",
                          args: [
                            {
                              "lon": 99.35,
                              "lat": 14.25,
                            },
                            {
                              "title": "Custom Marker",
                              "icon": {
                                "html": "Marker",
                                "offset": {
                                  "x": 18,
                                  "y": 21,
                                }
                              },
                              "popup": {"html": "<div>popup</div>"}
                            }
                          ],
                        );
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [marker]);
                        }
                      },
                      child: Text("Option 2"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var marker = map.currentState?.LongdoObject(
                          "Marker",
                          args: [
                            {
                              "lon": 100.41,
                              "lat": 13.84,
                            },
                            {
                              "title": "Rotate Marker",
                              "rotate": 90,
                            }
                          ],
                        );
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [marker]);
                        }
                      },
                      child: Text("Option 3"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var marker = map.currentState?.LongdoObject(
                          "Marker",
                          args: [
                            {
                              "type": "Feature",
                              "properties": [],
                              "geometry": {
                                "type": "Point",
                                "coordinates": [
                                  100.49477577209473,
                                  13.752891404314328,
                                ]
                              },
                            }
                          ],
                        );
                        if (marker != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [marker]);
                        }
                      },
                      child: Text("GeoJson"),
                    ),
                  ],
                ),
                Text(
                  "Geometry",
                  style: Theme.of(context).textTheme.headline6,
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        var polyline = map.currentState?.LongdoObject(
                          "Polyline",
                          args: [
                            [
                              {
                                "lon": 100,
                                "lat": 14,
                              },
                              {
                                "lon": 101,
                                "lat": 15,
                              },
                              {
                                "lon": 102,
                                "lat": 14,
                              },
                            ],
                            {
                              "title": "Polyline",
                              "detail": "-",
                              "label": "Polyline",
                              "lineWidth": 4,
                              "lineColor": "rgba(255, 0, 0, 0.8)"
                            }
                          ],
                        );
                        if (polyline != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [polyline]);
                        }
                      },
                      child: Text("Polyline"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var dashline = map.currentState?.LongdoObject(
                          "Polyline",
                          args: [
                            [
                              {
                                "lon": 99,
                                "lat": 14,
                              },
                              {
                                "lon": 100,
                                "lat": 15,
                              },
                              {
                                "lon": 101,
                                "lat": 14,
                              }
                            ],
                            {
                              "title": "Dashline",
                              "detail": "-",
                              "label": "Dashline",
                              "lineWidth": 4,
                              "lineColor": "rgba(255, 0, 0, 0.8)",
                              "lineStyle": map.currentState?.LongdoStatic(
                                "LineStyle",
                                "Dashed",
                              ),
                              "pointer": true
                            }
                          ],
                        );
                        if (dashline != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [dashline]);
                        }
                      },
                      child: Text("Dashline"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var polygon = map.currentState?.LongdoObject(
                          "Polygon",
                          args: [
                            [
                              {
                                "lon": 99,
                                "lat": 14,
                              },
                              {
                                "lon": 100,
                                "lat": 13,
                              },
                              {
                                "lon": 102,
                                "lat": 13,
                              },
                              {
                                "lon": 103,
                                "lat": 14,
                              }
                            ],
                            {
                              "title": "Polygon",
                              "detail": "-",
                              "label": "Polygon",
                              "lineWidth": 2,
                              "lineColor": "rgba(0, 0, 0, 1)",
                              "fillColor": "rgba(255, 0, 0, 0.4)",
                              "visibleRange": {
                                "min": 5,
                                "max": 18,
                              },
                              "editable": true,
                              "weight": map.currentState?.LongdoStatic(
                                "OverlayWeight",
                                "Top",
                              )
                            }
                          ],
                        );
                        if (polygon != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [polygon]);
                        }
                      },
                      child: Text("Polygon"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var circle = map.currentState?.LongdoObject(
                          "Circle",
                          args: [
                            {
                              "lon": 101,
                              "lat": 15,
                            },
                            1,
                            {
                              "title": "Geom 3",
                              "detail": "-",
                              "lineWidth": 2,
                              "lineColor": "rgba(255, 0, 0, 0.8)",
                              "fillColor": "rgba(255, 0, 0, 0.4)",
                            }
                          ],
                        );
                        if (circle != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [circle]);
                        }
                      },
                      child: Text("Circle"),
                    ),
                  ],
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () {
                        var dot = map.currentState?.LongdoObject(
                          "Dot",
                          args: [
                            {
                              "lon": 100.540574,
                              "lat": 13.714765,
                            },
                            {
                              "lineWidth": 20,
                              "draggable": true,
                            }
                          ],
                        );
                        if (dot != null) {
                          map.currentState?.call("Overlays.add", args: [dot]);
                        }
                      },
                      child: Text("Dot"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var donut = map.currentState?.LongdoObject(
                          "Polygon",
                          args: [
                            [
                              {
                                "lon": 101,
                                "lat": 15,
                              },
                              {
                                "lon": 105,
                                "lat": 15,
                              },
                              {
                                "lon": 103,
                                "lat": 12,
                              },
                              null,
                              {
                                "lon": 103,
                                "lat": 14.9,
                              },
                              {
                                "lon": 102.1,
                                "lat": 13.5,
                              },
                              {
                                "lon": 103.9,
                                "lat": 13.5,
                              }
                            ],
                            {
                              "lon": 100.540574,
                              "lat": 13.714765,
                            },
                            {
                              "label": true,
                              "clickable": true,
                            }
                          ],
                        );
                        if (donut != null) {
                          map.currentState?.call("Overlays.add", args: [donut]);
                        }
                      },
                      child: Text("Donut"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () {
                        var rectangle = map.currentState?.LongdoObject(
                          "Rectangle",
                          args: [
                            {
                              "lon": 100.617,
                              "lat": 13.896,
                            },
                            {
                              "width": 2,
                              "height": 1,
                            },
                            {
                              "editable": true,
                            }
                          ],
                        );
                        if (rectangle != null) {
                          map.currentState
                              ?.call("Overlays.add", args: [rectangle]);
                        }
                      },
                      child: Text("Rectangle"),
                    ),
                  ],
                ),
                Row(
                  children: [
                    OutlinedButton(
                      onPressed: () async {
                        var polygon = map.currentState?.LongdoObject(
                          "Polygon",
                          args: [
                            [
                              {
                                "lon": 99,
                                "lat": 14,
                              },
                              {
                                "lon": 100,
                                "lat": 13,
                              },
                              {
                                "lon": 102,
                                "lat": 13,
                              },
                              {
                                "lon": 103,
                                "lat": 14,
                              }
                            ]
                          ],
                        );
                        if (polygon != null) {
                          var result = await map.currentState?.objectCall(
                            polygon,
                            "size",
                          );
                          print(result);
                        }
                      },
                      child: Text("Geometry Area"),
                    ),
                    SizedBox(width: 8),
                    OutlinedButton(
                      onPressed: () async {
                        var polyline = map.currentState?.LongdoObject(
                          "Polyline",
                          args: [
                            [
                              {
                                "lon": 100,
                                "lat": 14,
                              },
                              {
                                "lon": 101,
                                "lat": 15,
                              },
                              {
                                "lon": 102,
                                "lat": 14,
                              }
                            ],
                            {
                              "title": "Polyline",
                              "detail": '-',
                              "label": "Polyline",
                              "lineWidth": 4,
                              "lineColor": "rgba(255, 0, 0, 0.8)"
                            }
                          ],
                        );
                        if (polyline != null) {
                          var result = await map.currentState?.objectCall(
                            polyline,
                            "size",
                            args: [
                              "th",
                            ],
                          );
                          print(result);
                        }
                      },
                      child: Text("Format Distance Polyline"),
                    ),
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Ui.Components",
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                    Wrap(
                        spacing: 8.0,
                        children: [
                          "DPad",
                          "Geolocation",
                          "Zoombar",
                          "Toolbar",
                          "LayerSelector",
                          "Fullscreen",
                          "Scale",
                          "ContextMenu",
                          "Keyboard",
                          "Mouse",
                          "Crosshair",
                          "Cursor",
                          "Terrain",
                          "Toast",
                          "Tooltip"
                        ]
                            .map((it) => OutlinedButton(
                                  onPressed: () {
                                    map.currentState?.call(
                                      "Ui.$it.visible",
                                      args: [false],
                                    );
                                  },
                                  child: Text(it),
                                ))
                            .toList()),
                  ],
                ),
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                  Text(
                    "Map",
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  Wrap(spacing: 8.0, children: [
                    OutlinedButton(
                      onPressed: () {
                        const location = {
                          "lon": 100.5384,
                          "lat": 13.7649,
                        };
                        map.currentState?.call("location", args: [location]);
                      },
                      child: Text("Victory Monument"),
                    ),
                    OutlinedButton(
                      onPressed: () {
                        map.currentState?.call("zoom", args: [true, true]);
                      },
                      child: Text("Zoom In"),
                    ),
                    OutlinedButton(
                      onPressed: () {
                        map.currentState?.call("zoom", args: [10, true]);
                      },
                      child: Text("Zoom 10"),
                    ),
                    OutlinedButton(
                      onPressed: () {
                        map.currentState?.call("zoom", args: [false, true]);
                      },
                      child: Text("Zoom Out"),
                    ),
                  ]),
                ])
              ],
            ),
          ))
        ],
      )),
    );
  }
}
0
likes
0
pub points
75%
popularity

Publisher

verified publisherlongdo.com

Flutter plugin for integrating Longdo Maps in iOS and Android applications.

Homepage

License

unknown (LICENSE)

Dependencies

flutter, webview_flutter

More

Packages that depend on longdo_maps_api3_flutter