Skip to content

Commit

Permalink
fix: update packages, add uuid, add data-parse to demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankpagan
frankpagan committed Jun 6, 2021
1 parent dccfc15 commit 878e6a9
Show file tree
Hide file tree
Showing 7 changed files with 1,237 additions and 0 deletions.
213 changes: 213 additions & 0 deletions src/animate.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
// import CoCreateMap from './map'

/* global CoCreateMap google */
var CoCreateMapAnimate = function() {
// variables
this.animators = [];
this.icon = {"path":"M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759 c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713 v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336 h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805","color":"#e50202"};

// selectors
this.mapDivSelector = ".google_map";
// initialize

this.init();

// functions
this.__proto__.init = function() {
let maps = document.querySelectorAll(".google_map[data-map_id]");
for (let map of maps) {
this.animators[map.dataset.map_id] = {};
}
};

// this.errHandler = function(err, _this) {
// _this.__proto__.errHandler(err);
// };

this.__proto__.showPosition = function(){
console.log("showing Position")
let option = {timeout:5000};
if (navigator.geolocation) this.watchID = navigator.geolocation.watchPosition(
position=>{
this.showLocation(position)
},
err=>{
this.errHandler(err)
}, option);
else alert("Sorry, your browser does not support HTML5 geolocation.");
};

this.__proto__.showLocation = function(position) {
if (!this.checkAnimator('simon')) {
this.__proto__.showLocation(position);
}
this.addAnimator('simon',{'lat':position.coords.latitude,'lng':position.coords.longitude})
}


this.errorCallback=function(error){
if(error.code == 1) console.log("You've decided not to share your position, but it's OK. We won't ask you again.");
else if(error.code == 2) console.log("The network is down or the positioning service can't be reached.");
else if(error.code == 3) console.log("The attempt timed out before it could get the location data.");
else console.log("Geolocation failed due to unknown error.");
};

this.checkAnimator = function(key, map_id = 0) {
return this.animators[map_id][key] !== undefined;
};

this.removeAnimator = function(key, map_id = 0) {
this.animators[map_id][key]['marker'].setMap(null);
};

this.addAnimator = function(key, location, icon_obj, map_id = 0) {
icon_obj = icon_obj === undefined ? this.icon : icon_obj;
let angle = 0;
if (this.checkAnimator(key)) {
let icon = { // animator icon
path: icon_obj.path,
scale: 0.5,
fillColor: icon_obj.color, //<-- Animator Color, you can change it
fillOpacity: 1,
strokeWeight: 1,
anchor: new google.maps.Point(0, 5),
rotation: angle//<-- Animator angle
};
console.log(icon);
this.animators[map_id][key]['marker'].setIcon(icon);
this.animatedMove(key, location);
}
else {
let icon = { // animator icon
path: icon_obj.path,
scale: 0.5,
fillColor: icon_obj.color, //<-- Animator Color, you can change it
fillOpacity: 1,
strokeWeight: 1,
anchor: new google.maps.Point(0, 5),
rotation: angle//<-- Animator angle
};
// var curLocation = { lat: location.lat, lng: location.lng };

let marker_id = this.setMarker(map_id, {
position: location,
icon: icon,
title : key
});
//if(key == getCookie('user_email')){
this.maps[map_id].setCenter(this.markers[map_id][marker_id].getPosition());
//}
this.animators[map_id][key] = {};
this.animators[map_id][key]['loc'] = location;
this.animators[map_id][key]['angle'] = angle;
this.animators[map_id][key]['timestamp'] = new Date();
this.animators[map_id][key]['marker'] = this.markers[map_id][marker_id];
this.animators[map_id][key]['icon'] = icon_obj;
}
};

this.animatedMove = function(key, locMoveto, map_id = 0) {
//this.removeAnimator(key);
let animator = this.animators[map_id][key];
let marker = animator['marker'];
let icon = animator['icon'];
let current = marker.position;
let angle = this.bearingBetweenLocations(animator['loc'],locMoveto);
if(!locMoveto.timestamp) locMoveto['timestamp'] = new Date();

let deltalat = (locMoveto.lat - current.lat()) / 100;
let deltalng = (locMoveto.lng - current.lng()) / 100;
let deltaangle = this.deltaAngle(angle, animator.angle) / 100;
let deltatime = (locMoveto["timestamp"].getSeconds() - animator.timestamp.getSeconds());
let pangle = animator.angle;
pangle = this.currentAngle(pangle, deltaangle);
let delay = deltatime;
// let d = new Date();
// let p = d.getTime();
for (let i = 0; i < 100; i++) {
(function(ind) {
setTimeout(
function() {
let latlng = null;
let myicon = null;
let lat = marker.position.lat();
let lng = marker.position.lng();
lat += deltalat;
lng += deltalng;

// pangle += deltaangle;
myicon = { // animator icon
path: icon['path'],
scale: 0.5,
fillColor: icon['color'], //<-- Animator Color, you can change it
fillOpacity: 1,
strokeWeight: 1,
anchor: new google.maps.Point(0, 5),
rotation: pangle //<-- Animator angle
};

latlng = new google.maps.LatLng(lat, lng);
marker.setPosition(latlng);
marker.setIcon(myicon);
// d = new Date();
}, ind*delay*10 );
})(i);
}

this.animators[map_id][key]['loc'] = locMoveto;
this.animators[map_id][key]['angle'] = angle;
this.animators[map_id][key]['timestamp'] = locMoveto['timestamp'];
this.animators[map_id][key]['marker'] = marker;
};

this.bearingBetweenLocations = function(loc1, loc2) {
let RADTODEG = 180 / Math.PI;
let lat1 = loc1.lat / RADTODEG;
let long1 = loc1.lng / RADTODEG;
let lat2 = loc2.lat / RADTODEG;
let long2 = loc2.lng / RADTODEG;
let dLon = (long2 - long1);
let y = Math.sin(dLon) * Math.cos(lat2);
let x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
let brng = Math.atan2(y, x);
brng = brng * RADTODEG;
brng = (brng + 360) % 360;
return brng;
};

this.deltaAngle = function(CurrentAngle, PreviousAngle){
let delta = CurrentAngle - PreviousAngle;
return delta;
};

this.currentAngle = function(current , delta){
if (current+delta<0 ) {
return 360+(current+delta);
} else if (current+delta>360) {
return (current+delta)%360;
} else{
return current+delta;
}
};

// this.simulate = function(){
// cocreateLocation.addAnimator('jean',{'lat':20.9182675,'lng':-100.7446703})
// // entre 0 y 9
// for(var i=0;i<=100;i++){
// setTimeout(function(){
// var lat = parseFloat('20.918'+Math.floor(Math.random() * 10)+'675');
// var lng = parseFloat('-100.744'+Math.floor(Math.random() * 10)+'703');
// cocreateLocation.addAnimator('jean',{'lat':lat,'lng':lng})
// },5000);
// }
// };

CoCreateMap.call(this);
};

