We Keep Coding

KML is overlapping map and pop-up is not working

I am working with google maps. I have some lat longs and I display them on map using my use cases. Now I have implemented kml but the kml is loading after the map thus my pop-up is not working. I am attaching code below for the the reference.
var base = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
//=========================
var map = L.map('leafletmap', {
layers: [base],
tap: true,
center: new L.LatLng(30.864111, 72.355499), // alternative of - map.setView([31.582045, 74.329376], 15);
zoom: 7,
});
// Above is just Map
var kmlLayer = new L.KML("/assets/tehsil_punjab.kml",{async:true});
map.addLayer(kmlLayer);
// Here I loaded KML file
unction initialize() {
map.on('enterFullscreen', function () { // detect fullscreen toggling
if (window.console) window.console.log('enterFullscreen');
});
map.on('exitFullscreen', function () {
if (window.console) window.console.log('exitFullscreen');
});
// layerControl = new L.control.layers(baseMaps, overlayMaps).addTo(map);
L.control.scale({ position: "bottomleft", metric: true, imperial: true }).addTo(map);
drawSimpleActivities();
}
// Here I my initializer function
This drawSimpleActivities function is basically drawing polygons on different cities. Here My problem is I want to load my kml first then load this polygons so that my polygons gets on top of kml to work perfectly. I have tried async await and promises But I did not worked for me.I cannot use settimeout as time here is dependent on server.

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);

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 }
});
};