leaflet migration test

map.vue

<template>
  <developer-layout title="Mapa de calor">
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Mapa de calor
      </h2>
    </template>

    <div class="py-12">
      <div class="grid gap-6 grid-cols-1 md:grid-cols-4 mt-5">
        <div
          class="col-span-4 relative bg-white overflow-hidden shadow-md rounded-md"
        >
          <div
            id="map"
            class="z-40"
            style="height: 60vh"
          />
        </div>
      </div>
    </div>
  </developer-layout>
</template>

<script>
import { defineComponent, onMounted } from "vue";
import DeveloperLayout from "@/Layouts/DeveloperLayout.vue";

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.gridlayer.googlemutant";
// import "leaflet.fullscreen";
// import "leaflet.fullscreen/Control.FullScreen.css";

// import "leaflet.heat";
import 'leaflet.migration';

// import "leaflet.markercluster";
// import "leaflet.markercluster/dist/MarkerCluster.css";
// import "leaflet.markercluster/dist/MarkerCluster.Default.css";

import homeIcon from "@/assets/images/anchor.svg";
import plusIcon from "@/assets/images/plus.svg";
import minusIcon from "@/assets/images/minus.svg";

import gomoovIcon from "@/assets/images/gomoov-icon.svg";

import mapStyle from '@/assets/map-style.json';
import mapStyleDark from '@/assets/map-style-dark.json';

