We Keep Coding

How to change lat/lng coordinates in pixel in Mapbox-gl-js inside Expression?

Good day!
I want to create an expression in Mapbox-gl-js for circle-radius. The challenge is circle-radius takes value in pixel but I have geographical coordinates(lat/lng).
When I try to use Map.project inside expression below(doesn't work):
['*',
2,
[
'*',
['pi'],
[
'-',
map.project(['get', 'p1'])[0], //<--doesn't work
map.project(['get', 'p2'])[0] //<--doesn't work
]
]
]
const layer: mapboxgl.Layer = {
'id': seatLayerName,
'type': "circle",
'source': 'maine',
'paint': {
"circle-radius": [
'interpolate',
['exponential', 2],
['zoom'],
5,
...//code
13,
['*', 2, ['*', ['pi'], ['-', ['get', 'p1'], ['get', 'p2']]]] //<-- How to use map.project here
]
}
};
Geojson:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.156983852386475,
-4.0492925407532
]
},
"properties": {
p1: [8.156983852386475, -4.0492925407532], //<-- point 1 lat/lng
p2: [8.176983852386475, -4.0492925407532] //<-- point 2 lat/lng
}
},
....
]
}
Attaching a screenshot, which I want to achieve creating an expression:
Mapbox provides map.project method to convert lat/lng to the pixel.
But how can I use this inside an expression?
Any suggestion would be helpful.

How to specify a unique color for each polygon using Google maps?

I need to specify a different color for each polygon using Google maps, this is my code so far:
var colors = ['#3366CC','#DC3912','#FF9900','#109618','#990099','#3B3EAC','#0099C6','#DD4477','#66AA00','#B82E2E','#316395','#994499','#22AA99','#AAAA11','#6633CC','#E67300','#8B0707','#329262','#5574A6','#3B3EAC']
for (i=0;i<response.length;i++){
x=wellknown.parse(response[i].geom);
map.data.addGeoJson(x);
map.data.setStyle({
fillColor: colors[i],
strokeWeight: 1
})
}
But it doesn't work as I expect it to, it's overwriting the style of all the polygons with the style of the last one, how can I do this please?
codepen for the problem

