We Keep Coding

Display div elements based on leaflet js base map selection

I have various baselayers on my leaflet map. I've also created div elements that correspond to each of those layers. I need to show and hide those div elements based on which baselayer is actually in use. I do not want all the div elements on the page simulatenously.
I've tried to use jQuery .show() & .hide() & .toggle() but haven't been able to get these to work. I need my .cuomoinfo & .nixoninfo to be hidden by default and then show based on which baselayer is in use.
var baselayers = {
"Andrew Cuomo Votes": CuomoLayer,
"Cynthia Nixon Votes": NixonLayer,
"Total Votes Cast": totalvotecountlayer,
};
var overlays = {
"NYS Assembly Districts": AssemblyOverlay,
"NYC Council Districts": CouncilOverlay,
};
L.control.layers(baselayers, overlays).addTo(mymap);
// creating a custom div that changes the ed information within it based on mouseover
var cuomoinfo = L.control();
cuomoinfo.onAdd = function (cuomomap) {
this._div = L.DomUtil.create('div', 'cuomoinfo'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
cuomoinfo.update = function (cuomoprops) {
this._div.innerHTML = '<h4>Votes for Andrew M. Cuomo</h4>' + (cuomoprops ?
'<b>' + cuomoprops.ElectDist + '</b><br/>' + cuomoprops.QueensCountyGovernorDemocraticPrimarySept2018_Cuomo + ' votes cast'
: 'Hover over an Electrion District to see voting results');
};
cuomoinfo.addTo(mymap);
$('.cuomoinfo').hide()

How to Rewrite an onclick() Function in my Javascript to Call a Function

I created a map using Leaflet with clusters. I wanted to add a popup when you click the cluster and it will show a popup list of names of the markers inside the cluster. I found a code and it does exactly what I’m looking for: a list popup showing the names of the markers inside the cluster and when you click on the different names on the popup list the related marker popup appears. But when I added the code to my project, I get the error, “reference error onclick is not defined” and the function won't run. I research this error and I found it’s not good practice to use the onclick function in my javascript/HTML in the way the code is written. My question is, how do I rewrite the script to work the way the example I’m using. Here’s a link to the example I’m using to show what I’m trying to accomplish (and this example works when I download it and run it…no error) - http://www.digital-geography.com/working-with-clusters-in-leaflet-increasing-useability/. And I also included my script. Any help on how to make this work will greatly be appreciated. Or, I’m open to achieve this in a different way. Thanks in advance!
function openPopUp(id, clusterId){
map.closePopup(); //which will close all popups
map.eachLayer(function(layer){ //iterate over map layer
if (layer._leaflet_id == clusterId){ // if layer is markerCluster
layer.spiderfy(); //spiederfies our cluster
}
});
map.eachLayer(function(layer){//iterate over map rather than clusters
if (layer._leaflet_id == id){// if layer is marker
layer.openPopup();
}
});
markers.on('clusterclick', function(a){
if(a.layer._zoom == 6){
var myText = '<ul>';
for (feat in a.layer._markers){
myText += '<li><u onclick="openPopUp"(' + a.layer._markers[feat]._leaflet_id + ',' + a.layer._leaflet_id + ')>' + a.layer._markers[feat].feature.properties['cityName2'] + ',' + a.layer._markers[feat].feature.properties['cityName2'] + '</u></li>';
}
myText += '</u>';
var popup = L.popup().setLatLng([a.layer._cLatLng.lat,a.layer._cLatLng.lng]).setContent(myText).openOn(map);
}
})

Because .setContent can accept an HTMLElement rather than just an HTML string, all you need to do is pass in an element with the listener attached, instead of the HTML string - construct the elements explicitly with createElement, and use addEventListener on the element you want to attach the listener to:
markers.on('clusterclick', function(a) {
if (a.layer._zoom !== 6) return;
const ul = document.createElement('ul');
a.layer._markers.forEach(({ _leaflet_id, feature }) => {
const { cityName2 } = feature.properties;
const li = ul.appendChild(document.createElement('li'));
const u = li.appendChild(document.createElement('u'));
u.addEventListener('click', () => openPopUp(_leaflet_id, a.layer._leaflet_id));
u.textContent = cityName2 + ',' + cityName2;
});
const popup = L
.popup()
.setLatLng([a.layer._cLatLng.lat, a.layer._cLatLng.lng])
.setContent(ul)
.openOn(map);
})

Add Custom Default Places In Google Places AutoComplete

I want to make an input with autocomplete use google places API. And this is my code:
var options = {
componentRestrictions: {
country: "de"
}
};
var place = '';
var locationAutocompleteOneWay = document.getElementById('locationAutocompleteOneWay');
var autocompleteLocationOneWay = new google.maps.places.Autocomplete(locationAutocompleteOneWay, options);
google.maps.event.addListener(autocompleteLocationOneWay, 'place_changed', function() {
place = autocompleteLocationOneWay.getPlace();
});
For more customize, I want to add some custom place result when I input in the textbox. Here my code and result:
setTimeout(function() {
$(".pac-container").append('<div id="areasearch" class="pac-item areasearch"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>Test place</span> <span>custom place</span></div>');
}, 500);
But I want when I click on the result, it make my input locationAutocompleteOneWay has had a value of the result. But I don't know how to make it. And I want it can apply for multi-input on the page. I use it by jQuery and AngularJS. All solution of Jquery and AngularJS is good for me. Thank in advanced.

What I found is that, if you load the custom locations you're adding with attributes that can be used to set the lat/lng (and anything else you need), then you can bind to the mousedown event to assign a custom place object to the autocomplete.
In my script, I have the following snippet adding an item to the autocompletes (this adds to all auto-complete elements on the page):
$(".pac-container").append('<div id="areasearch' + i + '" class="pac-item areasearch custom" val="' + PlaceName + '" lat="' + Latitude + '" lng="' + Longitude + '" style="display: none;"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + PlaceName + '</span> <span>' + LocationName + '</span></div>');
Using the classes pac-item and custom, I then bind as follows:
setTimeout(function () {
$("div.pac-item.custom").mousedown(function () {
setCustomLocation($(this));
})
}, 100);
And the custom location function is:
setCustomLocation = function (obj) {
$("#" + currInput).val($(obj).attr("val"));
var newObj = {};
newObj["geometry"] = {}
newObj["geometry"]["location"] = {}
newObj["geometry"]["location"]["lat"] = function () { return $(obj).attr("lat"); }
newObj["geometry"]["location"]["lng"] = function () { return $(obj).attr("lng"); }
currAutocomplete.set("place", newObj);
}
The first line sets the name into the active input field, and the rest sets the place object for the active autocomplete (both variables captured in other events). The only values I needed for the project was the geometry lat/lng pair, but if you need more, just load it with whatever values you need to retrieve from the parent.

Calling Jquery accordion on google maps only runs once

So I've created a google maps page with a bunch of markers generated from XML. The idea is that when you click on a marker a div will be generated that displays events information related to that marker. This all works fine but what I'm struggling with is now trying to attach an accordion to the events information. The code I have so far will show an accordion on the first marker you click on (can be any one and it returns the correct info, shows the div and has an accordion) but not on any subsequent marker clicks, even the same one for a second click.
I'm sure this must be a simple fix but I've tried a few variations (there are three attempts at the accordion that I have left in to show the different versions) and I am getting the same results.
Here is the code that binds the events to the markers as a google event listener..
function bindEvents(marker, id, venueName, website){
google.maps.event.addListener(marker, 'click', function(){
// TARGET and show eventsFeed on click
$('#eventsFeed').show(222);
var eventsList = document.getElementById('eventsList');
// ADDS styles to the events feed divs when created
// DECLARED here for the inclusion of the venueName & website as feedhead
// even when no events are present
var venueNameDiv = "<div class='venueNameFeed'>";
var webSiteDiv = "<a target='_blank' class='websiteInFeed' href='http://"+website+"'><span class='fa fa-home'></span></a>";
var titleInFeed = "<div class='"+id+" eventTitleFeed'>";
var accordDataWrap = "<h2 class='accordWrap>";
var eventInFeed = "<div class='eventDescFeed'>";
var dateInFeed = '<div class="eventDateFeed">';
var priceInFeed = "<div class='eventPriceFeed'>";
// CLOSE the divs after each entry
var divBrk = "</div>";
var closeAccordDataWrap = "</h2>";
var feedHead = venueNameDiv + venueName + divBrk;
// EMPTY array to line up matched events in
var eventsLine = [];
// CYCLE through eventsArray
for (var key in eventsArray){
var eventLoop = eventsArray[key];
// MATCH id to venue_id
var venue_id = eventLoop.venue_id;
if (venue_id == id){
// ONLY show events from todays date onward
var now = new Date();
var date = new Date(eventLoop.eventDATE);
// SET hours to 0 to ignore time part (always as 01:00:00 for event date?)
now.setHours(0,0,0,0);
if (date >= now){
//ADD all matched events to eventsLine array
eventsLine.push(titleInFeed + eventLoop.eventTitle + divBrk +
accordDataWrap + eventInFeed + eventLoop.event + divBrk +
dateInFeed + formatDate(eventLoop.eventDATE) + divBrk +
priceInFeed + "£" + eventLoop.price + divBrk + closeAccordDataWrap);
}
}
}
// TURNS the array into a string and replaces those damned, infernal commas!!
var outputString = eventsLine.toString().replace(/>,/g, '>');
// PUT the compiled array into the eventsFeed div (with venueName as title)
if (website==""){
eventsList.innerHTML = feedHead + outputString;
} else {
eventsList.innerHTML = feedHead + webSiteDiv + outputString;
}
// ADD the accordion
$(document).on('click', marker, function(){
$(eventsList).accordion({
header: "div."+id,
icons: null
})
})
// OR
$(eventsList).each(function(){
$(eventsList).accordion({
header: "div."+id,
icons: null
});
});
// OR
accordion(eventsList, id);
});
}
This third option calls a separate function which is defined as;
function accordion(placement,id){
$(placement).accordion({
header: "div."+id,
icons: null
});
}
As you can probably tell I'm pretty new to all of this so any help or advice with anything would be greatly appreciated! :)

Can you replace this code:
$(eventsList).each(function(){
$(eventsList).accordion({
header: "div."+id,
icons: null
});
});
with this code:
$(eventsList).each(function(){
$(this).accordion({
header: "div."+id,
icons: null
});
});
and try. Also it will be better if you can Create a fiddle for your code.

Google Fusion Map - Dynamic Menu queried from the google fusion table

I am pretty sure that I know what the problem is with my code, but I am unsure how to fix it.
I have a google fusion table that i am querying to generate a menu that has radio buttons in it. A map that is a google fusion table visualized like a google map is also on the page.
When i hard code a couple radio buttons and click them it makes the items light up on the map based on the ID of the element. I using google.maps.event.addDomListener to make this magic work. So that works great.
Now i want to take it one step further and actually pull the data from a google fusion table so it shows the most up to date list of items i have in my table. So, I'm using jQuery and a $.get command to get the feed in jsonp. I'm outputting 2 columns of data and dynamically building radio buttons by attaching them with a innerHTML line -- attaching it to a div.
So, I'm thinking the problem has to do with the DOM, but i am not sure how to get the radio buttons to load in first and then load in the map so all is available to the maps events so clikcing the radio actually does something.
The question is what modifications do i need to make so my dynamic generated radio buttons will work with my google fusion map?
Here is my javascript code:
function initialize() {
var table = ########;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(30.6, -108.1),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, table, map);
getData(table);
google.maps.event.addDomListener(document.getElementById('num1'),
'click', function() {
filterMap(layer, table, map);
});
google.maps.event.addDomListener(document.getElementById('num2'),
'click', function() {
filterMap(layer, table, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, table, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: "State",
from: table,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var bugs = document.getElementsByName('bug');
for (var i = 0, bug; bug = bugs[i]; i++) {
if (bug.checked) {
var BugName = bug.value.replace(/'/g, '\\\'');
filter.push("'" + BugName + "'");
}
}
var where = '';
if (filter.length) {
where = "'BugName' IN (" + filter.join(',') + ')';
}
return where;
}
// build the menu
function getData(table) {
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
// write your SQL as normal, then encode it
var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1";
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}
function dataHandler(d) {
// get the actual data out of the JSON object
var data = d.table.rows;
var ftdata = ['<div>'];
for (var i = 0; i < data.length; i++) {
ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+'');
}
ftdata.push('</div>');
document.getElementById('ft-data').innerHTML = ftdata.join('');
}
google.maps.event.addDomListener(window, 'load', getData);
google.maps.event.addDomListener(window, 'load', initialize);

This site had a bunch of example code.
http://csessig.wordpress.com/category/fusion-tables/