export default defineComponent({
    components: {
        DeveloperLayout,
    },

    props: {
        deliveries: {
            type: Array,
            default: () => [],
        },
        drivers: {
            type: Array,
            default: () => [],
        },
        bikes: {
            type: Array,
            default: () => [],
        },
    },

    setup(props) {
        let map = null;
        const center = [-26.4822945, -49.0699353];

        const addZoomControl = () => {
            L.Control.controls = L.Control.extend({
                options: {
                    position: "topright",
                    zoomInText: `<img src="${plusIcon}"/>`,
                    zoomInTitle: "Ampliar",
                    zoomOutText: `<img src="${minusIcon}"/>`,
                    zoomOutTitle: "Reduzir",
                    zoomHomeText: `<img src="${homeIcon}"/>`,
                    zoomHomeTitle: "Recentralizar",
                },

                onAdd: function (map) {
                    var controlName = "gin-control-zoom";
                    var container = L.DomUtil.create(
                        "div",
                        controlName + " leaflet-bar"
                    );
                    var options = this.options;

                    this._zoomInButton = this._createButton(
                        options.zoomInText,
                        options.zoomInTitle,
                        controlName + "-in",
                        container,
                        this._zoomIn
                    );

                    this._zoomOutButton = this._createButton(
                        options.zoomOutText,
                        options.zoomOutTitle,
                        controlName + "-out",
                        container,
                        this._zoomOut
                    );

                    this._zoomHomeButton = this._createButton(
                        options.zoomHomeText,
                        options.zoomHomeTitle,
                        controlName + "-home",
                        container,
                        this._zoomHome
                    );

                    this._updateDisabled();
                    map.on(
                        "zoomend zoomlevelschange",
                        this._updateDisabled,
                        this
                    );

                    return container;
                },

                onRemove: function (map) {
                    map.off(
                        "zoomend zoomlevelschange",
                        this._updateDisabled,
                        this
                    );
                },

                _zoomIn: function (e) {
                    this._map.zoomIn(e.shiftKey ? 3 : 1);
                },

                _zoomOut: function (e) {
                    this._map.zoomOut(e.shiftKey ? 3 : 1);
                },

                _zoomHome: function (e) {
                    map.setView(center, 14);
                },

                _createButton: function (
                    html,
                    title,
                    className,
                    container,
                    fn
                ) {
                    var link = L.DomUtil.create("a", className, container);
                    link.innerHTML = html;
                    link.href = "#";
                    link.title = title;

                    L.DomEvent.on(
                        link,
                        "mousedown dblclick",
                        L.DomEvent.stopPropagation
                    )
                        .on(link, "click", L.DomEvent.stop)
                        .on(link, "click", fn, this)
                        .on(link, "click", this._refocusOnMap, this);

                    return link;
                },

                _updateDisabled: function () {
                    var map = this._map,
                        className = "leaflet-disabled";

                    L.DomUtil.removeClass(this._zoomInButton, className);
                    L.DomUtil.removeClass(this._zoomOutButton, className);

                    if (map._zoom === map.getMinZoom()) {
                        L.DomUtil.addClass(this._zoomOutButton, className);
                    }

                    if (map._zoom === map.getMaxZoom()) {
                        L.DomUtil.addClass(this._zoomInButton, className);
                    }
                },
            });
        };

        const initMap = async () => {
            window.emitter.emit("initGoogleMaps", () => {
                map = L.map("map", {
                        // zoomControl: false,
                        // scrollWheelZoom: true,
                        // touchZoom: false,
                        // dragging: true,
                        // keyboard: false,
                        // fullscreenControl: true,
                        // fullscreenControlOptions: {
                        //     title: "Tela cheia",
                        //     titleCancel: "Sair",
                        //     position: "topright",
                        //     forceSeparateButton: true,
                        //     forcePseudoFullscreen: true,
                        //     fullscreenElement: false,
                        // },
                }).setView(center, 14);

                L.gridLayer
                    .googleMutant({
                        type: "roadmap",
                        styles:
                            localStorage.getItem("entregas.speedapp.dark") ===
                            "true"
                                ? mapStyleDark
                                : mapStyle,
                    })
                    .addTo(map);

                // addZoomControl();

                // map.addControl(new L.Control.controls());

                // let matrix = [];

                // const cluster = L.markerClusterGroup({
                //     iconCreateFunction: (cluster) => {
                //         matrix.push([
                //             cluster._latlng.lat,
                //             cluster._latlng.lng,
                //             cluster._childCount,
                //         ]);

                //         var childCount = cluster.getChildCount();

                //         var c = " marker-cluster-";
                //         if (childCount < 10) {
                //             c += "small";
                //         } else if (childCount < 100) {
                //             c += "medium";
                //         } else {
                //             c += "large";
                //         }

                //         return new L.DivIcon({
                //             html: "<div><span>" + childCount + "</span></div>",
                //             className: "marker-cluster" + c,
                //             iconSize: new L.Point(40, 40),
                //         });
                //     },
                // });

                // props.bikes.forEach((point) => {
                //     cluster.addLayer(
                //         L.marker([point.coordinates[1], point.coordinates[0]], {
                //             icon: L.icon({
                //                 iconUrl: gomoovIcon,
                //                 iconSize: [30, 30],
                //                 iconAnchor: [15, 15],
                //             }),
                //         })
                //     );
                // });

                // map.addLayer(cluster);

                // const max = Math.max(...matrix.map((m) => m[2]));

                // const heat = L.heatLayer(matrix, {
                //     // minOpacity: 0.5,
                //     max: max,
                // });

                // map.addLayer(heat);

                var data = [{"from":[-118.2705,33.9984],"to":[-122.789336,37.920458],"labels":["Los Angeles","San Francisco"],"color":"#ff3a31"},{"from":[-118.2705,33.9984],"to":[-80.247887,25.792296],"labels":[null,"Miami"],"color":"#ff7e2b"},{"from":[-118.2705,33.9984],"to":[-73.999705,40.795047],"labels":[null,"New York"],"color":"#ffc726"},{"from":[-118.2705,33.9984],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#e9ff20"},{"from":[-118.2705,33.9984],"to":[-92.145189,46.77372],"labels":[null,"Duluth"],"color":"#99ff1b"},{"from":[-118.2705,33.9984],"to":[-111.824547,40.788055],"labels":[null,"Salt Lake"],"color":"#45ff15"},{"from":[-118.2705,33.9984],"to":[-111.364615,47.536109],"labels":[null,"Great Falls"],"color":"#10ff33"},{"from":[-118.2705,33.9984],"to":[-97.585039,35.511099],"labels":[null,"Oklahoma"],"color":"#0aff84"},{"from":[-118.2705,33.9984],"to":[-115.157907,36.173032],"labels":[null,"Las Vegas"],"color":"#05ffd9"},{"from":[-118.2705,33.9984],"to":[-103.196215,34.418753],"labels":[null,"Clovis"],"color":"#00ccff"}];
        
                var data2=[{"from":[-73.875523,40.781063],"to":[-80.247887,25.792296],"labels":["New York","Maima"],"color":"#05ffd9"},{"from":[-73.875523,40.781063],"to":[-118.2705,33.9984],"labels":[null,"Los Angeles"],"color":"#00ccff"},{"from":[-73.875523,40.781063],"to":[-87.724088,41.917846],"labels":[null,"Chicago"],"color":"#ffc726"},{"from":[-73.875523,40.781063],"to":[-71.058437,42.35902],"labels":[null,"Boston"],"color":"#e9ff20"},{"from":[-73.875523,40.781063],"to":[-75.683057,45.42172],"labels":[null,"Ottawa"],"color":"#99ff1b"}];

                data = data.map(item => { return {...item, value: parseInt(Math.random()*20)}});
                data2 = data2.map(item => { return {...item, value: parseInt(Math.random()*20)}});

                var migrationLayer = new L.migrationLayer({
                    map: map,
                    data: data,
                    pulseRadius:30,
                    pulseBorderWidth:3,
                    arcWidth:1,
                    arcLabel:true,
                    arcLabelFont:'10px sans-serif',
                    maxWidth:10
                    }
                );

                migrationLayer.addTo(map);
            });
        };

        onMounted(initMap);
    },
});
</script>