I have a jQuery plugin that loads content into a certain div. Ignore the drawmap function at the beginning. It only serves in one of the pages. I'm trying to load content into the div while updating the url (not redirecting). For example, if I click on About Us the url will show: calstateautoparts.com/beta/aboutus.html. If I click on contact us the url will show calstateautoparts.com/beta/contactus.html.
Also, I would like to have the plugin load a page in the div by default, home.html. How do I make both of these changes in my code?
You can see the live site at: http://calstateautoparts.com/beta
<script type="text/javascript">
jQuery(function($){
function drawmap(){
new Maplace({
locations: [
{
lat: 33.8583,
lon: -117.8678,
title: 'Anaheim',
html: [
'<h3>Anaheim</h3>',
'<p>1361 N RedGum St, Anaheim CA 92806<br>(714) 630-5954</p>'
].join(''),
zoom: 8
},
{
lat: 34.2358,
lon: -118.5739,
title: 'Chatsworth',
html: [
'<h3>Chatsworth</h3>',
'<p>20233 Corisco St, Chatsworth CA 91311<br>(818) 998-3001</p>'
].join(''),
zoom: 8
},
{
lat: 32.8142,
lon: -117.1247,
title: 'San Diego',
html: [
'<h3>San Diego</h3>',
'<p>4000 Ruffin Road Suite K, San Diego CA 92123<br>(858) 292-1622</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.9137,
lon: -120.4632,
title: 'Santa Maria',
html: [
'<h3>Santa Maria</h3>',
'<p>1459 W. Fairway Dr., Santa Maria CA 93455<br>(805) 922-4445</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.5011,
lon: -117.3279,
title: 'Victorville',
html: [
'<h3>Victorville</h3>',
'<p>15400-B Tamarack Road, Victorville CA 92392<br>(760) 243-5666</p>'
].join(''),
zoom: 8
}
,
{
lat: 36.1605,
lon: -115.1050,
title: 'Las Vegas',
html: [
'<h3>Las Vegas</h3>',
'<p>3101 Builders Ave., Las Vegas, NV 89101<br>(702) 452-2440</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.1677,
lon: -117.2202,
title: 'Vista',
html: [
'<h3>Vista</h3>',
'<p>2055 Thibodo Rd, Vista CA 92081<br>(760) 599-0791</p>'
].join(''),
zoom: 8
}
,
{
lat: 33.6224,
lon: -117.7194,
title: 'Laguna Hills',
html: [
'<h3>Laguna Hills</h3>',
'<p>23561 Ridge Route Suite P, Laguna Hills CA 92653<br>(949) 699-3308</p>'
].join(''),
zoom: 8
}
,
{
lat: 34.4245,
lon: -118.4998,
title: 'Santa Clarita',
html: [
'<h3>Santa Clarita</h3>',
'<p>26846 Oak Ave Unit R, Santa Clarita CA 91315<br>(661) 424-9396</p>'
].join(''),
zoom: 8
}
],
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'Choose a location:'
}).Load();
}
$('.menuitem').click(function(e){
$('#contentarea').load(this.href, $(this).data('loadfunc') || null);
e.preventDefault();
});
$('#contactus').data({loadfunc: drawmap});
});
</script>
Related
I am working on analyzing homes for sale and trying to make them from and object. I've tried modifying the code with solutions from other posts, such as: correcting zoom, coordinates, etc. without any success. Hoping someone can figure this out since I've been at it for over a week.
I am working on a Google Appscript WebApp so I'm not sure if this is causing the errors.
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs&callback=displayMap"></script>
</head>
<body>
<div class= "map" id="map-display">
</body>
</html>
CSS
.map{
height: 400px;
width: 100%;
display: none; //initially hidden until the displayMap() function runs
}
Javascript
// other javascript code goes here that produces the `match` results in the next function
document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed
var mapDisplay = document.getElementById("map-display");
let map;
function displayMap(){
var match = {
address: "2126 Daly St"
baths: 1
beds: 2
built: 1910
city: "Los Angeles"
lat: 34.0702443
lon: -118.2152669
lotSize: 3920
mls: 820000258
price: 410000
ref: 573
state: "CA"
status: "Active"
url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566"
zip: 90031
}
var compsList = [
{address: "2315 Hancock St"
baths: 2
beds: 3
city: "Los Angeles"
lat: 34.0724244
lon: -118.2093106
lotSize: 5500
mls: "RS20015393"
price: 680000
ref: 1505
saleType: "PAST SALE"
sf: 1169
soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
state: "CA"
status: "Sold"
url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949"
zip: 90031
},
{address: "2333 Hancock St"
baths: 2
beds: 3
city: "Los Angeles"
lat: 34.0724248
lon: -118.2093112
lotSize: 5700
mls: "RS20015394"
price: 640000
ref: 1510
saleType: "PAST SALE"
sf: 1171
soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
state: "CA"
status: "Sold"
url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949"
zip: 90031
}
];
var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
var options = {
zoom: 8,
center: {lat: match.lat, lng: match.lon},
mapTypeId: "roadmap"
}
map = new google.maps.Map(mapDisplay, options);
var active = {
coords: {lat: match.lat, lng: match.lon},
content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"
}
addMarkers(active) //function should center the map around active and place the "compList" items with a beachflag
var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
var reformat = {
coords: {lat: c.lat, lng: c.lon},
content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",
icon: compIcon
}
return reformat
}).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center
mapDisplay.style.display = "inline-block";
}
function addMarkers(props){
var marker = new google.maps.Marker({
position: props.coords,
map: map
})
if(props.icon){
marker.setIcon(props.icon)
}
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener("click",function(){
infoWindow.open(map,marker);
})
}
I've tried renaiming the keys from center, position, content to setCenter, setPosition, setContent when I got an error on console but I don't think that's right so I've changed to how the Google documentation has it.
I've tried changing the size of the div and overflow:display but nothing. Any other ideas that can help me get this going? No errors show up on my console so I'm not getting any feedback from Google Maps API....
#haby22. As mentioned in my comments above, in your options you have 'enter' instead of 'center'. You also have 'lgn' instead of 'lng' for longitude in your center settings, and also in your coords.
I also noticed that your match and comp objects were missing commas, so I added them to my example.
I also read that you can pass latitude and longitude as a string then convert to parse to float. So I have done that also.
I commented out your var comps = match.comps.map function because I do not see the code for comps.
EDIT I added this code back based on feedback just for future reference and to follow Bill & Ted's code of excellence. ;)
I also do not have the code you click on so I added an H2 that you can click for the map to appear.
Not sure if this is what you are looking for but here goes nothing:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs"></script>
<style>
.map{
height: 400px;
width: 100%;
display: none;
/* initially hidden until the displayMap() function runs */
}
</style>
</head>
<body>
<h2 id="analysis">Display</h2>
<div class= "map" id="map-display"></div>
<script>
// other javascript code goes here that produces the `match` results in the next function
document.getElementById("analysis").addEventListener("click", displayMap); //when a table is clicked, then the map is meant to be displayed
let mapDisplay = document.getElementById("map-display");
let map;
function displayMap(){
var match = {
address: "2126 Daly St",
baths: 1,
beds: 2,
built: 1910,
city: "Los Angeles",
lat: "34.0702443",
lon: "-118.2152669",
lotSize: 3920,
mls: 820000258,
price: 410000,
ref: 573,
state: "CA",
status: "Active",
url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566",
zip: 90031,
}
var compsList = [
{address: "2315 Hancock St",
baths: 2,
beds: 3,
city: "Los Angeles",
lat: "34.0724244",
lon: "-118.2093106",
lotSize: 5500,
mls: "RS20015393",
price: 680000,
ref: 1505,
saleType: "PAST SALE",
sf: 1169,
soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)",
state: "CA",
status: "Sold",
url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949",
zip: 90031,
},
{address: "2333 Hancock St",
baths: 2,
beds: 3,
city: "Los Angeles",
lat: "34.0724248",
lon: "-118.2093112",
lotSize: 5700,
mls: "RS20015394",
price: 640000,
ref: 1510,
saleType: "PAST SALE",
sf: 1171,
soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)",
state: "CA",
status: "Sold",
url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949",
zip: 90031,
}
];
var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
var options = {
zoom: 8,
center: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)},
mapTypeId: "roadmap"
}
map = new google.maps.Map(mapDisplay, options);
var active = {
coords: {lat: parseFloat(match.lat), lng: parseFloat(match.lon)},
content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"
}
addMarkers(active) //function should center the map around active and place the "compList" items with a beachflag
var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
var reformat = {
coords: {lat: parseFloat(c.lat), lng: parseFloat(c.lon)},
content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",
icon: compIcon
}
return reformat
}).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center
mapDisplay.style.display = "inline-block";
}
function addMarkers(props){
var marker = new google.maps.Marker({
position: props.coords,
map: map
})
if(props.icon){
marker.setIcon(props.icon)
}
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener("click",function(){
infoWindow.open(map,marker);
})
}
}
</script>
</body>
</html>
My goal is to use an if statement to give a value from another variable on my code.
HTML
<div id="countryContainer">
<div class="label">
Country:
</div>
<select id="countryDropDown"
data-bind="options: availableCountries,
optionsText: 'countryName',
value: selectedCountry">
</select>
</div>
Javascript
var mxLocations = [
{title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
{title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
{title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
{title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
{title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
{title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
{title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];
var home = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];
var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""
function getData(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
alert(this.value);
}
// Knockout Constructor
var Country = function(name) {
this.countryName = ko.observable(name);
};
var viewModel = {
availableCountries : ko.observableArray([
new Country("All Locations"),
new Country("Home"),
new Country("Mexico"),
new Country("USA")
]),
selectedCountry : ko.observable() // Nothing selected by default
};
ko.applyBindings(viewModel);
This is what I want to accomplish, if a value from the dropDown menu is selected I want to give the value of a variavle to another variable
function locations() {
if (dropDownValue == "All Locations") {
var locations = allLocations;
} else if (dropDownValue == "Home") {
var locations = home;
} else if (dropDownValue == "Mexico") {
var locations = mxLocations;
} else if (dropDownValue == "USA") {
var locations = usLocations;
I've been looking in all over the place to accomplish this with no result I hope you can address me to the right dirrection
You can subscribe to the selectedCountry observable. The callback function passed as a parameter to the subscribe will be called every time selectedCountry changes.
Here's a working snippet:
var mxLocations = [
{title: 'Monterrey', location: {lat: 25.6475262, lng: -100.4524278 }},
{title: 'Tulum, Quintana Roo', location: {lat: 20.2114185, lng: -87.4653502 }},
{title: 'Tijuana', location: {lat: 32.5335808, lng: -117.1236801 }},
{title: 'Guadalajara', location: {lat: 20.676856, lng: -103.344773 }}
];
var usLocations = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }},
{title: 'Venice Beach', location: {lat: 33.9799948, lng: -118.478614 }},
{title: 'Miami', location: {lat: 25.7825453, lng: -80.2994983 }},
{title: 'Wichita', location: {lat: 37.6647979, lng: -97.5837763 }}
];
var home = [
{title: 'Laredo', location: {lat: 30.3079827, lng: -97.8934848 }}
];
var allLocations = (mxLocations.concat(usLocations)).concat(home);
var locations = ""
var Country = function(name) {
this.countryName = ko.observable(name);
};
var viewModel = {
availableCountries: ko.observableArray([
new Country("All Locations"),
new Country("Home"),
new Country("Mexico"),
new Country("USA")
]),
selectedCountry: ko.observable()
};
viewModel.selectedCountry.subscribe(function(selectedValue) {
if (selectedValue.countryName() == "All Locations") {
locations = allLocations;
} else if (selectedValue.countryName() == "Home") {
locations = home;
} else if (selectedValue.countryName() == "Mexico") {
locations = mxLocations;
} else if (selectedValue.countryName() == "USA") {
locations = usLocations;
}
console.log(locations);
});
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="label">
Country:
</div>
<select id="countryDropDown" data-bind="options: availableCountries,
optionsText: 'countryName',
value: selectedCountry">
</select>
Click on Run code snippet to test it out.
I followed the below reference posted by mikep to handle more than 23 waypoints with premier license, it does handle more than 23 waypoints however it's not considering the optimal route with 28 waypoints. Please find the snippet of code below. Please let me know, if I missed anything.
Reference: Exceed 23 waypoint per request limit on Google Directions API (Business/Work level)
<!DOCTYPE html>
<html>
<head>
<title>Distance Matrix service</title>
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 50%;
}
#right-panel {
float: right;
width: 48%;
padding-left: 2%;
}
#output {
font-size: 11px;
}
</style>
</head>
<body>
<div id="right-panel">
<div id="inputs">
<pre>
var origin1 = {lat: 55.930, lng: -3.118};
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = {lat: 50.087, lng: 14.421};
</pre>
</div>
<div>
<strong>Results</strong>
</div>
<div id="output"></div>
</div>
<div id="map"></div>
<script>
function initMap() {
var service = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'));
// list of points
// list of points
var stations = [
{lat: 42.304403, lng: -89.04231900000002, name: 'Station 1'},
{lat: 42.236168, lng: -88.54327699999999, name: 'Station 2'},
{lat: 42.234782, lng: -88.53974299999999, name: 'Station 3'},
{lat: 42.151208, lng: -88.47053599999998, name: 'Station 4'},
{lat: 42.159458, lng: -88.44529899999998, name: 'Station 5'},
{lat: 42.157442, lng: -88.45886899999999, name: 'Station 6'},
{lat: 42.187703, lng: -88.36313100000001, name: 'Station 7'},
{lat: 42.188238, lng: -88.34060099999999, name: 'Station 8'},
{lat: 42.185022, lng: -88.309731, name: 'Station 9'},
{lat: 42.17901, lng: -88.32207499999998, name: 'Station 10'},
{lat: 42.165468, lng: -88.322519, name: 'Station 11'},
{lat: 41.91145, lng: -88.30584899999997, name: 'Station 12'},
{lat: 41.903634, lng: -88.3133890000000, name: 'Station 13'},
{lat: 41.67167, lng: -88.548182, name: 'Station 14'},
{lat: 41.564786, lng: -88.600822, name: 'Station 15'},
{lat: 41.561587, lng: -88.60028599999998, name: 'Station 16'},
{lat: 41.560347, lng: -88.597355, name: 'Station 17'},
{lat: 41.582568, lng: -88.90418599999998, name: 'Station 18'},
{lat: 41.5849, lng: -88.90929499999999, name: 'Station 19'},
{lat: 41.584279, lng: -88.91100, name: 'Station 20'},
{lat: 41.794906, lng: -88.93928299999999, name: 'Station 21'},
{lat: 41.796471, lng: -88.94241299999999, name: 'Station 22'},
{lat: 41.849191, lng: -89.0242670000000, name: 'Station 23'},
{lat: 41.846972, lng: -89.020418, name: 'Station 24'},
{lat: 41.875845, lng: -88.45214199999998, name: 'Station 25'},
{lat: 42.030196, lng: -88.271702, name: 'Station 26'},
{lat: 42.304403, lng: -89.04231900000002, name: 'Station 27'},
// ... as many other stations as you need
];
// Zoom and center map automatically by stations (each station will be in visible map area)
var lngs = stations.map(function(station) { return station.lng; });
var lats = stations.map(function(station) { return station.lat; });
map.fitBounds({
west: Math.min.apply(null, lngs),
east: Math.max.apply(null, lngs),
north: Math.min.apply(null, lats),
south: Math.max.apply(null, lats),
});
// Show stations on the map as markers
for (var i = 0; i < stations.length; i++) {
new google.maps.Marker({
position: stations[i],
map: map,
title: stations[i].name
});
}
// Divide route to several parts because max stations limit is 25 (23 waypoints + 1 origin + 1 destination)
for (var i = 0, parts = [], max = 25 - 1; i < stations.length; i = i + max)
parts.push(stations.slice(i, i + max + 1));
// Service callback to process service results
var service_callback = function(response, status) {
if (status != 'OK') {
console.log('Directions request failed due to ' + status);
return;
}
var renderer = new google.maps.DirectionsRenderer;
renderer.setMap(map);
renderer.setOptions({ suppressMarkers: true, preserveViewport: true });
renderer.setDirections(response);
};
// Send requests to service to get route (for stations count <= 25 only one request will be sent)
for (var i = 0; i < parts.length; i++) {
// Waypoints does not include first station (origin) and last station (destination)
var waypoints = [];
for (var j = 1; j < parts[i].length - 1; j++)
waypoints.push({location: parts[i][j], stopover: false});
// Service options
var service_options = {
origin: parts[i][0],
destination: parts[i][parts[i].length - 1],
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: 'DRIVING'
};
// Send request
service.route(service_options, service_callback);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABPfm9lb39EOvsKMyrdnwdTJSN8IjqVy0&callback=initMap">
</script>
</body>
</html>
Global minima is not possible in that case using Google's API. We have to have an approximation -
Iteratively, cluster 20-25 points together and generate route based on that; Select one master point from the 20-25 points from each cluster - it can be 1st point/one in the middle by comparing averages etc,.
Generate another calcRoute using cluster's master points. Based on this, try to generate a broad route between clusters and route between clusters.
I am using ngmap and angular js to show a set of markers in a map without problem. I need paint a line that join these markers.
My code:
In view:
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="12">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
in my controller:
var app = angular.module('Items', ['ngMap'])
app.controller('CICtrl', function($scope){
$scope.markers = [{id:1, lat:37.772323, lng: -122.214897}, {id:2, lat:21.291982, lng: -157.821856}, {id:3, lat:-27.46758, lng: 153.027892}];
});
For that purpose you could utilize shape directive, for example:
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"></shape>
where path property is initialized from markers like this:
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
Working example
var app = angular.module('appMaps', ['ngMap']);
app.controller('mainCtrl', function ($scope) {
$scope.markers = [{ id: 1, lat: 37.772323, lng: -122.214897 }, { id: 2, lat: 21.291982, lng: -157.821856 }, { id: 3, lat: -27.46758, lng: 153.027892 }];
$scope.path = $scope.markers.map(function(marker){
return [marker.lat,marker.lng];
});
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl" >
<map center="{{markers[0].lat}},{{markers[0].lng}}" zoom="5">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
<shape name="polyline" path="{{path}}" geodesic="true" stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2">
</shape>
</map>
</div>
Plunker
For those who are looking to show driving directions between markers and customize the appearance of the line between each marker:
Working Example:
In your controller:
$scope.directions = [
{
origin:"Salt Lake City, Utah",
destination:"West Valley City, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'red'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -110.9622787},
stopover: true
},
]
},
{
origin:"West Valley City, Utah",
destination:"West Jordan, Utah",
panelName:"p1",
renderingOptions: {
polylineOptions: {
strokeColor: 'blue'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -109.9622787},
stopover: true
},
]
},
{
origin:"West Jordan, Utah",
destination:"Salt Lake City, Utah",
panelName:"p2",
renderingOptions: {
polylineOptions: {
strokeColor: 'green'
}
},
wayPoints: [
{
location: {lat:40.6812675, lng: -111.9622787},
stopover: true
},
{
location: {lat:40.6812675, lng: -108.9622787},
stopover: true
},
]
}
];
HTML:
Pass an object of the form:
renderingOptions: {polylineOptions: {strokeColor: 'red'}}
into the options attribute of the <directions> element
<div style="width: 100%; float:left; height:70%" >
<ng-map zoom="3" center="current-location" default-style="false" style="height: 450px; display:block; ">
<directions ng-repeat="dir in directions"
draggable="true"
options="{{dir.renderingOptions}}"
travel-mode="DRIVING"
waypoints="{{dir.wayPoints}}"
panel="{{dir.panelName}}"
origin="{{dir.origin}}"
destination="{{dir.destination}}">
</directions>
</ng-map>
</div>
Let's say I have a bunch of markers (over 100) I want to add from this:
module.exports = [
{ value: 'Varrock', lng: 22.5, lat: -15.52249812756166, popular: 1 },
{ value: 'Lumbridge', lng: 25.9661865234375, lat: -43.644025847699496, popular: 1 },
{ value: 'Monastery', lng: -4.0924072265625, lat: -5.714379819235291 },
{ value: 'Edgeville', lng: 2.4884033203125, lat: -6.0094592380595495, popular: 1 },
{ value: 'Varrock Palace', lng: 22.412109375, lat: -6.882800241767556 },
{ value: 'Digsite', lng: 46.043701171875, lat: -17.266727823520508 },
{ value: 'River Salve', lng: 54.931640625, lat: -14.083301314706778 },
{ value: 'Morytania', lng: 64.610595703125, lat: -13.501814172428656 },
{ value: 'Mort Myre Swamp', lng: 59.820556640625, lat: -22.740723091194727 }
];
It uses browserify to get it. So, I do this:
var locations = require('./locations');
What would be the best way to add all of those into LayerGroup()? I mean, because doing var fairy = L.layerGroup([One, Two, Three...]); by hand would get tiresome.
So how would I go about adding all of those markers into a new layer (so I can toggle them on/off)
How about adding an empty L.LayerGroup, looping over your array and adding them to that layer?
var locations = [];
var layer = L.layerGroup().addTo(map);
locations.forEach(function (location) {
L.marker([location.lat, location.lng])
.bindPopup(location.value)
.addTo(layer);
});
Working example on Plunker: http://plnkr.co/edit/Q0DGqs?p=preview