We Keep Coding

Dealing with a huge GeoJson in leaflet

I'm currently dealing with a Huge GeoJson (about 100Mb) that contains all nation subdivisions in the world.
I want to display this GeoJson in a Leaflet map.
I have implemented this add-on that binds geojson-vt with leaflet.
However, simply I can't send 100Mb of data all the times...
This is a Javascript sample of the Leaflet implementation in JS:
//Map init
var map = L.map('map').setView([51.505, -0.09], 1);
//Tile layer
var tile_layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
//GeoJson fetch
world_geojson = fetch('./world.json').then(response => response.json()).then(
world_geojson => {
var options = {
maxZoom: 16,
tolerance: 3,
debug: 0,
style: {color:'#000',fillColor:"#0f0",weight: 1,opacity: 0.5,fillOpacity: 0.2}
};
//Actual geojson-vt layer implementation
var geojson_layer = L.geoJson.vt(world_geojson, options).addTo(map);
}
);
There is a way or some tricks to reduce the quantity of data sent to the users?
Thanks for support!

Get all generated route points (of lines) to check if you hear route deviation - Leaflet Js [duplicate]

I'm trying to get the waypoints from a route (leaflet routing machine) as latitude and longitude so I can write these out to a database. However when I call getwaypoints I also get additional data about the route that I don't want.
How do i get just the lat/long as JSON so I can write it out to a db?
var map = L.map('map').setView([-27.54, 152.9], 10);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap © CartoDB',
maxZoom: 19
}).addTo(map);
var routeControl = L.Routing.control({waypoints: [
L.latLng(-27.38851, 153.11606),
L.latLng(-27.47577, 153.01693)
]}).addTo(map);
var routeArray = new Array();
routeArray = routeControl.getWaypoints();
alert (JSON.stringify(routeArray));
Output
[{"options":{"allowUTurn":false},"latLng":{"lat":-27.38851,"lng":153.11606},"_initHooksCalled":true},{"options":{"allowUTurn":false},"latLng":{"lat":-27.47577,"lng":153.01693},"_initHooksCalled":true}]
Please see example fiddle: http://jsfiddle.net/drcccx91/8/

Solution was to not convert to JSON
alert (routeArray[0].latLng.lng);

How can I reverse geocode to get country name of a given state/regione or city name?

I am trying to find the country name of a given location, for example lets say I know pennsylvania how do I find out automatically United States of America?
I found a couple of links for reverse geocoding like this one which gives me the full address on click on a map and this one which works while searching. The last one looks more promising as it uses nomination.
This is how I place a marker for pennsylvania.
var map = L.map('map').setView([41.203323, -77.194527], 1);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmLayer = new L.TileLayer(osmUrl, {
maxZoom: 19,
attribution: 'Map data © OpenStreetMap contributors'
});
map.addLayer(osmLayer);
var markers = [];
var marker1 = L.marker([41.203323, -77.194527],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
function markerFunction(id){
for (var i in markers){
var markerID = markers[i].options.title;
if (markerID == id){
markers[i].openPopup();
};
}
}
I don't need a marker tho, I'd be fine to simply display the country name on console.log() then I will work it out as I only need to get the country name.
jSFiddle

You can use googleapi to get the country code while using leaflet to do your mapping.
$.ajax({ url:'http://maps.googleapis.com/maps/api/geocode/json?latlng=41.203323,-77.194527&sensor=true',
success: function(data){
var country = data.results[0].address_components[6].long_name;
console.log(country);
}
});

How to pass string address to leaflet routing machine to get direction based on string address?

Well, I am using leaflet api and then I found a very nice supporting plugin called leaflet routing machine for showing address from A to B with nice route.
However, leaflet routing machine working fine with passing of latlng but not working with passing address so can anyone tell how it can work as I know property information on following link:
So routing waypoint have property called name but don;t know how to use it to provide address a and address B
Here is a code which shows new Zealand Auckland city....and trying to pass address but doesn't work
< script >
var mymap = L.map('mapid', {
center: [-36.85625, 174.76141],
zoom: 13
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.yourkey', {
attribution: 'Log Sample',
id: 'mapbox.streets'
}).addTo(mymap);
//L.Control.geocoder().addTo(mymap);
L.Routing.control({
waypoints: [
//L.latLng(-36.87178, 174.753),
//L.latLng(-36.84514, 174.76493)
L.name("12 Morning Star place, Auckland"),
L.name("198 Dominion road, Mount Roskill, Auckland")
],
routeWhileDragging: false
}).addTo(mymap); < /script>

As far as remember you can pass L.Routing.Waypoint object to waypoints as well.
So, your code would look like:
....
var geocoder = L.Control.Geocoder.nominatim()
L.Routing.control({
geocoder: geocoder,
waypoints: [
//L.latLng(-36.87178, 174.753),
//L.latLng(-36.84514, 174.76493)
L.Routing.waypoint(null,"12 Morning Star place, Auckland"),
L.Routing.waypoint(null,"198 Dominion road, Mount Roskill, Auckland")
],
routeWhileDragging: false,
}).addTo(mymap);
But this again doesn't geocode it. Instead just populates waypoints textboxes. You still need to hit enter (or trigger it by js) on each of the boxes to run geocoder.
Another option would be manually grabbing data from geocoder and create L.Routing.Waypoint or L.LatLng object before setting waypoints
geocoder.geocode('Montreal', function(a, b) {
// depending on geocoder results may be either in a or b
console.log(a);
// choose the best result here. probably the first one in array
// create waypoint object
var wpt = L.Routing.waypoint(L.latLng(lat, lng), name)
waypoints.push(wpt);
})
...
// setting waypoints
routingControl.setWaypoints(waypoints);
Update to cover question in comments
The custom markers with popup could be added via L.Routing.Plan. Your L.Routing.control object could be initialized like so:
var geocoder = L.Control.Geocoder.nominatim(),
waypoints = [], // can be populated later
routeControl = L.Routing.control({
plan: L.Routing.plan(waypoints, {
createMarker: function(i, wp) {
return L.marker(wp.latLng, {
draggable: true
}).bindPopup("Some data for popup");
},
geocoder: geocoder,
routeWhileDragging: false,
})
}).addTo(map);

Destination coordinates in leaflet routing

I am using nominatim for leaflet routing. The routing works perfectly as i want-a user can input from and destination location in search box and the map shows the route between the two points as in the picture below.
But I want to get the coordinates of the destination location. Is there any way i can do this ? Below is code sample how i have added map to my page.
var map = L.map('map').setView([60.4500, 22.2667], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map)
L.Routing.control({
waypoints: [
//L.latLng(60.323935,22.344035)
],
geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);

Look at the RoutingResultEvent. It will be called each time a route has been successfully calculated. The event the handler will receive contains the waypoints used for the route.
So basically
var x = L.Routing.control({
// YOUR STUFF
geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);
x.on("routesfound", function(e) {
var waypoints = e.waypoints || [];
var destination = waypoints[waypoints.length - 1]; // there you have the destination point between your hands
});

you can use:
routeControl.on("routesfound", function(e) {
coordinates=e.routes[0].coordinates;
destination=coordinates[coordinates.length-1];
});
there you have the coordinates, the waypoints are not the same as the coordinates, what you are looking for is for the coordinates of the route found, and not for the waypoints that you have asked for, then you can take the coordinates.lenght-1 and there you will have what you wanted