%PDF-
%PDF-
Mini Shell
Mini Shell
/*=========================================================================================
File Name: utils.js
Description: google utils
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(window).on("load", function(){
// Context Menu
// ------------------------------
context_menu_map = new GMaps({
div: '#context-menu',
lat: -12.043333,
lng: -77.028333,
styles: [{"stylers":[{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]
});
context_menu_map.setContextMenu({
control: 'map',
options: [{
title: 'Add marker',
name: 'add_marker',
action: function(e) {
this.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
title: 'New marker'
});
}
}, {
title: 'Center here',
name: 'center_here',
action: function(e) {
this.setCenter(e.latLng.lat(), e.latLng.lng());
}
}]
});
// Geofences
// ------------------------------
geofences_map = new GMaps({
div: '#geofences',
lat: -12.043333,
lng: -77.028333
});
var geofences_path=[];
var p = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]];
for(var i in p){
latlng = new google.maps.LatLng(p[i][0], p[i][1]);
geofences_path.push(latlng);
}
polygon = geofences_map.drawPolygon({
paths: geofences_path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
geofences_map.addMarker({
lat: -12.043333,
lng: -77.028333,
draggable: true,
fences: [polygon],
outside: function(marker, fence) {
alert('This marker has been moved outside of its fence');
}
});
// Custom Controls
// ------------------------------
custom_control_map = new GMaps({
div: '#custom-controls',
zoom: 16,
lat: -12.043333,
lng: -77.028333,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#165c64"},{"saturation":34},{"lightness":-69},{"visibility":"on"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"hue":"#b7caaa"},{"saturation":-14},{"lightness":-18},{"visibility":"on"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"hue":"#cbdac1"},{"saturation":-6},{"lightness":-9},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#8d9b83"},{"saturation":-89},{"lightness":-12},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#d4dad0"},{"saturation":-88},{"lightness":54},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#bdc5b6"},{"saturation":-89},{"lightness":-3},{"visibility":"simplified"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#bdc5b6"},{"saturation":-89},{"lightness":-26},{"visibility":"on"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"hue":"#c17118"},{"saturation":61},{"lightness":-45},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#8ba975"},{"saturation":-46},{"lightness":-28},{"visibility":"on"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"hue":"#a43218"},{"saturation":74},{"lightness":-51},{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":0},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":0},{"lightness":100},{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"hue":"#ffffff"},{"saturation":0},{"lightness":100},{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":0},{"lightness":100},{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"hue":"#3a3935"},{"saturation":5},{"lightness":-57},{"visibility":"off"}]},{"featureType":"poi.medical","elementType":"geometry","stylers":[{"hue":"#cba923"},{"saturation":50},{"lightness":-46},{"visibility":"on"}]}]
});
custom_control_map.addControl({
position: 'top_right',
content: 'Geolocate',
style: {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events: {
click: function(){
GMaps.geolocate({
success: function(position){
custom_control_map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error){
alert('Geolocation failed: ' + error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
}
});
}
}
});
// Fusion Table Layers
// ------------------------------
infoWindow = new google.maps.InfoWindow({});
fusion_layers_map = new GMaps({
div: '#fusion-table-layers',
zoom: 11,
lat: 41.850033,
lng: -87.6500523
});
fusion_layers_map.loadFromFusionTables({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
},
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent('You clicked here!');
infoWindow.setPosition(point.latLng);
infoWindow.open(fusion_layers_map.map);
}
}
});
// KML and GeoRSS Layers
// ------------------------------
infoWindow = new google.maps.InfoWindow({});
kml_layers_map = new GMaps({
div: '#kml-layers',
zoom: 12,
lat: 40.65,
lng: -73.95
});
kml_layers_map.loadFromKML({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss',
suppressInfoWindows: true,
events: {
click: function(point){
infoWindow.setContent(point.featureData.infoWindowHtml);
infoWindow.setPosition(point.latLng);
infoWindow.open(kml_layers_map.map);
}
}
});
// Map Types
// ------------------------------
map = new GMaps({
div: '#map-types',
lat: -12.043333,
lng: -77.028333,
mapTypeControlOptions: {
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm"]
}
});
map.addMapType("osm", {
getTileUrl: function(coord, zoom) {
return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
});
map.setMapTypeId("osm");
// Overlay Map Types
// ------------------------------
var getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.background = 'rgba(250, 250, 250, 0.55)';
div.style.fontFamily = 'Monaco, Andale Mono, Courier New, monospace';
div.style.fontSize = '10';
div.style.fontWeight = 'bolder';
div.style.border = 'dotted 1px #aaa';
div.style.textAlign = 'center';
div.style.lineHeight = this.tileSize.height + 'px';
return div;
};
map = new GMaps({
el: '#overlay-map-types',
lat: -12.043333,
lng: -77.028333
});
map.addOverlayMapType({
index: 0,
tileSize: new google.maps.Size(256, 256),
getTile: getTile
});
// Street View Panoramas
// ------------------------------
panorama = GMaps.createPanorama({
el: '#street-view-panoramas',
lat : 42.3455,
lng : -71.0983
});
// Interacting with UI
// ------------------------------
var map;
// Update position
$(document).on('submit', '.edit_marker', function(e) {
e.preventDefault();
var $index = $(this).data('marker-index');
$lat = $('#marker_' + $index + '_lat').val();
$lng = $('#marker_' + $index + '_lng').val();
var template = $('#edit_marker_template').text();
// Update form values
var content = template.replace(/{{index}}/g, $index).replace(/{{lat}}/g, $lat).replace(/{{lng}}/g, $lng);
map.markers[$index].setPosition(new google.maps.LatLng($lat, $lng));
map.markers[$index].infoWindow.setContent(content);
$marker = $('#markers-with-coordinates').find('li').eq(0).find('a');
$marker.data('marker-lat', $lat);
$marker.data('marker-lng', $lng);
});
// Update center
$(document).on('click', '.pan-to-marker', function(e) {
e.preventDefault();
var lat, lng;
var $index = $(this).data('marker-index');
var $lat = $(this).data('marker-lat');
var $lng = $(this).data('marker-lng');
if ($index != undefined) {
// using indices
var position = map.markers[$index].getPosition();
lat = position.lat();
lng = position.lng();
}
else {
// using coordinates
lat = $lat;
lng = $lng;
}
map.setCenter(lat, lng);
});
map = new GMaps({
div: '#interact-ui',
lat: -12.043333,
lng: -77.028333,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#193341"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#2c5a71"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#29768a"},{"lightness":-37}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#406d80"}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#3e606f"},{"weight":2},{"gamma":0.84}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":0.6},{"color":"#1a3541"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#2c5a71"}]}]
});
GMaps.on('marker_added', map, function(marker) {
$('#markers-with-index').append('<li><a href="#" class="pan-to-marker" data-marker-index="' + map.markers.indexOf(marker) + '">' + marker.title + '</a></li>');
$('#markers-with-coordinates').append('<li><a href="#" class="pan-to-marker" data-marker-lat="' + marker.getPosition().lat() + '" data-marker-lng="' + marker.getPosition().lng() + '">' + marker.title + '</a></li>');
});
GMaps.on('click', map.map, function(event) {
var index = map.markers.length;
var lat = event.latLng.lat();
var lng = event.latLng.lng();
var template = $('#edit_marker_template').text();
var content = template.replace(/{{index}}/g, index).replace(/{{lat}}/g, lat).replace(/{{lng}}/g, lng);
map.addMarker({
lat: lat,
lng: lng,
title: 'Marker #' + index,
infoWindow: {
content : content
}
});
});
// Working with JSON
// ------------------------------
var json_map;
function loadResults (data) {
var items, markers_data = [];
if (data.venues.length > 0) {
items = data.venues;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.location.lat != undefined && item.location.lng != undefined) {
var icon = 'https://foursquare.com/img/categories/food/default.png';
markers_data.push({
lat : item.location.lat,
lng : item.location.lng,
title : item.name,
icon : {
size : new google.maps.Size(32, 32),
url : icon
}
});
}
}
}
json_map.addMarkers(markers_data);
}
function printResults(data) {
$('#foursquare-results').text(JSON.stringify(data));
}
$(document).on('click', '.pan-to-marker', function(e) {
e.preventDefault();
var position, lat, lng, $index;
$index = $(this).data('marker-index');
position = json_map.markers[$index].getPosition();
lat = position.lat();
lng = position.lng();
json_map.setCenter(lat, lng);
});
json_map = new GMaps({
div: '#json',
lat: -12.043333,
lng: -77.028333,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});
json_map.on('marker_added', function (marker) {
var index = json_map.markers.indexOf(marker);
$('#results').append('<li><a href="#" class="pan-to-marker" data-marker-index="' + index + '">' + marker.title + '</a></li>');
if (index == json_map.markers.length - 1) {
json_map.fitZoom();
}
});
var xhr = $.getJSON('../../../app-assets/data/gmaps/foursquare.json?q[near]=Lima,%20PE&q[query]=Ceviche');
xhr.done(printResults);
xhr.done(loadResults);
});
// Resize Map
// ------------------------------
/*$(function () {
// Resize map on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
drawLine();
}
});*/
Zerion Mini Shell 1.0