We Keep Coding

Openlayers3, vector data layer not visible after proceeding select onchange() function

I input two polygon geojson layers, one is just boundary layer, another is the vectorlayer contains many attributes.
I add map.on('click', function(evt), so users can click on the map, and the corresponding feature will be highlighted (with another style). I did this by add a new overlay layer with only this feature.
I also have a Select with many options and a onchange() function. The onchange() functions let style of vectorlayer change based on the value of select option.
The click and highlight feature thing works well at begining, but when I change the value of the select and the style of vectorlayer changes, the highlight does not work.
I also tried to not using the onchange() function for select, then the highlight works well again.
I'm quite confused about this... Why does this two thing could not work together? Thank you.
Example of select:
<select id="vai_year" onchange="get_vaiSelect(vectorLayer)">
<option value="VAI_2013">2013年</option>
<option value="VAI_2012">2012年</option>
<option value="VAI_2011">2011年</option>
</select>
onchange function:
function get_vaiSelect(layer)
{
featureOverlay.setStyle(highlightStyle);
featureOverlay.setZIndex(50);
map.addLayer(featureOverlay);
features = layer.getSource().getFeatures();
length = features.length;
attributes = layer.getSource().getProperties();
var vaivalue = document.getElementById("vai_year");
for(var f=0;f < length; f++)
{
if (vaivalue.value == 'VAI_2013')
{
level = features[f].getProperties().vai_2013+1;
}
else if (vaivalue.value == 'VAI_2012')
{
level = features[f].getProperties().vai_2012+1;
}
...
else if (vaivalue.value == 'VAI_1992')
{
level = features[f].getProperties().vai_1992+1;
}
styleCache[level] = new ol.style.Style
({
fill: new ol.style.Fill({color: vai_levels[level],}),
});
features[f].setStyle(styleCache[level]);
}
};
highlight style:
highlightStyle = function(feature, resolution)
{
var text = resolution < 5000 ? feature.get('NL_NAME_3') : '';
highlightStyleCache = new ol.style.Style(
{
stroke: new ol.style.Stroke(
{
color: 'rgba(166,18,12,1)',
width: 1.2
}),
fill: new ol.style.Fill(
{
color: 'rgba(255,255,128,0.8)'
}),
text: new ol.style.Text(
{
font: '14px Calibri,sans-serif',
text: text,
color:'rgba(0,0,100,1)'
})
});
return highlightStyleCache;
}
overlay layer:
featureOverlay = new ol.layer.Vector(
{
source: new ol.source.Vector(),
style: highlightStyle,
ZIndes: 60
});
displayFeatureInfo = function(m)
{
featureOverlay.setZIndex(70);
vectorLayer.setZIndex(40);
map.addLayer(featureOverlay);
feature= map.forEachFeatureAtPixel
(
m,
function (feature, vectorLayer)
{
return feature;
}
/* function(layer)
{
return layer === vectorLayer;
}*/
);
if (feature !== highlight)
{
if (highlight)
{
featureOverlay.getSource().removeFeature(highlight);
}
if (feature)
{
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
map.onclick:
map.on('click', function(evt)
{
if (evt.dragging)
{
return;
}
pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);

You don't have to add a new layer every time you click the map, it is enough if you just change the source of the desired layer, as you are doing at the end of the displayFeatureInfo function.
Can you please provide us a jsfiddle working example, so that we can debug your code and see more details which are not shown now? (We don't see, for example, vectorLayer definition, or the polygons you mentioned at the beginning of your question)

Leaflet do not display points of a particular color from a layerGroup

I'm using leaflet to draw path associated to vehicles. Each vehicle path is composed of a layerGroup to make it possible to have different color in the path (as color depends on temperature). The data is received from a web socket in the following format (as displayed by the debug console of chromium):
Object {color: "#cc0099", legende: "<someHtmlCode.TheSameForEveryPieceOfData>", data: {lat: 48.77905, lon: -3.44891}, c2a_id: "vehicle_1"}
My problem is that for certain values of color (different shades of blue) the path is not drawn on the map but for the others it properly work. In the case I change the zoom level then everything is displayed (every color I'm using).
You can see that some blue has appeared on the second image (over previous paths), which should have been drown without the need of changing zoom level.
My code for adding the data to the layer.
var idAllLayers;
if (_data != null && _data['data'] != null) {
current_lon = _data['data']['lon'];
current_lat = _data['data']['lat'];
// checking if there is already a layer associated to the vehicle _id_
if (!(this.layer_group_real_time.hasLayer(id))) {
var multi_polyline = L.layerGroup([]); //create a layer for this vehicle
multi_polyline._leaflet_id = id;
//add a sublayer to this one (for a sub path to have different colors)
multi_polyline.addLayer(this.newLayer(id, _data['color']));
this.layer_group_real_time.addLayer(multi_polyline);
}
// get the differents layers of the layerGroup for the vehicle _id_
idAllLayers = this.layer_group_real_time.getLayer(id).getLayers();
currentLayerLatLng = idAllLayers[idAllLayers.length-1].getLatLngs();
if (current_lat != null && current_lon != null) {
// if previous elements have been stored
if (this.previousDataPoints[id] != null && this.previousColor[id] != null) {
oldDataPoint = this.previousDataPoints[id]['data'];
delta = this.measure(current_lat, current_lon, oldDataPoint['lat'], oldDataPoint['lon']);
if (delta > MAX_DIST || _data['color'] != this.previousColor[id]) {
if (delta < MAX_DIST){ // case where color has changed but we still need to add the point to the previous subpath
currentLayerLatLng.push(L.latLng(current_lat, current_lon));
}
this.layer_group_real_time.getLayer(id).addLayer(this.newLayer(id, _data['color']));
idAllLayers = this.layer_group_real_time.getLayer(id).getLayers();
currentLayerLatLng = idAllLayers[idAllLayers.length - 1].getLatLngs();
}
}
currentLayerLatLng.push(L.latLng(current_lat, current_lon));
idAllLayers[idAllLayers.length - 1].setLatLngs(currentLayerLatLng); // setting up the new coords
this.previousDataPoints[id] = _data;
this.previousColor[id] = _data['color'];
}
}
newLayer: function (_id, _color) {
var nl = L.polyline([],
{
color: _color,
opacity: 0.7,
stroke: true,
weight: 6,
vehicle_id: _id
});
nl.on('click', this.traceOnClick);
return nl;
},
[EDIT]
Here is a "minimal, complete and verifiable example" (at least I hope it is) I've uploaded on Github. It contains a map where are displayed some path. On load displayed path should be green and pink but if you change zoom level blue path should appear. I've integrated #Jieter and #snkashis suggestions but the problem is still here.

I still see multi_polyline._leaflet_id = id; in your example..why are you not using L.Util.setOptions to mark your own internal identifiers(vehicle id, etc)?

Finally I've come to the idea to change the type of the vehicle layer from L.layerGroup to L.geoJson. And it worked! Even if I don't know why.
I've updated the Git repository with my solution.
(As previously said in comments I've also stoped doing multi_polyline._leaflet_id = id; and now use L.Util.setOptions(vehicleLayer, {vehicle_id: id});. I've renamed multi_polyline to vehicleLayer by the way.)

Leaflet clicking on features

So, I'm trying to map bus routes using leaflet w/geojson for the coordinates. I'm having a difficult time with one aspect where, on a click, the bus line is boldened, and, ideally, the last clicked on feature returns to the default style.
What I have so far
function $onEachFeature(feature, layer) {
layer.on({
click: function(e) {
//calls up the feature clicked on
var $layer = e.target;
var highlightStyle = {
opacity: 1,
weight: 5
};
$layer.bringToFront();
$layer.setStyle(highlightStyle);
}
});
}
//imagine all the leaflet map tile code here
//this is where the features get added in and the $oneachfeature function
var busFeature = L.geoJson(busRoutes, {
style: defaultBusRouteColor,
onEachFeature : $onEachFeature
});
busFeature.addTo(map);
Above, what I have now successfully changes the style of the feature to what's in highlightStyle. However, when another feature is clicked, the style remains. How do I remove the previously clicked on feature's style so that only one feature at a time has the style highlightStyle?
Things I've already tried: using addClass/removeClass to jQuery methods, layer.resetStyle() with leaflet, and a bunch of other things that still didn't work. Note: this would ideally be used in a mobile version, as the desktop version uses a hover function that emphasizes the features, with no problem. this:
function $oneachfeature(feature, layer){
layer.on({
mouseover: function (e){makes feature bold}
});
layer.on({
mouseout: function (e){makes feature normal again}
});
}
Any suggestions?

Store a reference to the highlighted layer so you can later call resetStyle on it:
// Variable to store selected
var selected
// Create new geojson layer
new L.GeoJSON(collection, {
// Set default style
'style': function () {
return {
'color': 'yellow',
}
}
}).on('click', function (e) {
// Check for selected
if (selected) {
// Reset selected to default style
e.target.resetStyle(selected)
}
// Assign new selected
selected = e.layer
// Bring selected to front
selected.bringToFront()
// Style selected
selected.setStyle({
'color': 'red'
})
}).addTo(map)
Example: http://embed.plnkr.co/RnQO1s/preview
Reference: http://leafletjs.com/reference.html#geojson-resetstyle

using resetStyle() would seem to be an easier solution...simply reset the style of the layer before applying the new style to the feature. This requires only a sinlge line of code adding to your original function:
function $onEachFeature(feature, layer) {
layer.on({
click: function(e) {
//calls up the feature clicked on
var $layer = e.target;
var highlightStyle = {
opacity: 1,
weight: 5
};
busFeature.resetStyle();
$layer.bringToFront();
$layer.setStyle(highlightStyle);
}
});
}

Remove previous Highlight before adding the next:
.removeLayer() works to remove the previously set geoJSON selection using .addTo()
theMap = yourMap.Map
geoJson = yourMap.geoJSON();
onclick() {
const highlightedFeature = {
'color': '#12FF38',
'fillColor': '#30D8E0',
'fillOpacity': 0.3
};
this.theMap.removeLayer(this.geoJson);
this.geoJson = yourMap.geoJSON( Feature, {
style: highlightedFeature
});
this.geoJson.addTo(this.theMap);
}

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.

Adding/removing L.control from leaflet.js map

I have a map that changes tiles based on four radio buttons. I need the popup window that appears when you roll over a tile to change as the different map layers change. I've gotten it to appear but when I switch layers the map just adds another popup window. I tried using control.removeFrom(map) but it doesn't seem to work. I think my logic may be screwed up somewhere. Here is one of the if statements:
if (two == true && black == true) {
function blkNineStyle(feature) {
return {
fillColor: getColor(feature.properties.pctBlack9000),
weight: 2,
opacity: 1,
color: '#666',
dashArray: '2',
fillOpacity: 0.9
};
}
//Tried to us this to take off the control.
info.removeFrom(map);
map.removeLayer(geojson);
geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
};
info.addTo(map);
}
You can see the (broken) map here.

I had this same problem myself and I just solved it.
I had to define an empty variable in the global environment (outside any functions you're using). This isn't a full script or anything, but the general idea I'm describing is below:
var info; // CREATING INFO VARIABLE IN GLOBAL ENVIRONMENT
function makeMap() {
..... geojsons, styles, other stuff ....
// REMOVING PREVIOUS INFO BOX
if (info != undefined) {
info.removeFrom(map)
}
// making current layer's info box
info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>Data by Zip Code</h4>' + (props ?
'<b>Zip Code: ' + props.id + '</b><br />Value: ' + matchKey(props.id, meanById)
: 'Hover over a zip code');
};
info.addTo(map);
..... other stuff again ......
} // end function
I am very new to both Leaflet and javascript, so I have to say that I'm not exactly sure where to place the info.removeFrom(map) line in the code you have posted at the map link you provided, but you are on the right track with 'info.removeFrom(map)' .
I was able to problem-solve my issue with dynamic legends and info boxes by fiddling around here: http://jsfiddle.net/opensas/TnX96/

I believe you want to remove the control similarly how you added it.
In this case leaflet provides direct remove() method similar to addTo(map) method.
Example-
Whenever you want to remove the legend control use following code-
Create Control-
var legendControl = L.control({position: 'bottomleft'});
legendControl.addTo(mymap);
Remove Control-
legendControl.remove();
For more details refer/click here...

Despite the fact that this question was asked a year ago, I recently had to come up with a solution to a similar problem myself so feel as if I should share in case anybody else ends up here like I did.
The L.control() object in Leaflet isn't technically a layer, and this is why trying to add and remove it some times doesn't work in the same way as for layers.
http://leafletjs.com/reference.html#icontrol
As the L.control constructor requires you only to "create all the neccessary DOM elements for the control", the HTML content of the div itself can be updated and deleted as and when required. Thus, to make a control feature appear and disappear from the map, and instead of adding and removing the L.control object, just adjust the HTML contents of the div contained by it. An empty div would result in no control feature being shown by the map.
Thus the above snippet would become:
//construct control, initialize div
info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
if (two == true && black == true) {
function blkNineStyle(feature) {
return {
fillColor: getColor(feature.properties.pctBlack9000),
weight: 2,
opacity: 1,
color: '#666',
dashArray: '2',
fillOpacity: 0.9
};
}
//set div content to empty string; makes control disappear from map
info.getContainer().innerHTML='';
map.removeLayer(geojson);
geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);
//update content of control to make the control reappear
info.update = function (props) {
this._div.innerHTML = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
};
}
//other cases...
if (two == false && black == true) {
//delete and update control where necessary
info.getContainer().innerHTML='';