CoCreateMapAnimate.prototype = Object.create(CoCreateMap.prototype);
CoCreateMapAnimate.prototype.constructor = CoCreateMapAnimate;

// functions for prototype

// declaration
141 changes: 141 additions & 0 deletions src/archive/autocomplete.1.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import CoCreateMap from './map'

/* global CoCreateMap onlyUnique, google, stripHtml */
var CoCreateMapAutocomplete = function() {
// variables
// this.depth = 1;
this.componentForm = {
location: '',
street_number: '',
route: '',
locality: '',
administrative_area_level_1: '',
administrative_area_level_2: '',
administrative_area_level_3: '',
city: '',
country: '',
country_code: '',
postal_code: '',
new_param1: '',
new_param2: ''
};
// selectors
this.mapDivSelector = ".google_map";
this.autocompleteSelector = '[data-map_autocomplete="true"]';
this.searchSelector = ".main-search";

// initialize
// this.__proto__.init();
this.init();

// functions
this.init = function() {
this.initComponentForm();
this.initAutoComplete();
};
this.initComponentForm = function() {
for (var key in this.componentForm) {
var input_item = document.querySelector("input[data-place=" + key + "]");
if (input_item) this.componentForm[key] = input_item.dataset.place_value_type ? input_item.dataset.place_value_type : "long_name";
else this.componentForm[key] = "long_name";
}
};
this.initAutoComplete = function() {
let _this = this;
let places = document.querySelectorAll("[data-place]");
let ids = [];
for (let item of places) {
ids.push(item.dataset.place_id);
}
let place_type_json = {'address':'address','administrative_area_level_2':'(cities)','region_country':'(regions)','establishment':'establishment'};
ids = ids.filter(onlyUnique);
ids.forEach(function(element, index){
let place_id = element;
let autocomplete_item = document.querySelectorAll(`${_this.autocompleteSelector}[data-place_id='${place_id}']`);
// let fieldSetting = ['address_components', 'geometry', 'icon', 'name'];
autocomplete_item.forEach(function(element, j){
let autocomplete;
let place_type = element.dataset.place;
// if(Object.keys(place_type_json).indexOf(place_type)!=-1)
if (place_type_json[place_type] !== undefined) autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:[place_type_json[place_type]]});
/*if (place_type == "address") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['address']});
if (place_type == "administrative_area_level_2") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['(cities)']});
if (place_type == "region_country") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['(regions)']});
if (place_type == "establishment") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['establishment']});*/
// else autocomplete.setFields(fieldSetting); // omit for all fields
if (element.matches(_this.searchSelector))
autocomplete.addListener('place_changed', function() {
let place = autocomplete.getPlace();
let placeInfo = {};
placeInfo["place_id"] = element.dataset.place_id;
placeInfo["google_place_id"] = place.place_id;
placeInfo["address_components"] = place.address_components;
if (place.adr_address) placeInfo["adr_address"] = stripHtml(place.adr_address);
placeInfo["longitude"] = place.geometry.location.lng();
placeInfo["latitude"] = place.geometry.location.lat();
placeInfo["show_map"] = element.dataset.direction != "destination" || element.dataset.autodirection == "false";
_this.renderAutoComplete(placeInfo);
});
});
});
};

