Skip to content

Commit 878e6a9

Browse files
frankpaganfrankpagan
committed
fix: update packages, add uuid, add data-parse to demos
1 parent dccfc15 commit 878e6a9

File tree

7 files changed

+1237
-0
lines changed

7 files changed

+1237
-0
lines changed

‎src/animate.js‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
// import CoCreateMap from './map'
2+
3+
/* global CoCreateMap google */
4+
var CoCreateMapAnimate = function() {
5+
// variables
6+
this.animators = [];
7+
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"};
8+
9+
// selectors
10+
this.mapDivSelector = ".google_map";
11+
// initialize
12+
13+
this.init();
14+
15+
// functions
16+
this.__proto__.init = function() {
17+
let maps = document.querySelectorAll(".google_map[data-map_id]");
18+
for (let map of maps) {
19+
this.animators[map.dataset.map_id] = {};
20+
}
21+
};
22+
23+
// this.errHandler = function(err, _this) {
24+
// _this.__proto__.errHandler(err);
25+
// };
26+
27+
this.__proto__.showPosition = function(){
28+
console.log("showing Position")
29+
let option = {timeout:5000};
30+
if (navigator.geolocation) this.watchID = navigator.geolocation.watchPosition(
31+
position=>{
32+
this.showLocation(position)
33+
},
34+
err=>{
35+
this.errHandler(err)
36+
}, option);
37+
else alert("Sorry, your browser does not support HTML5 geolocation.");
38+
};
39+
40+
this.__proto__.showLocation = function(position) {
41+
if (!this.checkAnimator('simon')) {
42+
this.__proto__.showLocation(position);
43+
}
44+
this.addAnimator('simon',{'lat':position.coords.latitude,'lng':position.coords.longitude})
45+
}
46+
47+
48+
this.errorCallback=function(error){
49+
if(error.code == 1) console.log("You've decided not to share your position, but it's OK. We won't ask you again.");
50+
else if(error.code == 2) console.log("The network is down or the positioning service can't be reached.");
51+
else if(error.code == 3) console.log("The attempt timed out before it could get the location data.");
52+
else console.log("Geolocation failed due to unknown error.");
53+
};
54+
55+
this.checkAnimator = function(key, map_id = 0) {
56+
return this.animators[map_id][key] !== undefined;
57+
};
58+
59+
this.removeAnimator = function(key, map_id = 0) {
60+
this.animators[map_id][key]['marker'].setMap(null);
61+
};
62+
63+
this.addAnimator = function(key, location, icon_obj, map_id = 0) {
64+
icon_obj = icon_obj === undefined ? this.icon : icon_obj;
65+
let angle = 0;
66+
if (this.checkAnimator(key)) {
67+
let icon = { // animator icon
68+
path: icon_obj.path,
69+
scale: 0.5,
70+
fillColor: icon_obj.color, //<-- Animator Color, you can change it
71+
fillOpacity: 1,
72+
strokeWeight: 1,
73+
anchor: new google.maps.Point(0, 5),
74+
rotation: angle//<-- Animator angle
75+
};
76+
console.log(icon);
77+
this.animators[map_id][key]['marker'].setIcon(icon);
78+
this.animatedMove(key, location);
79+
}
80+
else {
81+
let icon = { // animator icon
82+
path: icon_obj.path,
83+
scale: 0.5,
84+
fillColor: icon_obj.color, //<-- Animator Color, you can change it
85+
fillOpacity: 1,
86+
strokeWeight: 1,
87+
anchor: new google.maps.Point(0, 5),
88+
rotation: angle//<-- Animator angle
89+
};
90+
// var curLocation = { lat: location.lat, lng: location.lng };
91+
92+
let marker_id = this.setMarker(map_id, {
93+
position: location,
94+
icon: icon,
95+
title : key
96+
});
97+
//if(key == getCookie('user_email')){
98+
this.maps[map_id].setCenter(this.markers[map_id][marker_id].getPosition());
99+
//}
100+
this.animators[map_id][key] = {};
101+
this.animators[map_id][key]['loc'] = location;
102+
this.animators[map_id][key]['angle'] = angle;
103+
this.animators[map_id][key]['timestamp'] = new Date();
104+
this.animators[map_id][key]['marker'] = this.markers[map_id][marker_id];
105+
this.animators[map_id][key]['icon'] = icon_obj;
106+
}
107+
};
108+
109+
this.animatedMove = function(key, locMoveto, map_id = 0) {
110+
//this.removeAnimator(key);
111+
let animator = this.animators[map_id][key];
112+
let marker = animator['marker'];
113+
let icon = animator['icon'];
114+
let current = marker.position;
115+
let angle = this.bearingBetweenLocations(animator['loc'],locMoveto);
116+
if(!locMoveto.timestamp) locMoveto['timestamp'] = new Date();
117+
118+
let deltalat = (locMoveto.lat - current.lat()) / 100;
119+
let deltalng = (locMoveto.lng - current.lng()) / 100;
120+
let deltaangle = this.deltaAngle(angle, animator.angle) / 100;
121+
let deltatime = (locMoveto["timestamp"].getSeconds() - animator.timestamp.getSeconds());
122+
let pangle = animator.angle;
123+
pangle = this.currentAngle(pangle, deltaangle);
124+
let delay = deltatime;
125+
// let d = new Date();
126+
// let p = d.getTime();
127+
for (let i = 0; i < 100; i++) {
128+
(function(ind) {
129+
setTimeout(
130+
function() {
131+
let latlng = null;
132+
let myicon = null;
133+
let lat = marker.position.lat();
134+
let lng = marker.position.lng();
135+
lat += deltalat;
136+
lng += deltalng;
137+
138+
// pangle += deltaangle;
139+
myicon = { // animator icon
140+
path: icon['path'],
141+
scale: 0.5,
142+
fillColor: icon['color'], //<-- Animator Color, you can change it
143+
fillOpacity: 1,
144+
strokeWeight: 1,
145+
anchor: new google.maps.Point(0, 5),
146+
rotation: pangle //<-- Animator angle
147+
};
148+
149+
latlng = new google.maps.LatLng(lat, lng);
150+
marker.setPosition(latlng);
151+
marker.setIcon(myicon);
152+
// d = new Date();
153+
}, ind*delay*10 );
154+
})(i);
155+
}
156+
157+
this.animators[map_id][key]['loc'] = locMoveto;
158+
this.animators[map_id][key]['angle'] = angle;
159+
this.animators[map_id][key]['timestamp'] = locMoveto['timestamp'];
160+
this.animators[map_id][key]['marker'] = marker;
161+
};
162+
163+
this.bearingBetweenLocations = function(loc1, loc2) {
164+
let RADTODEG = 180 / Math.PI;
165+
let lat1 = loc1.lat / RADTODEG;
166+
let long1 = loc1.lng / RADTODEG;
167+
let lat2 = loc2.lat / RADTODEG;
168+
let long2 = loc2.lng / RADTODEG;
169+
let dLon = (long2 - long1);
170+
let y = Math.sin(dLon) * Math.cos(lat2);
171+
let x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
172+
let brng = Math.atan2(y, x);
173+
brng = brng * RADTODEG;
174+
brng = (brng + 360) % 360;
175+
return brng;
176+
};
177+
178+
this.deltaAngle = function(CurrentAngle, PreviousAngle){
179+
let delta = CurrentAngle - PreviousAngle;
180+
return delta;
181+
};
182+
183+
this.currentAngle = function(current , delta){
184+
if (current+delta<0 ) {
185+
return 360+(current+delta);
186+
} else if (current+delta>360) {
187+
return (current+delta)%360;
188+
} else{
189+
return current+delta;
190+
}
191+
};
192+
193+
// this.simulate = function(){
194+
// cocreateLocation.addAnimator('jean',{'lat':20.9182675,'lng':-100.7446703})
195+
// // entre 0 y 9
196+
// for(var i=0;i<=100;i++){
197+
// setTimeout(function(){
198+
// var lat = parseFloat('20.918'+Math.floor(Math.random() * 10)+'675');
199+
// var lng = parseFloat('-100.744'+Math.floor(Math.random() * 10)+'703');
200+
// cocreateLocation.addAnimator('jean',{'lat':lat,'lng':lng})
201+
// },5000);
202+
// }
203+
// };
204+
205+
CoCreateMap.call(this);
206+
};
207+
208+
CoCreateMapAnimate.prototype = Object.create(CoCreateMap.prototype);
209+
CoCreateMapAnimate.prototype.constructor = CoCreateMapAnimate;
210+
211+
// functions for prototype
212+
213+
// declaration

