arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first init

Browse Source
This commit is contained in:
arifal
2025-01-16 17:16:14 +07:00
commit 84d8f3ca6a
227 changed files with 43922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
resources/js/pages/maps-google.js Executable file
View File

@@ -0,0 +1,314 @@
import GMaps from 'gmaps';
class GoogleMap {
initBasicGoogleMap() {
new GMaps({ div: "#gmaps-basic", lat: -12.043333, lng: -77.028333 });
}
initMarkerGoogleMap() {
new GMaps({ div: "#gmaps-markers", lat: -12.043333, lng: -77.028333 });
}
initStreetViewGoogleMap() {
GMaps.createPanorama({ el: "#panorama", lat: 42.3455, lng: -71.0983 });
}
initMapTypes() {
var e = new GMaps({
el: "#gmaps-types",
lat: 42.3455,
lng: -71.0983,
mapTypeControlOptions: {
mapTypeIds: [
"hybrid",
"roadmap",
"satellite",
"terrain",
"osm",
"cloudmade",
],
},
});
return (
e.addMapType("osm", {
getTileUrl: function (e, t) {
return (
"http://tile.openstreetmap.org/" +
t +
"/" +
e.x +
"/" +
e.y +
".png"
);
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18,
}),
e.addMapType("cloudmade", {
getTileUrl: function (e, t) {
return (
"http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" +
t +
"/" +
e.x +
"/" +
e.y +
".png"
);
},
tileSize: new google.maps.Size(256, 256),
name: "CloudMade",
maxZoom: 18,
}),
e.setMapTypeId("osm"),
e
);
}
initUltraLightMap() {
new GMaps({
div: "#ultra-light",
lat: 42.3455,
lng: -71.0983,
styles: [
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{ color: "#ffffff" }, { lightness: 17 }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{ color: "#ffffff" },
{ lightness: 29 },
{ weight: 0.2 },
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{ color: "#ffffff" }, { lightness: 18 }],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{ color: "#ffffff" }, { lightness: 16 }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#dedede" }, { lightness: 21 }],
},
{
elementType: "labels.text.stroke",
stylers: [
{ visibility: "on" },
{ color: "#ffffff" },
{ lightness: 16 },
],
},
{
elementType: "labels.text.fill",
stylers: [
{ saturation: 36 },
{ color: "#333333" },
{ lightness: 40 },
],
},
{
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#f2f2f2" }, { lightness: 19 }],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{ color: "#fefefe" }, { lightness: 20 }],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{ color: "#fefefe" },
{ lightness: 17 },
{ weight: 1.2 },
],
},
],
});
}
initDarkMap() {
new GMaps({
div: "#dark",
lat: 42.3455,
lng: -71.0983,
styles: [
{
featureType: "all",
elementType: "labels",
stylers: [{ visibility: "on" }],
},
{
featureType: "all",
elementType: "labels.text.fill",
stylers: [
{ saturation: 36 },
{ color: "#000000" },
{ lightness: 40 },
],
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "on" },
{ color: "#000000" },
{ lightness: 16 },
],
},
{
featureType: "all",
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{ color: "#000000" }, { lightness: 20 }],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{ color: "#000000" },
{ lightness: 17 },
{ weight: 1.2 },
],
},
{
featureType: "administrative.country",
elementType: "labels.text.fill",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [{ color: "#c4c4c4" }],
},
{
featureType: "administrative.neighborhood",
elementType: "labels.text.fill",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 20 }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{ color: "#000000" },
{ lightness: 21 },
{ visibility: "on" },
],
},
{
featureType: "poi.business",
elementType: "geometry",
stylers: [{ visibility: "on" }],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{ color: "#e5c163" }, { lightness: "0" }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{ visibility: "off" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [{ color: "#e5c163" }],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 18 }],
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{ color: "#575757" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [{ color: "#2c2c2c" }],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 16 }],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{ color: "#999999" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 19 }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#000000" }, { lightness: 17 }],
},
],
});
}
init() {
this.initBasicGoogleMap(),
this.initMarkerGoogleMap(),
this.initStreetViewGoogleMap(),
this.initMapTypes(),
this.initUltraLightMap(),
this.initDarkMap();
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new GoogleMap().init();
});