this.objToAtt = function(object, attributeName, addInfo = "", parentInfo = "") {
let result = {};
for (let key in object) {
if (key == "address_components") {
for (let data of object[key]) {
let type = data.types[0];
result[type] = data.long_name;
if (type == "country") {
result["country_code"] = data.short_name;
result["region_country"] = data.long_name;
}
if (type == "administrative_area_level_1" && !result["administrative_area_level_2"]) result["administrative_area_level_2"] = data.long_name;
}
}
else if (key == "adr_address") result["address"] = object[key];
else if (key == "place_id") continue;
else if (key == "google_place_id") result["place_id"] = object[key];
else result[key] = object[key];
}
this.__proto__.objToAtt(result, attributeName, addInfo, parentInfo);
};

this.renderAutoComplete = function(place) {
let place_id = place.place_id;
this.objToAtt(place, "place", `[data-place_id='${place_id}']`);
let longitude = document.querySelector(`[data-place='longitude'][data-place_id='${place_id}']`);
let latitude = document.querySelector(`[data-place='latitude'][data-place_id='${place_id}']`);
if (longitude && latitude) {
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
longitude.dispatchEvent(evt);
latitude.dispatchEvent(evt);
}
else {
longitude.fireEvent("onchange");
latitude.fireEvent("onchange");
}
}
if (place.show_map) {
var map_id = document.querySelector(`[data-place_id='${place_id}']`).dataset.map_id;
var mapDiv = document.querySelector(`${this.mapDivSelector}[data-map_id='${map_id}']`);
if (mapDiv) {
mapDiv.dataset.map_lng = place.longitude;
mapDiv.dataset.map_lat = place.latitude;
}
}
};

CoCreateMap.call(this);
};

CoCreateMapAutocomplete.prototype = Object.create(CoCreateMap.prototype);
CoCreateMapAutocomplete.prototype.constructor = CoCreateMapAutocomplete;

export default CoCreateMapAutocomplete;
// functions for prototype

// declaration
Loading

0 comments on commit 878e6a9

Please sign in to comment.