Use a style function to set the color based on a property of the polygon.
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapElement = document.getElementById('map');
var pos = {
lat: 34.963442,
lng: -4.132102
};
var map = new google.maps.Map(mapElement, {
zoom: 7,
center: pos
});
for (i = 0; i < response.length; i++) {
response[i].features[0].properties = {
polyNum: i
}
map.data.addGeoJson(response[i]);
}
map.data.setStyle(function(feat) {
return {
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
}
})
}
proof of concept fiddle
code snippet:
response = [{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-5.728815299999951, 35.700733600000035],
[-5.72649569999993, 35.695227000000045],
[-5.72263339999995, 35.687280100000066],
//snip
[-6.029523099999949, 35.47567980000008],
// snip
[-5.931709999999953, 35.78152110000008],
[-5.732892299999946, 35.69954860000007],
[-5.728815299999951, 35.700733600000035]
]
]
]
}
}]
}, {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.365168599999947, 35.15238920000007],
[-4.365278599999954, 35.15236920000007],
[-4.365262499999972, 35.15244370000005],
[-4.36521149999993, 35.15243510000005],
[-4.365168599999947, 35.15238920000007]
]
],
[
[
[-4.3649855999999545, 35.15214580000003],
[-4.3650431999999455, 35.15209070000003],
[-4.365078099999948, 35.15210710000008],
[-4.36509419999993, 35.152131300000065],
[-4.365201499999955, 35.15215320000004],
[-4.365079499999979, 35.15220030000006],
[-4.365028499999937, 35.15219160000004],
[-4.3649855999999545, 35.15214580000003]
]
],
[
[
[-4.366129499999943, 35.15200100000004],
[-4.366239499999949, 35.151981000000035],
[-4.366223399999967, 35.152055500000074],
[-4.366172399999925, 35.15204680000005],
[-4.366129499999943, 35.15200100000004]
]
],
[
[
[-4.366694199999927, 35.15164400000003],
[-4.366804199999933, 35.15162400000003],
[-4.366788099999951, 35.151698500000066],
[-4.366691499999945, 35.151729300000056],
[-4.366694199999927, 35.15164400000003]
]
],
[
[
[-4.365267299999971, 35.15227530000004],
[-4.365322899999967, 35.15226450000006],
[-4.365361199999938, 35.15222490000008],
[-4.3654469999999606, 35.15222710000006],
[-4.365455599999962, 35.15232430000003],
[-4.365443999999968, 35.15235420000005],
[-4.36534219999993, 35.15234540000006],
[-4.365279299999941, 35.15230290000005],
[-4.365267299999971, 35.15227530000004]
]
],
[
[
[-4.365066099999979, 35.15270730000003],
[-4.365264599999932, 35.15273810000008],
[-4.365387999999939, 35.15288280000004],
[-4.365108999999961, 35.15280380000007],
[-4.365066099999979, 35.15270730000003]
]
],
[
[
[-4.359619499999951, 35.15125780000005],
[-4.360025599999972, 35.150890900000036],
[-4.3600845999999365, 35.15091280000007],
[-4.360181199999943, 35.15144350000003],
[-4.360692999999969, 35.15219440000004],
[-4.360843199999977, 35.152966400000025],
[-4.360895299999925, 35.15297430000004],
[-4.360920799999974, 35.15298910000007],
[-4.360934199999974, 35.15302090000006],
[-4.36091209999995, 35.15304660000004],
[-4.360845599999948, 35.153045500000076],
[-4.360853099999929, 35.15329660000003],
[-4.360564799999963, 35.15332730000006],
[-4.360570099999961, 35.153376700000024],
[-4.360697499999958, 35.15346880000004],
[-4.360800599999948, 35.15360270000008],
[-4.360794099999964, 35.15370010000004],
[-4.360508399999958, 35.15367270000007],
[-4.3601350999999795, 35.15384360000007],
[-4.359662999999955, 35.153975100000025],
[-4.359695199999976, 35.15366810000006],
[-4.359566499999971, 35.153519000000074],
[-4.359523599999932, 35.15299270000003],
[-4.359328099999971, 35.15254580000004],
[-4.359118999999964, 35.152525800000035],
[-4.359000999999978, 35.15250170000007],
[-4.358944699999938, 35.152337200000034],
[-4.358864199999971, 35.15219460000003],
[-4.358966199999941, 35.15194900000006],
[-4.359072999999967, 35.15193130000006],
[-4.359619499999951, 35.15125780000005]
]
],
[
[
[-3.8118572999999287, 35.129859700000054],
[-3.8139699999999266, 35.11749000000003],
// snip
[-3.8255157999999483, 34.90404140000004],
// snip
[-4.376043299999935, 35.15328130000006],
[-3.8103843999999754, 35.135774000000026],
[-3.811559999999929, 35.13160000000005],
[-3.8118572999999287, 35.129859700000054]
]
]
]
}
}]
}, {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-4.470361499999967, 35.079306700000075],
[-4.476197999999954, 35.05781030000003],
// snip
[-5.207069099999956, 34.88052770000007],
// snip
[-4.482892799999945, 35.11470000000003],
[-4.4942223999999555, 35.08295910000004],
[-4.470361499999967, 35.079306700000075]
]
]
]
}
}]
}, {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[-2.0528876999999284, 34.48349570000005],
[-2.0536608999999544, 34.48332490000007],
// snip
[-1.9856368999999745, 34.93244160000006],
// snip
[-1.9415678999999386, 34.86222920000006],
// snip
[-1.7713567999999782, 34.75961640000003],
// snip
[-2.05311839999996, 34.483884800000055],
[-2.0528876999999284, 34.48349570000005]
]
]
]
}
}]
}];
var colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC'];
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapElement = document.getElementById('map');
var pos = {
lat: 34.963442,
lng: -4.132102
};
var map = new google.maps.Map(mapElement, {
zoom: 7,
center: pos
});
for (i = 0; i < response.length; i++) {
response[i].features[0].properties = {
polyNum: i
}
map.data.addGeoJson(response[i]);
}
map.data.setStyle(function(feat) {
return {
fillColor: colors[feat.getProperty("polyNum")],
strokeWeight: 1
}
})
}
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Visualizing Linestrings with properties in Leaflet

I want to visualize the following GeoJSON-Object that is sent to my Leaflet/JavaScript application. How can I visualize all the linestrings, showing the properties.name parameter for each linestring (e.g., by ToolTip).
{"features":[{"type":"Feature","properties":{"name":"0"},"geometry":{"type":"LineString","coordinates":[[10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]}},{"type":"Feature","properties":{"name":"0"},"geometry":{"type":"LineString","coordinates":[[10.941445541381836,52.438697814941406],[10.941454124450684,52.4387092590332],[10.941451263427734,52.43870544433594],[10.941445541381836,52.438697814941406],[10.941254806518555,52.440738677978516]]}}}
Any help would be great!
Thanks

You're not using GeoJSON correctly. If you have multiple feature you should use a feature collection : https://geojson.org/geojson-spec.html
Then use this website to have the correct format : https://jsonformatter.curiousconcept.com/
Then if you want to add tooltip refer to this tutorial : http://leafletjs.com/examples/geojson/
var geojsonFeature = {
"type":"FeatureCollection",
"features":[
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[
10.941445541381836,
52.438697814941406
],
[
10.941454124450684,
52.4387092590332
],
[
10.941451263427734,
52.43870544433594
],
[
10.941445541381836,
52.438697814941406
],
[
10.941254806518555,
52.440738677978516
]
]
},
"properties":{
"name":"0"
}
},
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[
10.941445541381836,
52.438697814941406
],
[
10.941454124450684,
52.4387092590332
],
[
10.941451263427734,
52.43870544433594
],
[
10.941445541381836,
52.438697814941406
],
[
10.941254806518555,
52.440738677978516
]
]
},
"properties":{
"name":"0"
}
}
]
};
function onEachFeature(feature, layer) {
// This is where it loop through your features
if (feature.properties) {
// If there is a properties document we bind a tooltip with your property : name
layer.bindTooltip(feature.properties.name);
}
}
L.geoJSON(geojsonFeature, {
onEachFeature: onEachFeature
}).addTo(map);

