%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/gmaps/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/gmaps/utils.js

/*=========================================================================================
    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