I really like to work with data and maps, lately i've been building many features that show information on maps, so i'm going to share a single page application(SPA) and you'll see how to use markers, icons, trigger events, modules, controllers, factories, etc.
I'm deploying on heroku servers, in this part we only going to build frontend features and on the next part i'm going to explain how to Lift a SailsJS System(NodeJS Framework) but that is not required this time.
Link Online Demo GeoTepic Dummy Data Locations Link Google Maps Javascript API1. Get a Key to Activate the Google Maps JavaScript API just follow the instructions, the link is above.
2. Make your base index.html file, add your key and edit script tag removing async defer, open your index.html and verify your map is rendering correctly.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"> </script>
Simple Map HTML Demo
3. Add your *.js files, your directory should look like this.
- index.html
- app.js
- services.js
- controllers.js
4. Add angular source, edit script tags into index.html to load our javascript files, also remove javascript code initMap and callback.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"> </script>
Is very important load file order.
Code Time!
app.js
var geoTepic = angular.module("geoTepic",['services']);
services.js
angular.module("services",[])
.factory('Maps',function(){
var map;
var locations = [
['Usuario 0 - TEPIC,CENTRO,12 DE OCTUBRE,127,SUR',21.503467,-104.886948],
['Usuario 1 - TEPIC,CENTRO,AMADO NERVO,185,PTE',21.5129563,-104.894431],
['Usuario 2 - TEPIC,CENTRO,AMADO NERVO,281,B',21.514196,-104.896412],
['Usuario 4 - TEPIC,CENTRO,AMADO NERVO,70,',21.5122524,-104.8912251],
['Usuario 5 - TEPIC,CENTRO,AV ALLENDE,318,',21.510708,-104.898282],
['Usuario 6 - TEPIC,CENTRO,AV INSURGENTES,68,INT 2',21.493551,-104.881468],
['Usuario 7 - TEPIC,CENTRO,AV INSURGENTES,68,2',21.493551,-104.881468],
['Usuario 8 - TEPIC,CENTRO,AV JUAN ESCUTIA,374,',21.516871,-104.897214],
['Usuario 9 - TEPIC,CENTRO,AV JUAREZ,276,',21.5043529,-104.8895305],
['Usuario 10 - TEPIC,CENTRO,AV JUAREZ,30,2',21.5068329,-104.8956021],
['Usuario 11 - TEPIC,CENTRO,AV JUAREZ,331 A,',21.5042512,-104.889126],
['Usuario 12 - TEPIC,CENTRO,AV JUAREZ,331 A,OTE',21.5042512,-104.889126],
['Usuario 13 - TEPIC,CENTRO,AV MEXICO,175,SUR',21.511055,-104.89186],
['Usuario 14 - TEPIC,CENTRO,AV MEXICO,175,',21.511055,-104.89186],
['Usuario 15 - TEPIC,CENTRO,AV MEXICO,212,NTE',21.5116283,-104.8938392],
['Usuario 16 - TEPIC,CENTRO,EMILIANO ZAPATA,174,PTE',21.5105715,-104.8966603],
['Usuario 17 - TEPIC,CENTRO,EMILIANO ZAPATA,196,A',21.508376,-104.888522],
['Usuario 18 - TEPIC,CENTRO,EMILIANO ZAPATA,196,PTE',21.5113285,-104.8966639],
['Usuario 20 - TEPIC,CENTRO,EMILIANO ZAPATA,240,',21.5080162,-104.8884508],
['Usuario 21 - TEPIC,CENTRO,EMILIANO ZAPATA,317,',21.5120703,-104.899812],
['Usuario 22 - TEPIC,CENTRO,EMILIANO ZAPATA,489,OTE',21.505476,-104.883253],
['Usuario 23 - TEPIC,CENTRO,GUADALAJARA,138,',21.50732,-104.884859],
['Usuario 24 - TEPIC,CENTRO,GUADALAJARA,1947,',21.510918,-104.883153],
['Usuario 25 - TEPIC,CENTRO,GUADALUPE VICTORIA,118,OTE',21.513335,-104.887801],
['Usuario 26 - TEPIC,CENTRO,JAVIER MINA,317,',21.508595,-104.899307],
['Usuario 27 - TEPIC,CENTRO,LA PAZ,9,',21.514168,-104.894667],
['Usuario 28 - TEPIC,CENTRO,LEON,27,A SUR',21.509751,-104.897148],
['Usuario 29 - TEPIC,CENTRO,LEON,36,SUR',21.50948,-104.897345],
['Usuario 30 - TEPIC,CENTRO,LEON,70,',21.511148,-104.896583],
['Usuario 32 - TEPIC,CENTRO,LERDO,161,',21.8104707,-105.2145254],
['Usuario 33 - TEPIC,CENTRO,LERDO,351,OTE',21.508659,-104.884605],
['Usuario 34 - TEPIC,CENTRO,LERDO,374,',21.508483,-104.884336],
['Usuario 35 - TEPIC,CENTRO,MIGUEL HIDALGO,183,',21.5093655,-104.8905559],
['Usuario 36 - TEPIC,CENTRO,MIGUEL HIDALGO,365,OTE',21.507879,-104.885024],
['Usuario 37 - TEPIC,CENTRO,MIGUEL HIDALGO,365,OTE',21.507879,-104.885024],
['Usuario 38 - TEPIC,CENTRO,MIÑON,118,',21.507554,-104.899927],
['Usuario 39 - TEPIC,CENTRO,MIÑON,161 INT 16,PTE',21.5075995,-104.9007114],
['Usuario 40 - TEPIC,CENTRO,MIÑON,161 INT 16,PTE',21.5075995,-104.9007114],
['Usuario 41 - TEPIC,CENTRO,MIÑON,161 INT 16,PTE',21.5075995,-104.9007114],
['Usuario 42 - TEPIC,CENTRO,MONTERREY,88,',21.515229,-104.896216],
['Usuario 43 - TEPIC,CENTRO,MORELIA,260,',21.514561,-104.896875],
['Usuario 44 - TEPIC,CENTRO,MORELIA,331,',21.515724,-104.896889],
['Usuario 45 - TEPIC,CENTRO,MORELOS,164, OTE',21.508099,-104.88931],
['Usuario 46 - TEPIC,CENTRO,NICOLAS BRAVO,373,',21.516231,-104.897149],
['Usuario 47 - TEPIC,CENTRO,NICOLAS BRAVO,77,OTE',21.513998,-104.891384],
['Usuario 48 - TEPIC,CENTRO,OAXACA,76,',21.509319,-104.899764],
['Usuario 49 - TEPIC,CENTRO,PEDRAZA,3,',21.522143,-104.902504],
['Usuario 50 - TEPIC,CENTRO,QUERETARO,123,SUR',21.511721,-104.895551],
['Usuario 52 - TEPIC,CENTRO,QUERETARO,345,NTE',21.514363,-104.8946215],
['Usuario 53 - TEPIC,CENTRO,RIO SANTIAGO,8,',21.513284,-104.8879989],
['Usuario 54 - TEPIC,CENTRO,RIO SANTIAGO,8,',21.513284,-104.8879989],
['Usuario 55 - TEPIC,CENTRO,RIO SANTIAGO,8,',21.513284,-104.8879989],
['Usuario 56 - TEPIC,CENTRO,SAN LUIS,146,SUR',21.505351,-104.892565],
['Usuario 57 - TEPIC,CENTRO,SEBASTIAN LERDO DE TEJADA,161,OTE',21.512557,-104.894271],
['Usuario 58 - TEPIC,CENTRO,SEBASTIAN LERDO DE TEJADA,161,OTE',21.512557,-104.894271],
['Usuario 59 - TEPIC,CENTRO,SEBASTIAN LERDO DE TEJADA,212,OTE',21.51292,-104.895156],
['Usuario 60 - TEPIC,CENTRO,SEBASTIAN LERDO DE TEJADA,351,',21.513842,-104.897877],
['Usuario 61 - TEPIC,CENTRO,URES,136,',21.505121,-104.891341],
['Usuario 62 - TEPIC,CENTRO,URES,195,SUR',21.503423,-104.892282],
['Usuario 63 - TEPIC,CENTRO,URES,195,SUR',21.503423,-104.892282],
['Usuario 64 - TEPIC,CENTRO,URES,269,',21.511301,-104.888239],
['Usuario 65 - TEPIC,CENTRO,URES,269,',21.511301,-104.888239],
['Usuario 66 - TEPIC,CENTRO,URES,283,',21.511545,-104.888105],
['Usuario 67 - TEPIC,CENTRO,VERACRUZ,111,',21.5106545,-104.8951769],
['Usuario 68 - TEPIC,CENTRO,VERACRUZ,111,SUR',21.506826,-104.894418],
['Usuario 69 - TEPIC,CENTRO,VERACRUZ,131,SUR',21.506396,-104.894653],
['Usuario 70 - TEPIC,CENTRO,VERACRUZ,131,SUR',21.506396,-104.894653],
['Usuario 71 - TEPIC,CENTRO,VERACRUZ,131,SUR',21.506396,-104.894653],
['Usuario 72 - TEPIC,CENTRO,VERACRUZ,195,',21.5116916,-104.8947204],
['Usuario 77 - TEPIC,CENTRO,VERACRUZ,20,NTE',21.5092926,-104.8956731],
['Usuario 78 - TEPIC,CENTRO,VERACRUZ,295,NTE',21.5131696,-104.8941737],
['Usuario 79 - TEPIC,CENTRO,VERACRUZ,398,NTE',21.515286,-104.8931421],
['Usuario 80 - TEPIC,CENTRO,VERACRUZ,42,',21.508968,-104.8945212],
['Usuario 81 - TEPIC,CENTRO,VICENTE GUERRERO,139,',21.510593,-104.887769],
['Usuario 82 - TEPIC,CENTRO,VICENTE GUERRERO,155,ALTOS',21.51005,-104.8887282],
['Usuario 83 - TEPIC,CENTRO,VICENTE GUERRERO,155,',21.510327,-104.887205],
['Usuario 84 - TEPIC,CENTRO,VICENTE GUERRERO,177,',21.51027,-104.886871],
['Usuario 85 - TEPIC,CENTRO,VICENTE GUERRERO,324,OTE',21.509115,-104.8841],
['Usuario 86 - TEPIC,CENTRO,ZACATECAS,156,SUR',21.505168,-104.893425],
['Usuario 87 - TEPIC,CENTRO,ZACATECAS,17 INT 4,SUR',21.509473,-104.891529],
['Usuario 88 - TEPIC,CENTRO,ZACATECAS,17 INT 4,SUR',21.509473,-104.891529],
['Usuario 89 - TEPIC,CENTRO,ZACATECAS,317,',21.509847,-104.891346],
['Usuario 90 - TEPIC,CENTRO,ZACATECAS,39 C,SUR',21.507671,-104.892275],
];
var init = function() {
var mapOptions = {
center: new google.maps.LatLng(21.5051491,-104.8817412),
zoom: 14,
disableDefaultUI: true,
};
var styles = [
{
stylers: [ { hue: "#00ffe6" }, { saturation: -20 } ]
},
{
featureType: "road",
elementType: "geometry",
stylers: [ { lightness: 100 }, { visibility: "simplified" } ]
},
{
featureType: "road",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}
];
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setOptions({styles: styles});
}
return {
init: function(){
return init();
},
locations: function(){
return locations;
},
map: function(){
return map;
}
}
});
controllers.js
geoTepic.controller("cpanelController",["$scope","$http","Maps",function($scope, $http, Maps){
$scope.locations = Maps.locations();
$scope.drawLocations = function(){
$scope.map = Maps.map();
$scope.markers = {}
var infowindow = new google.maps.InfoWindow();
var marker, i;
var man = 'https://maps.gstatic.com/mapfiles/ms2/micons/man.png'
for (i = 0; i < $scope.locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng($scope.locations[i][1], $scope.locations[i][2]),
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: man
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
data = $scope.locations[i][0].split("-");
ubication = data[1].split(",");
marker.setAnimation(google.maps.Animation.DROP);
$scope.map.setCenter(marker.getPosition());
infowindow.setContent(""+data[0]+"
"+
"Lugar: "+ubication[0]+""+
"Colonia: "+ubication[1]+""+
"Calle: "+ubication[2]+""+
"Numero: "+ubication[3]);
infowindow.open($scope.map, marker);
}
})(marker, i));
$scope.markers[i] = {marker: marker}
}
};
$scope.isSelected = function(location){
return $scope.selected === location;
};
$scope.showLocation = function(location){
$scope.selected = location;
position = $scope.locations.indexOf(location);
pmarker = $scope.markers[position].marker;
google.maps.event.trigger(pmarker, 'click');
};
$scope.init = function(){
Maps.init();
$scope.drawLocations();
}
}]);
5. We want a side bar list with all our data so let's use our controller functions, add a div cpanel between body and map.
Below body tag add:
6. Open your index.html file on a browser and we should see our map rendered with human icons.
7. Finally only need to organize styles, remove plain style code on index.html and add styles.css.
CSS code!
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
#map {
height: 100%;
}
#cpanel{
position: absolute;
z-index: 1;
right: 0px;
color: teal;
overflow-y: scroll;
height: 100%;
}
.list-group{
padding-left: 0;
margin-bottom: 0px;
margin-top: 0px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #333;
border: 1px solid #ddd;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
a,
a:focus,
a:hover {
color: #fff;
}
Let me know any question!!
No hay comentarios:
Publicar un comentario