Load JSON file and append it to a map

I want to load in a json file and append it to a Leaflet-Map.
<input type='file' accept='Json' onchange='loadFile(event)'>
I'm struggling to work with the content of the JSON file, once it is uploaded.
An example of a JSON file would be :
{
"type": "FeatureCollection",
"features":
[
{
"type": "Feature",
"properties": {
"name": "Lagoa Stadium",
"coordinate":"-22.975801, -43.217316",
"venue_type": "Outdoor area",
"event": [{"name":"Canoe Sprint","date_start":"2016-08-15", "date_end":"2016-08-20"},
{"name":"Rowing","date_start":"2016-08-6", "date_end":"2016-08-13"}],
"link": "https://www.rio2016.com/en/venues/lagoa-stadium",
"images":["http://secure.rio2016.com/sites/default/files/imagecache/360x270_maps_cities/lagoa_aereas_secao01_alexferro_05032015-9156_1.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/6a/1_lagoa_rodrigo_de_freitas_rio_de_janeiro_2010.jpg","http://www.rio-de-janeiro-travel-information.com/images/marina-da-gloria-rio-de-janeiro-2016-olympics.jpg"],
"capacity": "14,000",
"parking": "-22.983465, -43.198912"
},
"geometry":
{
"type": "Polygon",
"coordinates": [
[
[
-43.21497917175292,
-22.979493188378516
],
[
-43.21643829345703,
-22.9790190701661
],
[
-43.21772575378418,
-22.97870299043356
],
[
-43.217811584472656,
-22.977596705547032
],
[
-43.21695327758788,
-22.976411390260754
],
[
-43.2161808013916,
-22.975068020367633
],
[
-43.21592330932617,
-22.971828073334315
],
[
-43.216352462768555,
-22.970089533152084
],
[
-43.21738243103027,
-22.968667074553263
],
[
-43.21703910827637,
-22.967323627688746
],
[
-43.21566581726074,
-22.96558502957624
],
[
-43.21446418762207,
-22.96432058054304
],
[
-43.212318420410156,
-22.96337223600826
],
[
-43.21051597595215,
-22.962977090489098
],
[
-43.20914268493652,
-22.96313514883533
],
[
-43.2063102722168,
-22.962819031958123
],
[
-43.20510864257812,
-22.96305611968531
],
[
-43.204078674316406,
-22.964083495032888
],
[
-43.20356369018555,
-22.966138222309887
],
[
-43.20356369018555,
-22.96740265434445
],
[
-43.20845603942871,
-22.971828073334315
],
[
-43.207340240478516,
-22.974830953706174
],
[
-43.204593658447266,
-22.973803660034452
],
[
-43.201160430908196,
-22.974830953706174
],
[
-43.20047378540039,
-22.97609530442847
],
[
-43.20004463195801,
-22.97751768485142
],
[
-43.20124626159668,
-22.978623970384902
],
[
-43.202362060546875,
-22.979256129480273
],
[
-43.207426071166985,
-22.980441419812312
],
[
-43.214378356933594,
-22.980125343407142
],
[
-43.21497917175292,
-22.979493188378516
]
]
]
}
}
]
}
How do I read out the content of this file and load it into my Map?
I managed to load a JSON file that is on my server by using this:
$.getJSON('CompleteList.json', function (geojson) {
jsonlayer = L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
Right now I loaded in the file and saved it in a variable... But what now?
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
console.log(jsonObject);
};
};
I hope I'm not missing anything and that it is not too much of a stupid question :D
It is too much code to post my whole project but right now it looks like this:

