0

THE CONTEXT

I am trying to use OpenStreetMap (with OpenLayers) in Flutter Web, but all the plugins that I have found to do that only works for IOS or Android for now.

WHAT I HAVE ACHIEVED

I have found a way to display a map in Flutter Web with dart:html and IFrameElement. Here is my widget code in Dart :

import 'dart:html' as html;
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class MapView extends StatefulWidget {
  MapView({Key key}) : super(key: key);

  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  String createdViewId = 'hello-world-html';
  html.Element _iframe = html.IFrameElement()
    ..width = '400'
    ..height = '400'
    ..src = "http://localhost:80/dist"
    ..style.border = '1';

  @override
  void initState() {
    super.initState();
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry
        .registerViewFactory(createdViewId, (int viewId) => _iframe);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 400,
        child: HtmlElementView(
          viewType: createdViewId,
        ));
  }
}

Here is my index.js file that I am using to build the map

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import Point from 'ol/geom/Point';
import { Tile, Vector as VectorLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import { Icon, Style } from 'ol/style';
import {fromLonLat} from 'ol/proj';

var lonLat = [4.89, 44.93];
var lonLatFR = [2.213749, 46.227638];

var iconFeature = new Feature({
    geometry: new Point(fromLonLat(lonLat)),
    name: 'Valence',
    population: 4000,
    rainfall: 500
});

var iconStyle = new Style({
    image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'icon.svg',
    })
});

iconFeature.setStyle(iconStyle);

var vectorSource = new VectorSource({
    features: [iconFeature]
});

var vectorLayer = new VectorLayer({
    source: vectorSource
});

var rasterLayer = new Tile({
    source: new OSM()
});

var map = new Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new View({
        center: fromLonLat(lonLatFR),
        zoom: 5
    })
});

var element = document.getElementById('popup');

var popup = new Overlay({
    element: element,
    positioning: 'bottom-center',
    stopEvent: false,
    offset: [0, -50]
});
map.addOverlay(popup);

// display popup on click
jQuery.noConflict();
map.on('click', function (evt) {

    window.top.postMessage("SEND ME !!", "*");


    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function (feature) {
            return feature;
        });
    if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        jQuery(element).popover({
            placement: 'top',
            html: true,
            content: feature.get('name')
        });
        jQuery(element).popover('show');
    } else {
        jQuery(element).popover('destroy');
    }
});

// change mouse cursor when over marker
map.on('pointermove', function (e) {
    if (e.dragging) {
        jQuery(element).popover('destroy');
        return;
    }
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTarget().style.cursor = hit ? 'pointer' : '';
});

And finally this is my index.html file that I am requesting from Dart (http://localhost:80/dist)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Icon Symbolizer</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script
        src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .map {
            width: 400px;
            height: 400px;
            margin: auto
        }
    </style>
</head>

<body>
    <div id="map" class="map">
        <div id="popup"></div>
    </div>
    <script src="index.js"></script>
</body>

</html>

MY QUESTION

Not only this solution is not really pretty, but I need to send data back from JS to Flutter. Indeed, the idea is that I will have multiple markers on my map and I need to know which ones the user has selected.

I have seen that it is possible to do it with the WebView Flutter plugin (JavascriptMessage) but again, it is only works in IOS or Android. So I am trying to do it by sending postMessage from Javascript but I do not found where I am suppose to listen to this message in Flutter.

Pyth0nGh057
  • 666
  • 1
  • 8
  • 16

1 Answers1

0

Here is an example of Maps in Flutter for Web: http://flutter_for_web_maps.codemagic.app/ - so what you need to do is use flutter_map plugin and replace/change all dependencies that rely on platform-specific implementation with the ones that support web.

It looks like there is a new package that supports web: https://pub.dev/packages/easy_google_maps - give it a try.

Illia
  • 9
  • 3