‎src/archive/autocomplete.1.js‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import CoCreateMap from './map'
2+
3+
/* global CoCreateMap onlyUnique, google, stripHtml */
4+
var CoCreateMapAutocomplete = function() {
5+
// variables
6+
// this.depth = 1;
7+
this.componentForm = {
8+
location: '',
9+
street_number: '',
10+
route: '',
11+
locality: '',
12+
administrative_area_level_1: '',
13+
administrative_area_level_2: '',
14+
administrative_area_level_3: '',
15+
city: '',
16+
country: '',
17+
country_code: '',
18+
postal_code: '',
19+
new_param1: '',
20+
new_param2: ''
21+
};
22+
// selectors
23+
this.mapDivSelector = ".google_map";
24+
this.autocompleteSelector = '[data-map_autocomplete="true"]';
25+
this.searchSelector = ".main-search";
26+
27+
// initialize
28+
// this.__proto__.init();
29+
this.init();
30+
31+
// functions
32+
this.init = function() {
33+
this.initComponentForm();
34+
this.initAutoComplete();
35+
};
36+
this.initComponentForm = function() {
37+
for (var key in this.componentForm) {
38+
var input_item = document.querySelector("input[data-place=" + key + "]");
39+
if (input_item) this.componentForm[key] = input_item.dataset.place_value_type ? input_item.dataset.place_value_type : "long_name";
40+
else this.componentForm[key] = "long_name";
41+
}
42+
};
43+
this.initAutoComplete = function() {
44+
let _this = this;
45+
let places = document.querySelectorAll("[data-place]");
46+
let ids = [];
47+
for (let item of places) {
48+
ids.push(item.dataset.place_id);
49+
}
50+
let place_type_json = {'address':'address','administrative_area_level_2':'(cities)','region_country':'(regions)','establishment':'establishment'};
51+
ids = ids.filter(onlyUnique);
52+
ids.forEach(function(element, index){
53+
let place_id = element;
54+
let autocomplete_item = document.querySelectorAll(`${_this.autocompleteSelector}[data-place_id='${place_id}']`);
55+
// let fieldSetting = ['address_components', 'geometry', 'icon', 'name'];
56+
autocomplete_item.forEach(function(element, j){
57+
let autocomplete;
58+
let place_type = element.dataset.place;
59+
// if(Object.keys(place_type_json).indexOf(place_type)!=-1)
60+
if (place_type_json[place_type] !== undefined) autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:[place_type_json[place_type]]});
61+
/*if (place_type == "address") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['address']});
62+
if (place_type == "administrative_area_level_2") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['(cities)']});
63+
if (place_type == "region_country") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['(regions)']});
64+
if (place_type == "establishment") autocomplete = new google.maps.places.Autocomplete(autocomplete_item.item(j), {types:['establishment']});*/
65+
// else autocomplete.setFields(fieldSetting); // omit for all fields
66+
if (element.matches(_this.searchSelector))
67+
autocomplete.addListener('place_changed', function() {
68+
let place = autocomplete.getPlace();
69+
let placeInfo = {};
70+
placeInfo["place_id"] = element.dataset.place_id;
71+
placeInfo["google_place_id"] = place.place_id;
72+
placeInfo["address_components"] = place.address_components;
73+
if (place.adr_address) placeInfo["adr_address"] = stripHtml(place.adr_address);
74+
placeInfo["longitude"] = place.geometry.location.lng();
75+
placeInfo["latitude"] = place.geometry.location.lat();
76+
placeInfo["show_map"] = element.dataset.direction != "destination" || element.dataset.autodirection == "false";
77+
_this.renderAutoComplete(placeInfo);
78+
});
79+
});
80+
});
81+
};
82+
83+
this.objToAtt = function(object, attributeName, addInfo = "", parentInfo = "") {
84+
let result = {};
85+
for (let key in object) {
86+
if (key == "address_components") {
87+
for (let data of object[key]) {
88+
let type = data.types[0];
89+
result[type] = data.long_name;
90+
if (type == "country") {
91+
result["country_code"] = data.short_name;
92+
result["region_country"] = data.long_name;
93+
}
94+
if (type == "administrative_area_level_1" && !result["administrative_area_level_2"]) result["administrative_area_level_2"] = data.long_name;
95+
}
96+
}
97+
else if (key == "adr_address") result["address"] = object[key];
98+
else if (key == "place_id") continue;
99+
else if (key == "google_place_id") result["place_id"] = object[key];
100+
else result[key] = object[key];
101+
}
102+
this.__proto__.objToAtt(result, attributeName, addInfo, parentInfo);
103+
};
104+
105+
this.renderAutoComplete = function(place) {
106+
let place_id = place.place_id;
107+
this.objToAtt(place, "place", `[data-place_id='${place_id}']`);
108+
let longitude = document.querySelector(`[data-place='longitude'][data-place_id='${place_id}']`);
109+
let latitude = document.querySelector(`[data-place='latitude'][data-place_id='${place_id}']`);
110+
if (longitude && latitude) {
111+
if ("createEvent" in document) {
112+
var evt = document.createEvent("HTMLEvents");
113+
evt.initEvent("change", false, true);
114+
longitude.dispatchEvent(evt);
115+
latitude.dispatchEvent(evt);
116+
}
117+
else {
118+
longitude.fireEvent("onchange");
119+
latitude.fireEvent("onchange");
120+
}
121+
}
122+
if (place.show_map) {
123+
var map_id = document.querySelector(`[data-place_id='${place_id}']`).dataset.map_id;
124+
var mapDiv = document.querySelector(`${this.mapDivSelector}[data-map_id='${map_id}']`);
125+
if (mapDiv) {
126+
mapDiv.dataset.map_lng = place.longitude;
127+
mapDiv.dataset.map_lat = place.latitude;
128+
}
129+
}
130+
};
131+
132+
CoCreateMap.call(this);
133+
};
134+
135+
CoCreateMapAutocomplete.prototype = Object.create(CoCreateMap.prototype);
136+
CoCreateMapAutocomplete.prototype.constructor = CoCreateMapAutocomplete;
137+
138+
export default CoCreateMapAutocomplete;
139+
// functions for prototype
140+
141+
// declaration

0 commit comments

Comments
 (0)