I guess once you included the Leaflet-Map library, JSON object will have function addTo(), so you need to parse the json object first.
var loadFile = function(event) {
// Init
var input = event.target;
var reader = new FileReader();
// Read the file
reader.readAsText(input.files[0]);
// Invoked when file is loading.
reader.onload = function(){
// parse file to JSON object
var jsonObject = reader.result;
var json = JSON.parse(jsonObject);
jsonlayer = L.geoJson(json, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}).addTo(map);
console.log(jsonObject);
};
};

You successfully read the content of your user file as text.
Now you need to convert that text into a JS object (actually GeoJSON, but it is really just a plain JS object that follows a specific convention).
For that, you simply use JSON.parse().
Then you can feed it into Leaflet L.geoJson() factory.

D3 overlay on google maps not fully rendering

as background, I've been working on a small project highlighting local neighborhoods and crime incidents over time in a d3 overlay on a google map, but finding that my overlay only partially renders.
The initial objective is achieving something visually like the map rendered here.
The code for the this target/example map can be seen in the JSfiddle here. I've used this example to guide my current work.
Unfortunately, when I run my overlay code with a google map for the view I'm targeting, I find that only small portions of the overall d3 paths actually render on the google map. From debugging in the console, I can see that all the relevant geojson data is loading and each path array is being included as a path node, but only one or two of the paths is being displayed on the map - e.g. I only see transparent fill over one or two neighborhoods (as shown in image linked below).
View of map's partial overlay rendering
Can anyone advise on why the d3 overlay with geojson data isn't being fully displayed, and how I can fix this, so that I see the full neighborhoods overlay?
Code below, and many thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function draw(geo_data) {
"use strict";
var margin = 100,
width = 1400 - margin,
height = 1000 - margin;
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "SvgOverlay");
var svg = layer.append("svg");
var neighborhoods = svg.append("g").attr("class", "Neighborhoods");
overlay.draw = function(){
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
var googleMapProjection = function (coordinates) {
var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
return [pixelCoordinates.x, pixelCoordinates.y];
};
path = d3.geo.path().projection(googleMapProjection);
neighborhoods.selectAll("path")
.data(geo_data.features)
.enter()
.append("path")
.attr("d", path);
};
};
overlay.setMap(google_base);
};
</script>
</head>
<body>
<div id="google_map">
</div>
<script type="text/javascript">
var google_base = new google.maps.Map(d3.select("#google_map").node(), {
zoom: 13,
center: new google.maps.LatLng(37.81, -122.26),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: false,
styles:[{"stylers": [{"saturation": -50},{"lightness": 75}]}]
});
d3.json("neighborhoods.geojson", draw);
</script>
</body>
</html>
Note: example geojson data
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "Montclair" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -122.21594888924534, 37.832181779651613 ], [ -122.199005320235656, 37.839802502024263 ], [ -122.195700218341074, 37.834717626248832 ], [ -122.204865526096057, 37.83063877524836 ], [ -122.204065506384751, 37.826138894083272 ], [ -122.203989505503827, 37.825037923657973 ], [ -122.204862534763905, 37.82484093266519 ], [ -122.206357582839033, 37.825825912182573 ], [ -122.207037605809575, 37.825554922390438 ], [ -122.21045471226752, 37.829664825068207 ], [ -122.212788791761739, 37.828300871884338 ], [ -122.21104273740049, 37.826278919502776 ], [ -122.209740697282683, 37.824438964026321 ], [ -122.209719696572449, 37.824446963720987 ], [ -122.207737635353567, 37.821578033328542 ], [ -122.207938642362265, 37.821377039630789 ], [ -122.208037645976759, 37.82117704547791 ], [ -122.208238653148413, 37.820877054469094 ], [ -122.210140719787248, 37.818876116804304 ], [ -122.211442762016475, 37.819577103232504 ], [ -122.212243787852969, 37.820077093014056 ], [ -122.214446859285928, 37.821177072378525 ], [ -122.215348888403369, 37.821678062551726 ], [ -122.216549926889712, 37.822478045852897 ], [ -122.216749933170547, 37.822678041257156 ], [ -122.217351952809793, 37.822878038347341 ], [ -122.218401986194451, 37.823679020982773 ], [ -122.221157073570424, 37.825778975452437 ], [ -122.222459113734274, 37.827279940103317 ], [ -122.222759122864446, 37.827679930485409 ], [ -122.223861155874616, 37.829379888880801 ], [ -122.224462173475956, 37.830480861460941 ], [ -122.223133128544632, 37.830996841877365 ], [ -122.222659112528717, 37.83118083489429 ], [ -122.221358066237769, 37.83288178322033 ], [ -122.219555006623537, 37.832981772972666 ], [ -122.218852983299286, 37.833081767323314 ], [ -122.217851950689095, 37.832881768578396 ], [ -122.217351934210413, 37.832881766490274 ], [ -122.21594888924534, 37.832181779651613 ] ] ] } }