I have data in this format:JSON Data
but mapbox is not accepting data in this format. I searched a lot to convert this data into geojson but could not find any better way. How do I plot this type of data on the map? Any suggestions?
Edit:
My question is how do I format this type of data so it will be accepted by mapbox.
This kotlin script queries a datasette API and then plots them on a static mapbox image
https://github.com/yschimke/oksocial/blob/master/commands/london-hospitals
fun staticMap(start: Location, hospitals: List<Location>): String {
var markers = mutableListOf<String>();
markers.add("pin-m-marker+CCC(" + start.longitude + "," + start.latitude + ")");
hospitals.forEach {
markers.add("pin-s-hospital(" + it.longitude + "," + it.latitude + ")");
}
return "https://api.mapbox.com/v4/mapbox.dark/${markers.joinToString(",")}/auto/800x800.png";
}
Related
I have a JSON file that is not formatted in any way to meet geoJson standards. I am trying to load the data I parse from it on the map. I am able to create markers from the data and add them:
$.getJSON( tsdata, function ( data ) {
//loop through all the data
$.each( data.response.docs, function ( key, val ) {
//console.log(val);
if ( typeof val.mc_geo !== 'undefined' ) {
//lat lng isn't consitently 1, so getting the first only.
var geo = val.mc_geo;
var gLat = geo.toString().split( ',' )[ 0 ];
var gLng = geo.toString().split( ',' )[ 1 ];
//add markers to map
var marker = L.marker( [ gLat, gLng ],{icon: tsMarker,} ).bindPopup( "<p><strong><a href='" + val.filename + "'>" + val.title + "</a></strong><hr/><br/><strong>Abstract:</strong> " + truncateString( val.abstract, 350 ) + "</p><p><strong>Author(s): </strong>" + val.author + "<p><strong>Station:</strong> " + val.station_primary_full + "</p>" );
markerArray.push( marker );
}
} );
layer_group = L.layerGroup(markerArray);
map.addLayer(layer_group);
});
This adds the marker layers (layer_group) to the map no problem. However, if I try and add them to the:
L.control.layers(baseMaps, overlayMaps).addTo(map);
I get an error. Basically, L.control.layers is not seeing my layer_group. I can define it before the getJSON call, but L.control.layers will not show the layer full of data though it is "checked" in the layers panel... there are no markers displayed.
How do I dynamically create this marker layer group and have control over it showing (on / off) in my L.control.layers?
It sounds like you add your layer_group to your Layers Control while it is empty ($.getJSON works asynchronously), then re-assign it, so there is no longer a reference between your Layers Control and the markers you have instantiated.
2 easy workarounds:
Add your layer_group to your Layers Control after it is fully built: myLayersControl.addOverlay(layer_group, "Markers")
Use a placeholder Layer Group in your Layers Control, then add your markers into it (myLayerGroup.addLayer(marker)) or simply add your layer_group at the end to it (myLayerGroup.addLayer(layer_group))
New to leaflet, and basically everything programming related.
I am making a brewery map showing locations of breweries, distilleries, vineyards, etc around the state.
What I want to do is have a popup that gives:
Name, Address, URL to that specific website.
I've figured out the Name/Address part, but I just can't figure out how to pull the URL from the object's properties. I've tried many iterations, none work (or even partially work).
As well, my searches have been fruitless, but I can't be the only one who has tried to do this. Bad search skills?
//load GeoJSON from an external file
$.getJSON("breweries.geojson",function(data){
var pintGlass = L.icon({
iconUrl: 'glass.png',
iconSize: [24,48]
});
var popupMarker = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: pintGlass});
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong> </br/>" + feature.properties.STREETNUM
+ " " + feature.properties.STREET + ", " + feature.properties.CITY + <a href=feature.properties.URL>feature.properties.URL</a>);
return marker;
}
});
var clusters = L.markerClusterGroup();
clusters.addLayer(popupMarker);
map.addLayer(clusters);
});
The last bit of the marker.bindPopup is the trouble spot. I've tried single quotes, double quotes, no luck. I tried creating a variable to pull the object.properties.URL out and insert that variable into the with no luck.
The problem is exactly at the following point, where you are trying to create a String:
+ <a href=feature.properties.URL>feature.properties.URL</a>
which should be
+ "" + feature.properties.URL + ""
It appears that you a not enclosing your strings correctly.
Try this and let me know if it works:
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong></br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + " " + feature.properties.URL + "");
I know you've got a couple of "working" answers but i'de like to point out a few things. At the moment your ending up with markup like this:
<a href=http://example.org>http://example.org</a>
But it's best practice in HTML to make sure attribute values are wrapped in double quotes like this:
http://example.org
To accomplish that you'll have to do the following:
"" + feature.properties.URL + ""
Notice the slashes proceding the double quotes, a slash escapes the following double quote so that it gets treated like a string. Things like this can get pretty ugly very quick. That's why it's best when you're concatenating HTML with javascript that you simply use single quotes:
'' + feature.properties.URL + ''
That way you won't have to escape any double quotes in your strings.
And i'de like to point out a thing that Leaflet users often overlook is the wonderful L.Util.template method:
Simple templating facility, accepts a template string of the form 'Hello {a}, {b}' and a data object like {a: 'foo', b: 'bar'}, returns evaluated string ('Hello foo, bar'). You can also specify functions instead of strings for data values — they will be evaluated passing data as an argument.
http://leafletjs.com/reference.html#util-template
Using that takes away a lot of the hassle of what you're doing now, for example:
var values = {
a: feature.properties.NAME,
b: feature.properties.STREETNUM,
c: feature.properties.STREET,
d: feature.properties.CITY,
e: feature.properties.URL
};
var templateString = '<strong>{a}</strong><br>{b} {c}, {d} {e}';
var htmlString = L.Util.template(templateString, values);
I am wondering is it possible to run a function that outputs a line that javascript can read and recognize as a variable and not as a string? I have pulled JSON data and what I want to do is to take the object data and dynamically write out variables from it on the fly. I hope this is possible..
function createVar(data){
return "var_" + data.name + data.id + "=_" + data.desc;
//This will return the line :
var itemModel1 = "I no longer vote";
}
I have to say that I don't really recommend this, but it does work.
function createVar(data){
return "var " + data.name + data.id + "='" + data.desc + "'";
}
var exampleData = {name:"itemModel", id:"1", desc:"Today we went to the mall"}
eval(createVar(exampleData));
console.log(itemModel1); //outputs "Today we went to the mall" to the console
I will clarify by saying that if you actually need to generate variable names on the fly, this will do the trick. But I would more closely examine your code to see if there is another way to accomplish what you are trying to do. As always, you have to be very careful with eval, bad things can happen if user input gets passed as your data parameter.
I'm developing a time and location aware application and the google maps v3 api places library has almost everything I need. However, when doing a textSearch() for specific addresses, and attempting to call getDetails() for one of the returned PlaceResult items, the PlaceResult.utc_offset property returned from getDetails() is undefined (all the other PlaceResult properties I need are returned fine, just not the utc_offset).
It's strange, because if I do a textSearch() for a generic term like "pizza" and then call getDetails() for one of the returned PlaceResult items, the PlaceResult.utc_offset property returned from getDetails() will have a value.
Does anyone know why the utc_offset is populated for the results of a generic search, but not when searching for a specific address, or what am I doing wrong?
As you mentioned in only works when there are generic terms like "pizza". What I've done is if it is undefined, I call the Google TimeZone API to get the info. I've put a code sample below, but you can see my solution on GitHub as well, https://github.com/pushpickup/pushpickup/blob/master/client/views/games/creategame/select-location.js#L13
if (place.utc_offset === void 0) {
timeStamp = (Date.now() || new Date().getTime())/1000;
timeZoneApiRequestUrl = "https://maps.googleapis.com/maps/api/timezone/json?location=" +
place.geometry.location.lat() + "," + place.geometry.location.lng() +
"×tamp=" + timeStamp + "&key=YOUR_API_KEY"
$.get(timeZoneApiRequestUrl, function( data ) {
var utcOffset = (data.rawOffset + data.dstOffset || 0) / 3600;
console.log("UTC offset is " + utcOffset + " hours")
}); // expand this to handle errors, just doing a get with success for now as a POC
}
I'm pretty new to the google maps API, but from what I understand about KML layers, this map probably uses one. However, I'm not sure how to find it. I looked at the javascript used in this web page, but I can't seem to find the KML. Please help.
Here's the link
Thanks!
One of the referenced .js files is http://maplarge.com/AidsMapV5.js. On line 2730 of that file is:
getTileUrl: function (level, row, col) {
return "http://api.maplarge.com/Tile/Tile?z=" + level + "&x=" + col + "&y=" + row +
"&layer=" + layerString + "&filter=" + filterString + "&shader=" + shaderString;
}
They're using an API called Map Large and that's where the layers come from.