Created
March 9, 2022 14:03
-
-
Save diego-lipinski-de-castro/264b1f1b05ba7c5e088d2442428d9517 to your computer and use it in GitHub Desktop.
leaflet migration test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment