We Keep Coding

How to show/hide markers that are inside a function using js?

I have a map with a lot of markers that are pulled from this function:
function showResourcesByName(name) {
for (var i = 0; i < markers.resources.length; i++) {
var resName = markers.resources[i].name;
if (resName == name) {
var resIcon = icons.resources[i].icon;
var resSize = icons.resources[i].size;
var resPname = icons.resources[i].pname;
var customIcon = L.icon({
iconUrl: resIcon,
iconSize: resSize, // size of the icon
iconAnchor: [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
popupAnchor: [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
});
for (var j = 0; j < markers.resources[i].coords.length; j++) {
var x = markers.resources[i].coords[j].x;
var y = markers.resources[i].coords[j].y;
L.marker([y, x], {icon: customIcon}).addTo(map).bindPopup(resPname);
}
}
}
}
Then I use the code showResourcesByName("AITokarServer"); to show all markers for that selector (AITokarServer) for example.
I have a sidebar with all categories, and want to show/hide markers if I click on that category. For example, if I click animals, I want to show only the markers from the "animals" group. Also I want to put a show/hide selector on each marker group too, if I click on "Shigi" link I want to show only the Shigi markers, that are pulled from this function: showResourcesByName("AIShigiServer");
I trid this example here: http://plnkr.co/edit/LVzmRcsVZ79wZ78E5yBd?p=preview
But I don't know how to work with the function that I use and those selectors to show/hide.
And here is my full code with all the files. Each group is commented in the code where are the function that pulls the icons.
http://plnkr.co/edit/dVgHt4VK0DnA30M3a8vq?p=preview

A simple way of doing this would be
1.Drop each category's feature into a L.layerGroup(L.marker(params).addTo(someLayerGroup)), and then store that in a JS hash that could be nested to your liking.
var myLayerHash = {};
myLayerHash["Animals"] = {};
As you loop through each lowest-level category...
myLayerHash["Animals"][thisCategory] = someLayerGroup;
someLayerGroup.addTo(map) //if they default to being visible
Then you simply work through the hash when directed by user input, and use map.addLayer(layerGroup) or map.removeLayer(layerGroup) as needed., like map.removeLayer(myLayerHash["Animals"]["Shigi"])

I was able to reach what I want using this:
marker = L.marker([y, x], {icon:customIcon}).addTo(map).bindPopup(resPname);
$(marker._icon).addClass('randomClass');
This way I can add a class to the markers and better, set the class as a previous variable to match the markers properties.

Accessing a jQuery element Google Maps Listener

I am using jQuery with a Google Maps Listener. I have boxes in my map and I need to make changes on them when they are too close.
The problem is the next one:
I check if the boxes are close and then make them red (for example). I know the condition is OK because I have a "console.log" and everything is nice. Here is my code:
Little explanation:
A marker is an element in the map. Every marker has his own infobox (the boxes in the map I want to change).
A cluster is a group of markers.
clusterListener2 = google.maps.event.addListener(markerCluster, 'click', function (clusterer) {
zoomLimit=12;
var myzoom = map.getZoom();
var olderPosk=1000000;
var olderPosD=1000000;
if (myzoom>zoomLimit) {
clusterClickController=1;
$.each(clusterer.getMarkers(), (function (index, marker) {
var restak=olderPosk-marker.position.k;
var restaD=olderPosD-marker.position.D;
if (restak<0) restak=restak*(-1);
if (restaD<0) restaD=restaD*(-1);
if ((restak<0.0001)&&(restaD<0.0001)) {
console.log("Close elements");
console.log($(this.infobox));
currentInfobox=$(this.infobox);
currentInfobox.css({"background" : "red"});
}
olderPosk=marker.position.k;
olderPosD=marker.position.D;
marker.marker.open(map, this);
marker.infobox.open(map,this);
marker.marker.isHidden = false;
}));
}
else {
clusterClickController=0;
}
});
So, the "Close elements" console.log is appearing in console and the $(this.infobox) prints a jQuery element but when I do the "background red" statement it does not work.
Any help? Thanks

I think you should use infobox.content_.style.cssText to set the new style instead. As it is shown in line 44 of this jsfiddle.

Pins disappearing on bing maps when map is panned

I'm trying to produce a mapping application with Bing Maps with a button that will retrieve a JSON string and places pins on the map based on the center of the map.
That is working fine, but I'm running into two issues that I'm having trouble diagnosing.
The first is that when I move the map after placing the pins, the majority of them disappear from the map except for 1-3. I've figured out that the pins are still being held in map.entities, but just aren't all displaying.
The second issue is that I have a click event on the pins, and sometimes when I click on a pin it will disappear (and sometimes reappear elsewhere on the map).
Here is my code:
function addPin() {
map.entities.clear();
var pinImg = "images/MapPin.jpg";
var latLong = {};
var name;
for (var i = 0; i < factualJson.response.data.length; ++i) {
latLong['latitude'] = factualJson.response.data[i].latitude;
latLong['longitude'] = factualJson.response.data[i].longitude;
name = factualJson.response.data[i].name;
var pin = new Microsoft.Maps.Pushpin(latLong, {
icon: pinImg,
anchor: new Microsoft.Maps.Point(latLong['latitude'], latLong['longitude']),
draggable: true,
width: 48,
height: 48
});
Microsoft.Maps.Events.addHandler(pin, 'click', displayName);
pin.title = name;
pin.id = 'pin' + i;
map.entities.push(pin);
}
document.getElementById("arrayLength").innerHTML = "Number of locations: " + map.entities.getLength();
}
function displayName(e) {
document.getElementById("name").innerHTML = "";
if (this.target.id != -1) {
document.getElementById("name").innerHTML = this.target.title;
}
}
function boot() {
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: getMap });
}
function getMap() {
map = new Microsoft.Maps.Map($gel("bingMap"), {
credentials: getKey(),
customizeOverlays: true,
enableClickableLogo: true,
enableSearchLogo: true,
showDashboard: true,
showBreadcrumb: true,
showCopyright: true,
zoom: 10,
labelOverlay: Microsoft.Maps.LabelOverlay.hidden
});
setGeoLocation();
//setTimeout(optimizeMap, 100);
window.onresize = resizeWin;
resizeWin();
}
Currently I make an ajax call from the button, and the callback function calls 'AddPin' which adds the pins to the map. I thought I'd add in the map initialization code in case it was relevant. Currently boot() is called on body load.

