We Keep Coding

Hiding markers using LeafletSlider?

I am showing a temporal range of refugee camps on my map by using the LeafletSlider plugin. The camps appear on the map based on an attribute in my GEOJSON object called DATE_START. As you can see in my JSFIDDLE, the slider works good.
As I am scrubbing the timeline , I want to remove the markers that have a DATE_CLOSED property depending on the date of the current timeline scrub and the date of the DATE_CLOSED property.
It looks like this timeslider plugin only shows markers. Does anyone know how to hide the markers after it date has closed?
Sample data:
var camps = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-06-23","DATE_CLOSED":"2016-01-23"},"geometry":{"type":"Point","coordinates":[64.6875,34.97600151317591]}},{"type":"Feature","properties":{"STATUS":"OCCUPIED","DATE_START":"2014-01-21","DATE_CLOSED":"2015-05-25"},"geometry":{"type":"Point","coordinates":[65.335693359375,36.26199220445664]}},{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-09-13","DATE_CLOSED":""},"geometry":{"type":"Point","coordinates":[67.587890625,35.969115075774845]}}]};
Code:
var map = L.map('map', {
center: [33.67406853374198, 66.9287109375],
zoom: 7
}).addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.DATE_START);
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
timeAttribute: 'DATE_START'
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
//And initialize the slider
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.DATE_START.substr(0, 10));

I hope this counts as an answer, but I discovered there was an alternative timeline plugin that does just what I needed: https://github.com/skeate/Leaflet.timeline

MapBox pop-up descriptions on markers not showing when clicking

I've integrated a MapBox map with marker clustering. For some reason the descriptions/titles will not show when you click on the marker.
Any idea why this is happening or how to fix it?
The page: https://vpnarea.com/front/member/signuptest
My MapBox code:
<script>
L.mapbox.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxx';
var markers = L.markerClusterGroup();
$.getJSON("https://vpnarea.com/data2.geojson-copy", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.setIcon(L.mapbox.marker.icon({'marker-color': 'f5c200','marker-size': 'small'}));
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.mapbox.map('map1', 'vpnarea.m9b2pf4n') .setView([60, -55], 3);
markers.addTo(map);
});
</script>

You'll need to bind popups in order for them to appear: Mapbox.js's L.mapbox.featureLayer does this by default, but you're using L.geoJson, which does not. So you'll need to check out the Leaflet documentation for .bindPopup and use it.

Preserving Google map zoom to kml layer on checkbox click

I'm attempting to add multiple kml layers to a map that can be turned on and off with check boxes. I got that part working (yay!). When I click on a layer to turn it on, it zooms in (this is fine), but when I unclick to turn the layer off, it zooms back out to my map extent. How do I get it to preserve the zoom of the last loaded layer? Code below.
<script>
var map;
var watershedLayer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/watersheds.kmz'
});
var ere1949Layer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/ere1949.kmz'
});
function initialize() {
var parksville= new google.maps.LatLng(49.316786, -124.308768);
var mapOptions = {
zoom: 9,
center: parksville
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
check();
}
function check()
{
if(document.getElementById('watersheds').checked)
{watershedLayer.setMap(map);}
else
{watershedLayer.setMap(null);}
if(document.getElementById('ere1949').checked)
{ere1949Layer.setMap(map);}
else
{ere1949Layer.setMap(null);}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I tried using the preserveViewport function but it just stopped the layer from zooming in, which is not what I wanted. I'm new to javaScript so possibly I'm missing something obvious...any help would be appreciated!
jsfiddle

Set the map-property of a selected layer only when it's not set yet:
function check()
{
if(document.getElementById('watersheds').checked)
{if(!watershedLayer.getMap())watershedLayer.setMap(map);}
else
{watershedLayer.setMap(null);}
if(document.getElementById('ere1949').checked)
{if(!ere1949Layer.getMap())ere1949Layer.setMap(map);}
else
{ere1949Layer.setMap(null);}
}
http://jsfiddle.net/jhagmq7L/16/

You can also attach max and min zoom levels to the map, something to consider the over all map zoom when loading kml layers.
// sets the min and max zoom levels of the map
var opt = { minZoom: 6, maxZoom: 18 };
map.setOptions(opt);

Google Map with Sidebar that Zooms to a Specific Location

I'm working on a javascript Google map where I have marked the location of each of the state capitals with a custom marker and a title of that capital and state. Right now when you view the map you see the whole US with each marker. I want to keep that but add a sidebar where you click the name of a state and the map zooms to the state and capital. I would also like to add a link that zooms out view the full map. Does anyone have a tutorial on how to do this? I found several examples of Google maps with sidebars but none that zooms to a specific location.
Edit:
This is what I am trying to achieve: http://econym.org.uk/gmap/example_map2.htm
Here is the code I am working with:
<script>
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(38.781494, -96.064453),
mapTypeId: google.maps.MapTypeId.ROAD
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var image = 'Alabama.png';
var myLatLng = new google.maps.LatLng(32.366805, -86.299969);
var AlabamaMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Montgomery, Alabana"
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>

You need to associate listeners (for example, using jquery) with the click event on your state names. Provided they had an id attribute with the USPS code, it would be something like
jQuery(document).on('click','#RESET',function() {
map.setZoom(5);
map.setCenter({lat:41, lng:-89.5});
});
jQuery(document).on('click','#CA',function() {
map.setZoom(7);
map.setCenter({lat:36.4, lng:-120.9});
});
jQuery(document).on('click','#FA',function() {
map.setZoom(7);
map.setCenter({lat:28, lng:-81});
});
You see, I included one link with id RESET that allows me to reset to the initial state.
Here you can see it at work
http://bl.ocks.org/amenadiel/38e0541592bf331cb298

How can I style Mapbox markers being pulled in directly from Mapbox?

I am new to Mapbox, so please bear with me.
I have uploaded my geoJson to my Mapbox map and am now editing it via javascript, creating the map by calling the following function.
$scope.initMap = function() {
var map = L.mapbox.map('map', 'example.hk78fg64');
};
The map works fine, but I want to style the default markers. How can I style these markers being pulled in from Mapbox directly? All examples for styling them have the markers being created on the spot inside the geoJson function (view the expression below)
L.geoJson(geoJson, {
pointToLayer: L.mapbox.marker.style,
});

See the L.mapbox.map documentation:
$scope.initMap = function() {
var map = L.mapbox.map('map', 'example.hk78fg64', { featureLayer: {
pointToLayer: L.mapbox.marker.style }
});
};