I am using Australian government map data found here: Victoria, Australia locality data, which is provided in the EPSG4326 projection.
When I try to use the data with leaflet, of course, my data is a bit distorted due to the earth's curvature - so my data is not represented properly on the screen because the maps are using a different projection to my data.
I have tried to force the map to use EPSG4326 by setting it in Map options and also in the TileLayer, as shown here:
var gisLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//subdomains: ['0', '1', '2', '3'],
attribution: 'openstreetmap',
reuseTiles: true,
updateWhenIdle: false,
crs: L.CRS.EPSG4326
});
var map = L.map('map', {
center: [-28.5, 135.575],
zoom: 4
,crs: L.CRS.EPSG4326
});
map.addLayer(gisLayer);
but when I do this, the maps do not display. I don't believe the map tiles have been generated for this projection. That said, there is a suggestion in the docos here that it might be possible, but I couldn't get this working. (Did I just get the configuration wrong?)
It seemed like it was working when I retrieved the data and placed it on the map, but when I got the map bounds to select the data for the visible region, it also showed distorted. So I tried to convert the map bounds to EPSG4326 manually, to pass that to the database, as follows:
var bounds = map.getBounds();
var coords4326_NE = L.Projection.SphericalMercator.unproject(bounds._northEast);
console.log(coords4326_NE);
but that broke the code. I was passing the wrong structure in and I couldn't get this right either.
Of course, I would also accept transforming every point returned from the database to the default projection, which I think is EPSG3857. But I am having doing this as well.
I have provided as jsFiddle here where I have been attempting to do the above.
Does anyone know how I can achieve this?
Your GeoJSON data is encoded in WGS84, which can be simply plotted on EPSG4326, but is also the expected input for EPSG3857 (Web Mercator).
From that Wikipedia article:
While the Web Mercator's formulas are for the spherical form of the Mercator, geographical coordinates are required to be in the WGS 84 ellipsoidal datum.
Therefore, you do not have to change anything to plot your data onto a regular Leaflet map, using regular tiles (from OSM or Mapbox, which provide tiles only for EPSG3857).
Related
Im trying to bind geoserver WFS GetFeature request with BBOX and adding the geojson layer to Mapbox map object so that whenever map is panned and zoomed in/out, the geojson data within the map screen visible window will be downloaded and rendered instead of loading entire table geojson data. Here is the code snippet.
function geturl(){
return 'http://localhost:8080/geoserver/demo/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=demo:assets&outputFormat=application/json'
+'&bbox='
+map.getBounds().getSouthWest().lat+','
+map.getBounds().getSouthWest().lng+','
+map.getBounds().getNorthEast().lat+','
+map.getBounds().getNorthEast().lng
}
map.on('load', () => {
map.addSource('city_assets', {
type: 'geojson',
data:geturl()
})};
Although I could see the points were loaded only in the viewing BBOX window for the first time, I don't see rest of the point data being downloaded and rendered when I zoom in/out or pan around.
It would be really helpful if someone can guide me if I have missed anything to make it working. Please feel free to ask for additional info. Thanks.
-Prem
I'm working on leaflet Js in which I expect user inputs of coordinates in X, Y form. i.e. Ghana meter Grid and I need to convert the X, Y into latitudes, and longitudes so that they can be plotted as markers on leaflet Js.
Since you are working with Javascript, I suggest to approach this problem with proj4js (the Javascript implementation of OSGeo's proj, the industry standard for converting coordinates between coordinate reference systems).
First, grab a release of proj4js, or use a CDN-hosted release, e.g.:
<script src='https://unpkg.com/proj4#2.6.2/dist/proj4.js'></script>
Proj4js doesn't come with the full definition list of CRSs (Coordinate Reference Systems), so you'll have to define the CRSs you want to work with. In your case, it's gonna be EPSG:25000 AKA "Ghana Metre Grid" and EPSG:4326 AKA "Equirectangular WGS84" AKA "latitude-longitude":
proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:25000","+proj=tmerc +lat_0=4.666666666666667 +lon_0=-1 +k=0.99975 +x_0=274319.51 +y_0=0 +ellps=clrk80 +towgs84=-130,29,364,0,0,0,0 +units=m +no_defs");
You can fing the PROJ definitions of CRSs in either the data files of a PROJ release, or websites such as epsg.io.
Once the CRSs have been defined, call proj4js with their names and the coordinates to transform, e.g. to transform from EPSG:4326 to EPSG:25000...
console.log( proj4("EPSG:4326", "EPSG:25000", [-0.187, 5.6037]) );
...or from EPSG:25000 to EPSG:4326...
console.log( proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95]) );
See a working example here.
Be wary of the order of coordinates (lat-lon vs lon-lat, or x-y vs y-x). Leaflet uses lat-lng, but proj uses x-y and lng-lat, so you'll have to flip the coordinates, e.g.
var accraLngLat = proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95]);
L.marker([accraLngLat[1], accraLngLat[0]]).addTo(map);
or
var accraLngLat = proj4("EPSG:25000", "EPSG:4326", [364346.57, 103339.95]);
var accraLatLng = L.GeoJSON.coordsToLatLng(accraLngLat);
L.marker(accraLatLng).addTo(map);
See a working example here.
Also note that proj4js does all the reprojection work and there are no API calls involved.
Since you are specifically working with Leaflet, you might also be interested in proj4leaflet, although you might not need it. It'll be useful if you want to use Leaflet to display raster data (or map tiles) in different projections.
You can use this online converter: http://epsg.io/?q=Ghana
Using API parameters, you may be able to perform a GET request when the user inputs coordinates for conversion via your app.
I am using leafletjs to plot geographical maps using OSM tiles. I used the following GeoJSON as a map layer http://code.highcharts.com/mapdata/1.0.0/custom/world.js which uses data from naturalearthdata.com
But it is not working. The tile layer is shown correctly. But the GeoJSON data is not being shown. I can only see a white line across the map.
var worldMapData = {}; //the geoJson data from http://code.highcharts.com/mapdata/1.0.0/custom/world.js
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: true,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
function style( feature ) {
return {
fillColor: '#FFEDA0',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
map.addLayer(L.geoJson(worldMapData, {style: style}));
Am I missing something? Is the above GeoJSON not according to specification? And if not, from where can I download GeoJSONs for all countries which are compatible with leafletjs?
[Edit] Here is the jsfiddle for the above problem http://jsfiddle.net/1x1p55fy/
The GeoJSON data is being loaded correctly, and is being displayed as expected. However, the GeoJSON data is not conformant to the GeoJSON spec, in regards to the coordinate reference system. Let me quote from the GeoJSON specs:
The coordinate reference system for all GeoJSON coordinates is a
geographic coordinate reference system, using the World Geodetic
System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units
of decimal degrees. This is equivalent to the coordinate reference
system identified by the Open Geospatial Consortium (OGC) URN
urn:ogc:def:crs:OGC::CRS84. An OPTIONAL third-position element SHALL
be the height in meters above or below the WGS 84 reference
ellipsoid. In the absence of elevation values, applications
sensitive to height or depth SHOULD interpret positions as being at
local ground or sea level.
Note: the use of alternative coordinate reference systems was
specified in [GJ2008], but it has been removed from this version of
the specification because the use of different coordinate reference
systems -- especially in the manner specified in [GJ2008] -- has
proven to have interoperability issues. In general, GeoJSON
processing software is not expected to have access to coordinate
reference system databases or to have network access to coordinate
reference system transformation parameters. However, where all
involved parties have a prior arrangement, alternative coordinate
reference systems can be used without risk of data being
misinterpreted.
If you have a closer look at the data in https://code.highcharts.com/mapdata/custom/world-highres.geo.json (or http://code.highcharts.com/mapdata/1.0.0/custom/world.js for that matter) you'll see that, in fact, the coordinates are not in latitude-longitude relative to the WGS84 geoid, and that there is a reference to the EPSG:54003 coordinate reference system (cylindrical miller), with a custom scale and offset transform.
As the GeoJSON spec already stated, you are hereby discouraged to use any other CRS than EPSG:4326 (WGS84 in latitude-longitude) in your GeoJSON data.
Find some conformant GeoJSON, and it will look OK in Leaflet. Leaflet does not handle reprojection of GeoJSON data, nor it handles the scale transforms that highcharts data implies.
I'm trying to use a Mapbox style in my map. The style loads fine, but it seems to be way off. My GeoJson file should load points in California, and it works fine with other tilesets, but using the Mapbox dataset it loads somewhere north of Canada in the arctic circle. This seems like it's probably a problem with projections. The GeoJson file is in WGS84, which I believe is the Geojson default. The setview centers the view on the US using other tilesets but also centers the data north of Canada using Mapbox data. Here's the bit where I include the Mapbox data
L.mapbox.accessToken = 'correct token';
var map = L.mapbox.map('map')
.setView([43.64701, -79.39425], 4);
L.mapbox.styleLayer('mapbox://styles/mapbox/light-v9').addTo(map);
Leaflet uses LatLng rather than mapbox's LngLat. Do you want your data to be around [43.64701, -79.39425], or around [-79.39425, 43.64701]?
See also Tom MacWright's explanation on why some libraries/formats use lat-lng and some use lng-lat.
I'm using leaflet.draw, and when a rectangle is created, i'm fetching rectangle's data using layer.toGeoJSON(), and then i save it into a db using ajax.
After that, when the user display the map again, i'm loading previously saved data, and push them into the featureGroup reserved for leaflet.draw using L.GeoJSON.geometryToLayer()
Problem is that my previously created rectangle is now a real polygon for leaflet.draw.
"Rectangle" does not exist in geoJson specs, so i can understand that.
Now, in "properties" of the geojson, i know that the previous shape was a rectangle, with the "type" attribut.
My question is : is there a way to force a shape to be a rectangle in a leaflet.draw point of view ?
Thanks in advance !
I ran into this same problem and have come up with a solutions which works for me although it isn't the most elegant method.
Using leaflet.draw I receive a new layer on which I call layer.toGeoJSON() to save the rectangle to my database. On refresh of the page I'm pulling that GeoJSON representation back from my database and storing it with:
var geojson = JSON.parse(geojson_string);
What I tried first was to build my own Rectangle from the points and add it to drawnItems.
var bounds = L.latLngBounds(geojson.geometry.coordinates);
var rect = L.rectangle(bounds);
drawnItems.addLayer(rect);
This code did not throw an error, but it also didn't show a rectangle on the map. After further investigation I found the coordinate pairs output from layer.toGeoJSON() and the coordinate pairs needed by L.latLngBounds() were reversed (i.e. one was [lat, lng] and the other was [lng, lat]) which caused the Rectangle to be created but in entirely the wrong location. To get around this I constructed the layer first as a GeoJSON layer which results in a polygon, but then use that representation's bounds to construct my Rectangle.
var geojson_layer = L.GeoJSON.geometryToLayer(geojson);
var rect = L.rectangle(geojson_layer.getBounds());
drawnItems.addLayer(rect);
This successfully creates a Rectangle which leaflet.draw recognizes and allows for the edit tools to work correctly.