Get Bounds with Leaflet
0
I have a DC.JSc Charts which are filtering my icons on my Leaflet Map. Basically, when I'm filtering I want my map to zoom on my selected icons.
var onFilt = function(chart, filter) {
updateMap(locations.top(Infinity));
};
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
markersLayer.clearLayers();
clusterLayer.clearLayers();
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
map.getBounds();
}
});
};
I've tried:
map.getBounds(); //No response
L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference
map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'
Also tried :
if (d.latitude != null && d.latitude != undefined) {
d.ll = L.latLng(d.latitude, d.longitude);
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});
Error: Object doesn't support property or method 'getBounds'
Any ideas?
Found my own solution: map.fitBounds(clusterLayer.getBounds());
javascript leaflet
asked Nov 20 at 3:55
Simon GIS
8618
add a comment |
0
I have a DC.JSc Charts which are filtering my icons on my Leaflet Map. Basically, when I'm filtering I want my map to zoom on my selected icons.
var onFilt = function(chart, filter) {
updateMap(locations.top(Infinity));
};
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
markersLayer.clearLayers();
clusterLayer.clearLayers();
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
map.getBounds();
}
});
};
I've tried:
map.getBounds(); //No response
L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference
map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'
Also tried :
if (d.latitude != null && d.latitude != undefined) {
d.ll = L.latLng(d.latitude, d.longitude);
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});
Error: Object doesn't support property or method 'getBounds'
Any ideas?
Found my own solution: map.fitBounds(clusterLayer.getBounds());
javascript leaflet
asked Nov 20 at 3:55
Simon GIS
8618
add a comment |
0
0
0
I have a DC.JSc Charts which are filtering my icons on my Leaflet Map. Basically, when I'm filtering I want my map to zoom on my selected icons.
var onFilt = function(chart, filter) {
updateMap(locations.top(Infinity));
};
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
markersLayer.clearLayers();
clusterLayer.clearLayers();
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
map.getBounds();
}
});
};
I've tried:
map.getBounds(); //No response
L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference
map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'
Also tried :
if (d.latitude != null && d.latitude != undefined) {
d.ll = L.latLng(d.latitude, d.longitude);
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});
Error: Object doesn't support property or method 'getBounds'
Any ideas?
Found my own solution: map.fitBounds(clusterLayer.getBounds());
javascript leaflet
asked Nov 20 at 3:55
Simon GIS
8618
I have a DC.JSc Charts which are filtering my icons on my Leaflet Map. Basically, when I'm filtering I want my map to zoom on my selected icons.
var onFilt = function(chart, filter) {
updateMap(locations.top(Infinity));
};
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
markersLayer.clearLayers();
clusterLayer.clearLayers();
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
map.getBounds();
}
});
};
I've tried:
map.getBounds(); //No response
L.markersLayer.getBounds(); //SCRIPT5007: Unable to get property 'getBounds' of undefined or null reference
map.fitBounds(markersLayer.getBounds()); // Object doesn't support property or method 'getBounds'
Also tried :
if (d.latitude != null && d.latitude != undefined) {
d.ll = L.latLng(d.latitude, d.longitude);
var mark = L.marker([d.latitude, d.longitude]);
markersLayer.addLayer(mark);
clusterLayer.addLayer(mark);
};
map.addLayer(markersLayer);
map.fitBounds(markersLayer.getBounds());
});
Error: Object doesn't support property or method 'getBounds'
Any ideas?
Found my own solution: map.fitBounds(clusterLayer.getBounds());
javascript leaflet
javascript leaflet
asked Nov 20 at 3:55
Simon GIS
8618
asked Nov 20 at 3:55
Simon GIS
8618
edited Nov 20 at 4:29
asked Nov 20 at 3:55
Simon GIS
8618
asked Nov 20 at 3:55
Simon GIS
8618
asked Nov 20 at 3:55
Simon GIS
8618
8618
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
You're almost there, but have several mistakes: you're trying to getBounds within forEach loop, you're trying to getBounds from the wrong object.
Please see and run the snippet below click FILTER button, read comments in JS code.
I omitted the filtering part, left zooming only:
// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>answered Nov 20 at 4:56
Kosh Very
10k1823
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385989%2fget-bounds-with-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You're almost there, but have several mistakes: you're trying to getBounds within forEach loop, you're trying to getBounds from the wrong object.
Please see and run the snippet below click FILTER button, read comments in JS code.
I omitted the filtering part, left zooming only:
// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>answered Nov 20 at 4:56
Kosh Very
10k1823
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
add a comment |
2
You're almost there, but have several mistakes: you're trying to getBounds within forEach loop, you're trying to getBounds from the wrong object.
Please see and run the snippet below click FILTER button, read comments in JS code.
I omitted the filtering part, left zooming only:
// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>answered Nov 20 at 4:56
Kosh Very
10k1823
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
add a comment |
2
2
2
You're almost there, but have several mistakes: you're trying to getBounds within forEach loop, you're trying to getBounds from the wrong object.
Please see and run the snippet below click FILTER button, read comments in JS code.
I omitted the filtering part, left zooming only:
// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>answered Nov 20 at 4:56
Kosh Very
10k1823
You're almost there, but have several mistakes: you're trying to getBounds within forEach loop, you're trying to getBounds from the wrong object.
Please see and run the snippet below click FILTER button, read comments in JS code.
I omitted the filtering part, left zooming only:
// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>// add map
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
// Assuming that locations is already filtered:
var locations = [
{latitude: 51.5, longitude: -0.09},
{latitude: 51.53, longitude: -0.19},
{latitude: 51.45, longitude: 0},
{latitude: 51.56, longitude: 0.09}
];
// Updates the displayed map markers to reflect the crossfilter dimension passed in
var updateMap = function(locs) {
// clear the existing markers from the map
//markersLayer.clearLayers();
//clusterLayer.clearLayers();
var minlat = 200, minlon = 200, maxlat = -200, maxlon = -200;
locs.forEach(function(d, i) {
if (d.latitude != null && d.latitude != undefined) {
// add a Leaflet marker for the lat lng and insert the application's stated purpose in popup
//var mark = L.marker([d.latitude, d.longitude]);
//markersLayer.addLayer(mark);
//clusterLayer.addLayer(mark);
// find corners
if (minlat > d.latitude) minlat = d.latitude;
if (minlon > d.longitude) minlon = d.longitude;
if (maxlat < d.latitude) maxlat = d.latitude;
if (maxlon < d.longitude) maxlon = d.longitude;
// set markers
L.marker([d.latitude, d.longitude]).addTo(map);
}
});
c1 = L.latLng(minlat, minlon);
c2 = L.latLng(maxlat, maxlon);
// fit bounds
map.fitBounds(L.latLngBounds(c1, c2));
// correct zoom to fit markers
setTimeout(function() {
map.setZoom(map.getZoom() - 1);
}, 500);
};
function filtr() {
updateMap(locations);
};#mapid {
height: 180px;
}<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<button onclick="filtr()">FILTER</button>
<div id="mapid"></div>answered Nov 20 at 4:56
Kosh Very
10k1823
answered Nov 20 at 4:56
Kosh Very
10k1823
answered Nov 20 at 4:56
Kosh Very
10k1823
answered Nov 20 at 4:56
Kosh Very
10k1823
10k1823
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
add a comment |
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
Hi Kosh! Thanks for your help! Still have this filtering problem... before my Markers were filtering but can't figured it now... I mean what not selected in my charts I dont want to see it on my map... How can i fix that? You can see my full code here: github.com/renauld94/dashboard
– Simon GIS
Nov 21 at 15:11
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
@SimonGIS, if you have another problem, please feel free to create a new question with a Minimal, Complete, and Verifiable example. It would reach more people than a comment to the answered question. So you would get a solution faster.
– Kosh Very
Nov 21 at 16:05
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385989%2fget-bounds-with-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