For me the solution was similar to yours #canadian coder
Microsoft.Maps.Location() only accepts float values, no strings and Int.
I use MVC architecture and passed a string using a model. Later i converted that string to float and passed to Location.
Problem solved.
var pushpin = new Microsoft.Maps.Pushpin(
center, { icon: '/Content/BingPushpin.png', width: 50, height: 50, draggable: false });
pushpin.setLocation(new Microsoft.Maps.Location
(parseFloat(#Model.Latitude) , parseFloat(#Model.Longitude)));
dataLayer.push(pushpin);
locations.push(new Microsoft.Maps.Location
(parseFloat(#Model.Latitude) , parseFloat(#Model.Longitude)));
EDIT :
Later found out that problem still exist. Another reason can be that you are calling that Map to load twice. So check for any other instance of the map which is being loaded. In my case see below.
$(document).ready(function () {
loadSearchModule(); //calling Map to Load at a div without pushpins
//code to do something
getMapOnLocation();
}
function getMapOnLocation()
{//code to display map with pushpin
}
In the Above example I was telling the control to load my map with PushPins and when the page is fully Loaded load the map without pushpins.
Hope this helps :)

As always I need to ask the question before I figure it out myself.
The issue was that I needed to push a Microsoft location object into the pin and not an object. Like so:
var loc = new Microsoft.Maps.Location(47.592, -122.332);
And NOT my latLong object.
This also seemed to fix the issue of disappearing pins on click event.

MapBox tooltip disappears

I'm modeling this example for map: http://bl.ocks.org/rsudekum/6039370
The tooltips for both layers in this example only appear once and then disappear after the user switches to the other layer.
How can I make the tooltips remain like in this example: http://bl.ocks.org/yhahn/4156545 ?
Which part of the JS makes it disappear?
Thanks!

You can keep tooltips on adding and removing gridlayers based on the map's hasLayer state.
if (map.hasLayer(layer)) {
map.removeLayer(layer);
map.removeLayer(gridlayer);
this.className = '';
} else {
map.addLayer(layer);
map.addLayer(gridlayer);
this.className = 'active';
}
Here's an example.

Delay between creation and display of polygons

To create polygons in my map, I am using jQuery.getJSON() to load geojson files containing polygons and multipolygons. Then I analyse the geojson with a github plugin (loadgeojson) and finally the polygons are created on the map.
I put a <div> with a loading gif that overlays the map that appears just before the jQuery.getJSON() is being called.
The problem is the timing to remove it. I make the loading animation disappears when all the polygons visible property is set to True.
I want the <div> to disappears when the polygons appears on the map. But for the moment, it disappear a little before this. So on slower browser there is a relatively big delay between the <div> disappearing and the polygons appearing.
I tried to put a listener on an event but I couldn't find an event that corresponded to what I want.
How can I remove the loading animation right on time when the polygons appears on my map?
Here's my code:
function readJSON(id){
showLoadingAnimation();
// If .json hasn't been read
if(stockArray[id].length == 0) {
$.getJSON(id + ".json", function(data){
showFeature(data, id)
})
}
}
function showFeature(geojson, elemtype){
currentFeature_or_Features = new GeoJSON(geojson, elemtype, options);
if (currentFeature_or_Features.type && currentFeature_or_Features.type == "Error"){
return;
}
// Display object
if (currentFeature_or_Features.length){
for (var i = 0; i < currentFeature_or_Features.length; i++){
if(currentFeature_or_Features[i].length){
for(var j = 0; j < currentFeature_or_Features[i].length; j++){
// Display multipolygon
currentFeature_or_Features[i][j].setMap(map);
// Mouse events for multipolygons
mouseEventsMulti(i,j,elemtype);
}
}
else{
// Display polygons, polylines and points
currentFeature_or_Features[i].setMap(map);
// Mouse events for polygons, polylines and points
mouseEventsSimple(i,elemtype)
}
}
} else {
currentFeature_or_Features.setMap(map)
}
// Stop loading animation
dontShowLoadingAnimation();
}

Finally, I modified my code to pan the map a tiny little bit after the polygons are created. Then it activate the idle listener that stops the loading animation.
It might not be the prettiest bit of code, but it works.
This is what I added to the showFeature function
center = map.getCenter();
latLngCenter = new google.maps.LatLng(center.lat() + 0.0000001,center.lng() + 0.0000001);
map.panTo(latLngCenter);
And this is the Listener
google.maps.event.addListener(map, 'idle', function() {
// Stop loading animation
dontShowLoadingAnimation();
});