I am trying to use geojson data to place points on a map. When I run my geojson data through a validator, the points appear on the edge of the map above the arctic circle and I'm not sure why. I plan on using this data with a leaflet map and a project built with angularjs. If anyone can add insight about any problems in my geojson code below, or things to look out for while using leaflet and angular, I would appreciate it! Thanks!
Here is my geojson code
{"type":"FeatureCollection",
"features":[
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.1199, -86.7775]
},
"properties":{
"name":"Kroger"
}
},
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.0903, -86.7323]
},
"properties":{
"name":"ALDI"
}
},
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.1266, -86.8474]
},
"properties":{
"name":"Publix"
}
}
]
}
GeoJSON uses a longitude-latitude (or easting-northing) format for the coordinates (read the relevant bit of the GeoJSON specification), but your points seem to be in latitude-longitude.
I know this is confusing, since Leaflet uses lat-lng instead of lng-lat. Confusion abounds.
Make sure to use longitude-latitude for the coordinates of your GeoJSON and you'll be fine.
Related
I am working on a project that utilizes Leaflet with a lot of tailored markers and colored lines/polygons. We are not using a GeoJSON layer in Leaflet.
I would like to export all or a subset of these objects/layers to GeoJSON and then import them back in without losing any detail like color and description.
Using the native toGeoJSON function of Leaflet, I can get GeoJSON data for anything I want on the map. Here is some code that produces GeoJSON for everything on the map:
function exportToGeoJSON() {
var allMarkersObjArray = [];
map.eachLayer(function (layer) {
allMarkersObjArray.push(layer);
});
var layerGroup = L.layerGroup(allMarkersObjArray);
var data = layerGroup.toGeoJSON();
var json = JSON.stringify(data); // Stringify the object
return json;
}
A snippet of the resulting GeoJSON created looks like this:
{
"type":"Feature",
"properties":{},
"geometry":{
"type":"Point",
"coordinates":[-75.668159,36.014897]}
}
We get the basic geometry which is nice but no properties with things like:
"properties": {
"id": 1,
"name": “Marker 1”,
"description": “This is a marker”,
"marker-size": "small",
"marker-color": "#f5a91a",
"marker-symbol": "b"
}
I want to find the best way to create these properties. I could certainly build the code to extract the properties from the Leaflet Marker object as an example but maybe there is a better way.
I have searched for potential plug-ins to do this but nothing is coming up on the radar screen. I would think other folks would like this type of capability.
Anyway, any thought or comments are welcome.
I'm trying to plot a supplied vector tile layer onto a map using MapBox GL JS. I've followed the documentation here but nothing apart from the basic map is being output and there are no console errors. In the browser's Network tab I can see lots of .pbf requests being returned with data so it would seem that the endpoint is passing data back, but I don't know how to determine what the problem is in plotting that data onto the map.
The code is as follows:
mapboxgl.accessToken = '[my access token]';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 6,
center: [-0.118092, 51.509865]
});
map.once("load", () => {
map.addSource("ncn", {
type: "vector",
tiles: [
"https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
]
});
map.addLayer({
id: "ncn-lines",
type: "line",
source: "ncn",
"source-layer": "NCN_Vector_Tile_Package",
"layout": {
"visibility": "visible"
},
'paint': {
'line-color': 'rgb(255, 0, 0)'
}
});
});
I am fairly sure that the type should be line (rather than fill) as the data is supposed to contain route lines rather than vector shapes.
I don't have access to the Arcgis server so can't see how anything is configured at that side. Can anyone suggest what might be wrong here and/or how to debug?
It looks like the value for source-layer is not correct - it should be NCN_2020. Here's a demo showing it working: https://jsbin.com/xunuhibuki/1/edit?html,output
How do you get that value? I'm not quite sure the best way, but the way I found: add ?f=html to your vector tile layer like this: https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html then click "Styles" link at the bottom which gives you an example of how to construct your map.addLayer() commands in your mapboxgl code.
Hi I have a problem with Asymmetrik/ngx-leaflet geojson interpretation.
My geojson is automatically generated with color and opacity corresponding to the map information. Each geojson is a FeatureCollection with multiple Polygons differently styled.
I've tried different options, I've found to set style of the Polygons, but non of them seems to work.
Example geoJson:
{
"type":"FeatureCollection",
"features":[
{
"geometry":{
"type":"Polygon",
"coordinates":[
[...]
]
},
"type":"Feature",
"properties":{
"style":{
"color":"#ff0000",
"weight":0,
"opacity":0.2
}
}
}, ... ]}
I've been trying multiple options that seems to work for people. Also there is nothing on styling inside geojson in the ngx-leaflet docs.
How should I set the styling above to make ngx-leaflet display proper color, stroke and opacity?
ngx-leaflet doesn't do anything to manipulate the layers you add to the map. So, it's up to you to provide the style options when you create the features.
E.g.,
let geoJson = {...};
let options = { "color": "#ff7800", "weight": 5, "opacity": 0.65 };
L.geoJSON(geoJson, options).addTo(map);
This example was taken from here: http://leafletjs.com/examples/geojson/
Edit: I reformatted the question as it was pointed out to me that the problem is not in the Mapbox API.
As of a few days ago an application using mapbox matching API coupled with leaflet.js started drawing polylines on the other side of the planet.
While the path it self looks as it should be, leaflet drew it on another continent.
The Mapbox Matching API returns the response following GEOJson standard as:
{
"code": "Ok",
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": "e`s`YmyazuAg`#y]uo#ej#eQcOkFkEyCeCaYmUuFoMkWgOo[_ReGqDoGyDmVaPaU|RoDlDsa#z`#sTdSXJf#j#??Jr#Mp#ML[Z}#ZiAHgAK]MaJzJsUbWkSxRyHpHuLhLuFzFqDrDq[`\\oPrPyK|KmU|TuLzKyClCr#ZZf#Fj#Ij#e#b#zn#fZ}Zf]gCdKmHxQErC[jV",
"properties": {
"confidence": 0.45413768894813844,
"distance": 1366.4,
"duration": 243.3,
"matchedPoints": [
[13.658131, 45.532583],
[13.659851, 45.534127],
[13.661445, 45.535438],
[13.662397, 45.535398],
[13.663582, 45.534237],
[13.666378, 45.531441],
[13.666457, 45.529215]
],
"indices": [0, 1, 2, 3, 4, 5, 6]
}
}]
}
Using the code below to draw the layer with leaflet.js results in a polyline drawn on a wrong position.
L.mapbox.mapmatching(geojson, options, function (error, layer) {
layer.addTo(map);
layer.setStyle({
color: '#3c8dbc',
weight: 4,
opacity: 0.8
});
//fit bounds to added layer
map.fitBounds(layer.getBounds());
The result being:
While the polyline it self is as it should be, the position is not.
I speculate the problem is that leaflet expect the coordinates to be in format [latitude, longitude] while the Mapbox matching API returns GEOJson format namely [longitude, latitude].
Should I manually switch the coordinates of the response before drawing it or am I just doing it wrong?
Thanks.
Edit 2 : It appears the problem is in fact in different formats. More about it can be found in this post
Changing the order of the coordinates in the returned object is very tedious hence an elegant solution to this would be greatly appropriated.
Newb alert: I'm completely new to OpenLayers 3 and mapping in general. My background is in SQL Server, and back end systems design. I have no experience in HTML, JavaScript, web development etc. I'm sure this is a very simple issue but I can't seem to figure out the details.
I've modified one of the samples for OpenLayers.org and it doesn't behave as expected. It uses a GeoJSON object and draws points on the map, but they don't end up where expected. Apparently there is some conversion or something that happens.
The sample I used is here: GeoJSON example
My test map is here: Test Map
The GeoJSON object is defined as
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-8.575653e6, 4.70681e6]
//White House, Washington DC Lon -77.03648269999997 Lat 38.89767579999999
}
}
]
};
Through a little trial and error, I was able to get my point to display on the White House Lawn (NSA has no doubt flagged this conversation) and there is no resemblance to the latitude and longitude I pulled from a different source. I understand that the order of coordinates is [lon, lat] but I can see no rhyme or reason that -77.036 = -8.575e6. The other point [0,0] displays right where I would expect it.
I have tried to figure this out myself and searched quite a few places, but I can't seem to find the answer.
Also, if you could direct me to any good tutorials, it would be most appreciated. Thanks!
Your GeoJSON data is in EPSG:3857, a different coordinate system than latitude/longitude. The coordinates are not equal, but represent the same geographical location.
See http://spatialreference.org/ref/sr-org/6864/ for information about EPSG:3857. The map there clearly shows the difference between a given points coordinates in the coordinate reference systems.
Openlayers actually allows you to convert these using the ol.proj functions.
For instance, to convert from lat/lon (EPSG:4326) to Spherical mercator ( EPSG:3857 - the one most online web maps use, in metres) you could do:-
var newCoordinates = ol.proj.transform(latLonCoordinate, "EPSG:4326", "EPSG:3857");
newCoordinates would then contain the converted values in a coordinates array. Same can be done for 'extents' (the box coordinates for top left/bottom right of a map view) using ol.proj.transformExtent(extent, fromProj, toProj).