Develop Reference

Adding onclick call for mapbox icons

I'm struggling with adding a click event to points on my mapbox map. I'm having to add the source from a backend sql query into a hbs template. I've tried just adding business1 as the source without the for loop but i get an invalid geojson object warning. If i add just 'locations' as the id obviously it gives me a warning that the id already exists on the map.
So how i can add an onclick call for dynamics id's?
How i load the points
business1 = {{{businesses}}}
for(i=0;i<business1.length;i++){
// Add the data to your map as a lyer
map.addLayer({
id: 'locations'+[i],
type: 'symbol',
minzoom: zoomThreshold,
// Add a GeoJSON source containing place coordinates and information.
source: {
type: 'geojson',
data: business1[i]
},
layout: {
'icon-image': 'circle-stroked-15',
'icon-allow-overlap': true,
}
});
}
How the map click is called-with the added [i] just to show what i'm thinking
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['locations'+[i]] // replace this with the name of the layer
});
if (!features.length) {
return;
}
What else i've tried-but always returns the same location regardless of what is clicked
for(i=0; i<business1.length;i++){
var features = []
var feature = [i]
feature.dataPosition = i;
var clickedNameClicked = names[this.dataPosition]
console.log(clickedNameClicked)
features.push(business1[i]);
}

I definitely don't recommend adding a new source / layer for each business. That will not be performant if you have a bunch of layers, and I think it's adding too much complexity to your on click logic.
I've tried just adding business1 as the source without the for loop but i get an invalid geojson object warning.
This is a strong indication that there's something awry with your business data that you should address before adding it to your map and worrying about click events. I would recommend using a tool like http://geojsonlint.com/ to see what is going on there.
Once you have valid geojson, it will be much easier to add click events to your icons. https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/
⚠️ Disclaimer: I currently work at Mapbox ⚠️

Json to Map Unsing Amcharts

I need to creat a Tunisia map using Amcharts with my json data
Code in my json / id in tunisiaLow
nbre in my json / value in tunisialow
i change in tunisiaLow like my json data but not work
i need samthink like this
pic
pleas help me
this is my code in plunker plnkr.co/edit/6aDJREhcFYSfM5JW99mX?p=preview

The biggest issue with your code is that you modified the AmCharts map JS file in such a way that it completely breaks with the library. The JS files should not be modified unless you know what you're doing and follow the directions on creating your own map files tutorial. Your modified file removes the required id attribute that makes the map function.
Ideally you should modify your data to match the map format, not the other way around. Going by your last ticket, you seem to be unable to change your data, so the solution is the same as the last - remap your data to conform with AmCharts' format.
The original JS/SVG map has a list of IDs for each province. Since your dataset's titles don't exactly match the titles within the original map, you'll want to create a lookup object that uses your titles to link up to the internal map IDs, for example, using your French titles:
var areaDataMapping = {
"TUNIS": "TN-11",
"ARIANA": "TN-12",
"BEN AROUS": "TN-13",
"MANOUBA": "TN-14",
"NABEUL": "TN-21",
"ZAGHOUAN": "TN-22",
"BIZERTE": "TN-23",
"BEJA": "TN-31",
"JENDOUBA": "TN-32",
"KEF": "TN-33",
"SILIANA": "TN-34",
"KAIROUAN": "TN-41",
"KASSERINE": "TN-42",
"SIDI BOUZID": "TN-43",
"SOUSSE": "TN-51",
"MONASTIR": "TN-52",
"MAHDIA": "TN-53",
"SFAX": "TN-61",
"GAFSA": "TN-71",
"TOZEUR": "TN-72",
"KEBILI": "TN-73",
"GABES": "TN-81",
"MEDENINE": "TN-82",
"TATAOUINE": "TN-83"
};
From there, you can remap your parsed JSON file to create the correct area object array with the required properties such as id, title and value and then assign the result to your code:
var remappedAreas = AmCharts.parseJSON( areas ).map(function(area) {
return {
id: areaDataMapping[area.libelleFr],
title: area.libelleAr,
code: area.code,
value: area.nbre
}
});
var map = AmCharts.makeChart("...", {
// ...
"dataProvider": {
// ...
"areas": remappedAreas,
// ...
},
// ...
});
Here's an updated plunkr, which uses the official AmCharts JS for Tunisia instead of your version.

Creating a dynamic JSON from C# to JavaScript

I am new at C# programming and I am developing an application based on geolocation for my Graduate.
I have a Javascript which is responsible for creating the map and inserting the markers. But the markers are inserted from a JSON file, like this:
{
"Id": 1,
"Latitude": -19.212355602107472,
"Longitude": -44.20234468749999,
"Descricao": "Conteúdo do InfoBox 1"
},
And after that. they call this file by this:
function carregarPontos() {
$.getJSON('js/pontos.json', function(pontos) {
$.each(pontos, function(index, ponto) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
title: "Meu ponto personalizado! :-D",
map: map
});
});
});
}
carregarPontos();
My problem is I need to have those points from MySql DB.
I created a DataTable where I have the information I need to pass to this JSON, but I don't have any clues regarding how to make it.
Any help? Please keep in mind I am a noob at C# and JSON programming.

While the standard C# library offers some JSON support, you're better off using the free JSON.Net library from Newtonsoft. You can add it to your project in Visual Studio through the NuGet package manager (Project > Manage NuGet packages).
Then make sure your file has:
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
To parse a JSON, just write dynamic json = JObject.Parse(str);
Then you can access its properties just like you would in JavaScript, the only difference being that undefined properties will return null.
dynamic json = JObject.Parse("{example: \"Hello world\"}");
Console.Write(json.example); // prints "Hello world"
To write a JSON, just create a JObject and then append strings, numbers, JArrays and JObjects to it.
dynamic json = new JObject();
json.example = "Hello world";
json.myArray = new JArray(1, 2, 3, 4);
Console.Write(json);
// {
// "example": "Hello world",
// "myArray": [
// 1,
// 2,
// 3,
// 4
// ]
// }

as far as I understand you have some data stored in your sql database from where you will fetch the data and pass to a javascript function.
If that is the case then you can refer to this link.
Pass json/javascript data/objects to c# function using ajax
The example given is using aspx approach and not the MVC but it will be similar.

Dojo Line chart from JSON with multiple series and common x-axis

I believe what I am trying to accomplish should be a fairly common task, yet I'm having difficulty getting it to work. I simply wish to create a multi-series plot from a data set containing (for each record) an ISO8601 timestamp along with multiple data points. The data is in JSON format and I'm using dojox.charting.chart "Lines" type.
I'm already aware that the Dojo charts cannot directly handle time-based axis data, let alone ISO8601. So I've already dealt with converting the x-axis to milliseconds-since-T0 server-side.
Here is a distilled example excerpt of my JSON:
[{"Offset_ms":0,"CP":250.58368,"TP":181.88211},
{"Offset_ms":360000,"CP":233.18443,"TP":119.94824},
{"Offset_ms":540000,"CP":227.15465,"TP":117.99422},
{"Offset_ms":720000,"CP":222.87495,"TP":117.55895},
{"Offset_ms":896000,"CP":218.19876,"TP":117.64221},
{"Offset_ms":900000,"CP":219.77487,"TP":117.93475}]
And the distilled JavaScript (assume the above JSON is in the variable 'sequenceData'):
var chart = new dojox.charting.Chart("sequenceDataGraph");
chart.addPlot("default", {
type: "Lines",
tension: "X"
});
chart.addAxis("x", { labelFunc: labelTimeAxis });
chart.addAxis("y", { vertical: true });
var sequenceDataStore = new dojo.store.Observable(new dojo.store.Memory({
data: {
label: "Sequence",
items: sequenceData
}
}));
addSequenceDataSeries(chart, sequenceDataStore, "TP");
addSequenceDataSeries(chart, sequenceDataStore, "CP");
chart.render();
function addSequenceDataSeries(chart, sequenceDataStore, sColumnName) {
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
}
What appears to be happening, is that Dojo Chart is not using the x-axis data at all, but instead plotting each point at a fixed interval based on the number of data points. That is, each data point seems to be assigned an ordinal, such as if Offset_ms was merely 1, 2, 3... Since my data points are not always at fixed intervals, the resulting graph is distorted.
How do I instruct Dojo Chart to use the "Offset_ms" field in the JSON data for the x-axis component?
I've scoured the tutorials, the API docs and performed numerous Google & SO searches to no avail. I've even browsed portions of the Dojo source, particularly StoreSeries.js.uncompressed.js, but I'm not finding any answers. Surely this is possible, and hopefully trivial!

Unfortunately, the official dojo documentation is seriously lacking, and I only figured out how to do something similar by browsing the dojo source. Specifically, line 135 of the StoreSeries test, http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_StoreSeries.html
The StoreSeries constructor's third argument accepts an object that maps the X and Y axis to specific fields in your data store.
Change the following line in your code from this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
sColumnName));
to this:
chart.addSeries(sColumnName, new dojox.charting.StoreSeries(sequenceDataStore, { query: {} },
{ x: "Offset_ms", y: sColumnName }));
sColumnName becomes { x: "Offset_ms", y: sColumnName }

Drawing lines with geoJSON data in D3.js

I'm trying to draw US state outlines with the D3 framework (http://mbostock.github.com/d3/) but am having issues generating the actual SVG data. I've written my code to follow the Chloropleth example (as it most closely resembles what this project needs), made sure the supplied data is in geoJSON format, and AFAIK have the backend half of this working fine.
The problem is that when I view the DOM, the <svg> object contains only one <g> element (which I created manually, per the example), and none of the child <path> elements that should under it. My code seems fairly identical to the example, and my data appears to look correct, though I am outputting MultiPolygons instead of the Polygon object that the example uses.
Our app is a RoR project with jQuery (we're only using D3 for the SVG and geography features). The test page tries to create an <svg> element under a div called theArea, based upon the selection from a dropdown select of U.S. states:
$(document).ready( function() {
$("#chooser_state").change( function() {
var status = "#status";
var statebox = "#chooser_state";
var theArea = "#theArea"
var url = "/test/get_state_geom";
var data = { state: $(statebox).val() };
$(status).text("Request sent...");
$.post(url, jQuery.param(data), function(resp) {
$(status).text("Received response: " + resp["message"]);
$(theArea).empty();
var path = d3.geo.path();
var svg = d3.select(theArea).append("svg");
var state = svg.append("g").attr("id", "state_view");
var features = resp.payload.features;
$(status).text("Created SVG object");
state.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path );
});
});
});
The data we're feeding D3 looks like this:
{
'type' => 'Feature',
'id' => '01',
'properties' => {
'name' => 'Colorado'
},
'geometry' => {
'type' => 'MultiPolygon',
'coordinates' => [
[
[
[
-106.190553863626,
40.9976070173843
],
[
-106.061181,
40.996998999999995
],
< -- and so on -- >
]
]
]
}
}
Can someone clue me in to what we're doing wrong? I am new to geo and GIS stuff. I suspect the problem lies with the data() function, as it looks like it should be creating the blank <path> objects for each Feature (though we have only one, at the moment), but the D3 documentation seems unclear (and difficult to understand).
EDIT: Just wanted to add that the geoJSON we generate was created by the geoJSON extension for the GeoRuby gem. The actual map lines were sourced from the consolidated data that US Census Bureau's cartographic boundary files, which were converted to SQL and saved with postGIS. Part of me suspects the geoJSON extension is doing something wrong, so that is my next avenue of attack.

After giving up on this and then coming back, I noticed that my FeaturesCollection was not, in fact, a collection. There's a small detail that is easy to overlook when examining geoJSON samples: the contents of the FeaturesCollection is an array of hashes, not a single hash.