Can someone explain me why this leaflet code works for visualizing the GeoJson data of the state New York but I can't draw the data of the city new york. I used the same export preferences for the files in QGIS.
I used the data from the following links:
New York city
http://www.nyc.gov/html/dcp/html/bytes/districts_download_metadata.shtml
New York state
http://cugir.mannlib.cornell.edu/bucketinfo.jsp?id=7865
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="style_blank.css" />
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="sdfgsdgdfgfdsgd.js"></script>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [5,28],
zoom: 3,
minZoom: 2,
maxZoom: 18
});
L.geoJson(data, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.description);
}
}).addTo(map);
</script>
</body>
</html>
From the lack of specificity of the question, it's difficult to say where the problem lies. However, I have a good guess.
I followed your link to the city data and downloaded the "Borough Boundaries" shapefile, then imported it into QGIS. The coordinate units appear to be either feet or meters, indicating that it is projected data. Leaflet can't deal with projected coordinates; it requires unprojected lat/long (decimal degree) coordinates. What you need to do is follow these steps:
1) Find out what projection the data is in;
2) Assign that projection to the data using GIS software (such as free, open-source QGIS);
3) Reproject the data into the WGS 84 (EPSG:4326) coordinate reference system;
4) Save the reprojected data as a new GeoJSON.
Try putting the city data in a gist
Github will display the data on a basemap, and you will be able to see if the data are
not displaying (likely problem with the geojson)
displaying, but in the wrong place (likely projection issue)
displaying in the right place (likely problem in your code)
You will need to import a tile first, several are paid but with little research you can find plenty of freebies.
Related
I've successfully implemented a map of Denmark using Leaflet. However, I need to show the municipalities in Denmark, and this is surprisingly complicated.
On this page, I gather that there are Mapbox Tileset IDs for administrative boundaries, so I suppose in principle, I could use these tilesets, but I feel this is not adequately explained on this page.
Can tilesets be added to a Leaflet map as a layer? This is unclear. My code for the basic map looks like this:
var map = L.map('map').setView([56,12], 7);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 20,
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: '[my_access_token]'
}).addTo(map);
Just replacing mapbox/light-v9 with e.g. mapbox/boundaries-adm4-v3 and the map is gone. Adding an entire new L.tilelayer(...id('mapbox/boundaries-adm4-v3')...).addTo(map); gives me the same old map with no administrative boundaries.
Am I naïve in expecting Mapbox to provide me with a free map of the municipalities of Denmark?
Have I combined too many things by using Leaflet, Mapbox and OpenStreetMaps?
How do I accomplish what I need? 1. Drawing of the Danish municipality boundaries on the map; 2. Coloring of selected municipalities.
Note that these are Vector Tiles.
Leaflet has no built-in functionality for rendering these types of tiles. However, you can take a look at the officially documented Vector-Tiles plugins: https://leafletjs.com/plugins.html#vector-tiles
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 have a map in leafletJS and when the icon moves along, I have the angle and I am using the Leaflet.RotatedMarker plugin to rotate the icon to face where its heading.
Does leaflet js have a plugin that can enable me to not supply the angle myself ...
L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);
...and instead use a function like gogle maps' computeheading() ?
Edit:
Does mapbox have a function like computeHeading
https://github.com/bbecquet/Leaflet.RotatedMarker
js:
var boat_marker = L.marker([set_lat, set_long], {
pid: guid(),
// rotationAngle: 45,
icon: boatIcon,
draggable: true,
}).addTo(mymap);
function rotated_point() {
boat_marker.setRotationAngle(90);
}
No.
Leaflet has only a minimal set of geodesy-related functions. Functions to calculate headings, azymuths, geodesic distances or great circles are not needed for basic Leaflet functionality, and are not included.
A popular approach to this kind of problems is to rely on the javascript bindings of geographiclib for geodesy-related calculations (such as heading/azymuth), in the same way turf.js helps with geoprocessing of vector data.
Note that geographiclib is not a Leaflet plugin, but rather a generic set of geodesic functions. You will need to use a bit of care to get the latitude and longitude components of L.LatLngs, and fetch only the azymuth (and drop the distance) from the solution to the geodesic problem.
I am using Tileserver to host my mbtiles file. I am trying to open my mbtile sfile using leaflet in ionic. I am not able to see map. Following is the code that I am using:
leaflet.tileLayer('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(map);
I have also tried to use:
var mb = leaflet.tileLayer.mbTiles('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(this.map);
But I am just able to see grey screen on my device instead of map.
It sounds like leaflet is loading the tiles from your tile server, but the map you are serving doesn't have data for the location and zoom level you are looking at. Try this script.
Leaflet example:
<script>
var map = L.map('map').
setView([lat, lon], zoom );
//OpenMapTiles
L.tileLayer('http://subdomain/styles/klokantech-basic/{z}/{x}/{y}.png', {
//tms: true,
maxZoom: 20,
attribution: 'Map data © OpenStreetMap'
}).addTo(map);
</script>
An alternative is to use Mapbox GL JS, this pushes the rendering to your browser and allows you to use tileserver-gl-light as well:
<script src='http://subdomain/mapbox-gl.js'></script>
<link href='http://subdomain/mapbox-gl.css' rel='stylesheet' />
Mapbox GL JS
var map = new mapboxgl.Map({
container: 'map',
style: 'http://subdomain/styles/klokantech-basic/style.json',
center: [lon, lat],
zoom: 7
});
When creating the mbtiles file, make sure you create it to support the zoom level and location you set, OpenMapTiles defaults to a zoom level of 7, it may needs to be increased for your map, I use 14, which supports a zoom level to 20 for rendering.
I followed the introduction on the home page of Proj4Leaflet to create a basic slippy-map with their example projection (code below). This is working without issue, but is using the tile servers of the company that maintains Proj4Leafet, specifically: http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png
When I try to use an alternative tile server, such as Mapbox's https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken} (where I use my own token), CartoDB's http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png or OSM's http://a.tile.openstreetmap.org/{z}/{x}/{y}.png the map simply doesn't render and I get a blank grey map.
Is it possible to use other tile servers with Proj4Leaflet, or is there something in my configuration that is incompatible with them?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaflet GeoJSON</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/require.js"></script>
<script>
requirejs.config({
baseUrl: 'js',
paths: {
"leaflet": "http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet"
}
});
requirejs(['leaflet', 'proj4', 'proj4leaflet'],
function (L, proj4, proj4leaflet) {
// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS(
'EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5],
origin: [0, 0]
});
var map = new L.map('map',
{
center: [59.35, 18.066667],
zoom: 10,
maxZoom: 14,
minZoom: 0,
crs: crs
});
L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
maxZoom: crs.options.resolutions.length,
minZoom: 0,
continuousWorld: true,
attribution: 'Map data © OpenStreetMap contributors, Imagery © 2013 Kartena'
}).addTo(map);
});
</script>
</body>
</html>
Proj4Leaflet is a Leaflet plugin meant for when you need to use a Coordinate Reference System (CRS) that's not supported by Leaflet out of the box. Almost every tileprovider out there uses EPSG3857 which is Leaflet's default CRS:
The most common CRS for online maps, used by almost all free and commercial tile providers. Uses Spherical Mercator projection. Set in by default in Map's crs option.
Mapbox, CartoDB and OSM all serve EPSG3857 tilesets. From the Mapbox's help page:
Mapbox supports the popular Web Mercator projection, and currently does not support any other projections as output. Web Mercator is a nearly conformal projection that is adopted by the vast majority of web maps and its use allows you to combine Mapbox’s maps with other layers in the same projection. Commonly this projection is referred to as EPSG:900913 or EPSG:3857.
https://www.mapbox.com/help/projection-support/
Without looking i'm betting you'll find the same answer over at CartoDB and OSM. If you need to use EPSG3006 you'll need to stick with providers that serve tiles in that projection. Here's one: http://maps.omniscale.com/en/openstreetmap/epsg-3006
Mapbox will only serve tiles in Web Mercator (EPSG:3857). To use proj4Leaflet with tiled data you need tiles which are already projected (for example NASA provides tiled maps in stereographic projections for the poles). You will either need to find or establish a tile server which is set to output in your desired projection (EPSG:3006).
proj4 will however convert vector data such as geojson on the fly.